HTML相关知识

一.html的语法规范（标签）
- 特点：
- 标签关系：
二.基本结构标签(==骨架标签==)
三.常用标签
- 1. 标题标签
- 2.==段落和换行标签==
- - 1.段落：
  - 2.换行
- 3.文本格式化标签
- 5.`<div>`和`<span>`标签(==用来装内容==)
- - 特点：
- 6.==图像标签和路径==
- - 1.图像标签`<img>`
  - 2.路径
  - - 1.目录文件夹和根目录
    - 2.相对路径绝对路径
- 7.超链接标签`<a>`
- - 1.语法格式
  - 2.链接分类
- 8.表格标签(不用来布局)
- - 1.作用
  - 2.基本语法
  - 3.表头单元格标签`<th>`
  - 4.表格标签结构
  - 5.合并单元格
- 9.列表标签
- - 1.无序列表`<ul>`
  - 2.有序列表`<ol>`
  - 3.自定义列表`<dl>`
  - - ==总结==
- 10.表单标签
- - 1. 目的
  - 2. ==组成==
  - 3. 表单域`<form>`
  - 4.表单控件
四.HTML中的注释和特殊字符
- 1.注释
- 2.特殊字符
五.`<input>`相关属性
- type属性的属性值
- 其他属性

一.html的语法规范（标签）

特点：

关键词由尖括号包围。
通常成对出现，称为双标签。<html>我的网页</html>，其中<html>开始标签</html>结束标签。
单标签，<br/>,<hr>

标签关系：

1.包含关系:

  <html><head><title></title></head>
</html>

2.并列关系：

<head></head>
<body></body>

二.基本结构标签(骨架标签)

标签名	定义	说明
`<html></html>`	HTML标签	跟标签页面中最大的标签
`<head></head>`	文档头部	内部必须包含`<title>`标签
`<title></title>`	文档标题	网页的标题如：
`<body></body>`	文档主题	内部包含文档(网页)的所有页面内容

<!DOCTYPE html>  //文档类型声明标签
<html lang="en">  //网页类型为英文网页
<head>      //文档头部<meta charset="UTF-8">  //利用utf-8编码保存，防止出现乱码<meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>   //网页标题
</head>
<body>     //文档主体内容主体内容
</body>
</html>

三.常用标签

1. 标题标签

标题标签
语义：用作标题，并根据重要性递减

2.段落和换行标签

1.段落：

语义：将HTML文档分为若干段落
特点：1.文本在段落中会根据窗口大小自动换行
2.段落间有空隙

2.换行

3.文本格式化标签

语义	标签	说明
加粗	`<strong></strong>`或`<b></b>`	推荐`<strong>`，语义更强烈
倾斜	`<em></em>`或`<i></i>`	推荐`<em>`
删除线	`<del></del>`或`<s></s>`	推荐`<del>`
下划线	`<ins></ins>`或`<u></u>`	推荐`<ins>`

5.`<div>`和`<span>`标签(用来装内容)

特点：

<div>用来布局，一行只能有一个，大盒子。
<span>用来布局，一行可放多个，小盒子。

6.图像标签和路径

1.图像标签`<img>`

用于定义HTML中的图像

属性	属性值	说明
src	图像路径	必有属性,用于指定图像的文件名和路径
alt	文本	替换文本，图片无法显示时出现的文字
title	文本	提示文字，鼠标移动到图片所显示的文字
width	像素	图像宽度
height	像素	图像高度
border	像素	图像边框

注：1. 改标签可拥有多种属性
2.属性不分先后顺序，属性之间用空格分开
3. 属性采取键值对格式，即“属性=属性值”

2.路径

目录文件夹：即普通的文件夹，其中存有网页相关的素材
根目录：目录文件夹的第一层

2.相对路径绝对路径

相对路径：文件相对于HTML文档的位置，即以引用文件所在位置为参考从而建立的目录文件夹
绝对路径：指目录的绝对位置，直达目标位置，通常从盘符开始

7.超链接标签`<a>`

1.语法格式

<a herf = "跳转目标" target = "窗口弹出方式">文本</a>

2.链接分类

外部链接：转到其他网页
内部链接：网站内部页面间的链接。
空链接：没有明确的链接目标
下载链接：链接地址为一个文件(或压缩包)，点击会直接下载。
网页元素链接
锚点链接：可以快速定位到网页页面某个位置
注：1. 要定位需将herf的属性值设为#名字
2.在要定位至的页面位置的标签中设置id属性，并将其属性值设为名字

8.表格标签(不用来布局)

1.作用

用于显示，展示数据，其可让数据非常规整的显示，有非常好的可读性

2.基本语法

<table><tr><td>单元格文字</td>....</tr>....
</table>

注：

<table></table>定义表格
<tr></tr>定义表格的行，需嵌入<table>中使用
<td></td>定义单元格
例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 网页标题 --><title>网页</title>
</head>
<body><table><tr><td>姓名</td>  <td>性别</td>  <td>年龄</td></tr><tr><td>刘德华</td>  <td>男</td>  <td>56</td></tr><tr><td>张学友</td>  <td>男</td>  <td>58</td></tr><tr><td>郭富城</td>  <td>男</td>  <td>51</td></tr><tr><td>黎明</td>  <td>男</td>  <td>57</td></tr></table>
</body>
</html>

3.表头单元格标签`<th>`

突出重要性，会加粗居中显示
例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 网页标题 --><title>网页</title>
</head>
<body><table><tr><th>姓名</th>  <th>性别</th>  <th>年龄</th></tr><tr><td>刘德华</td>  <td>男</td>  <td>56</td></tr><tr><td>张学友</td>  <td>男</td>  <td>58</td></tr><tr><td>郭富城</td>  <td>男</td>  <td>51</td></tr><tr><td>黎明</td>  <td>男</td>  <td>57</td></tr></table>
</body>
</html>

4.表格标签结构

<thead>-头部，定义表格头部，内部必须有<tr>
<tbody>-主体，定义表格主体，用于存放数据本体

5.合并单元格

方式：跨行-“rowspan=‘单元格个数’”
跨列：“colspan=‘单元格个数’”
目标单元格：跨行-最上侧单元格
跨列-最左侧单元格
3.三步曲：1.确定方式
2.找到目标，写上合并方式及数量
3.删去多余的单元格代码

9.列表标签

1.无序列表`<ul>`

语法格式：

各列表项无顺序，是并列的
<ul>中只能嵌入<li>
无序列表有自己的样式属性，也可以用CSS来修改

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网页</title>
</head>
<body><h4>你玩的游戏</h4><ul><li>王者荣耀</li><li>英雄联盟</li><li>原神</li><li>和平精英</li></ul>
</body>
</html>

2.有序列表`<ol>`

各列表有顺序

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网页</title>
</head>
<body><h4>你玩的游戏</h4><ol><li>王者荣耀</li><li>英雄联盟</li><li>原神</li><li>和平精英</li></ol>
</body>
</html>

3.自定义列表`<dl>`

基本语法:

<dl><dt>名词1</dt><dd>名词1解释1</dd><dd>名词1解释2</dd>
</dl>

注：其中<dt>,<dd>无个数限制，通常为一个<dt>对应多个`dd

总结

标签名	定义	说明
`<ul></ul>`	无序标签	里面只能包含`<li>`，没有顺序，使用较多，`<li>`中可以包含任何标签
`<ol></ol>`	有序标签	有顺序，相对较少使用
`<dl></dl>`	自定义标签	里面只能包含`<dt>`和`<dd>`，`<dt>`和`<dd>`中可包含任何标签

10.表单标签

1. 目的

收集用户信息

2. 组成

表单域，表单控件，提示信息

3. 表单域`<form>`

包含表单元素的区域
其会将范围内的表单元素信息交给服务器

4.表单控件

<input>-用于收集用户信息
格式：<input type="属性值">根据不同的type属性，可输入不同类型的字段
<label>-为<input>定义标注，用于绑定一个表单元素，点击<label>标签内的文本，浏览器就会自动选择对应表单上的元素，用来增加用户体验。
语法：

<label for="sex">男</label>
<input type="radio" name="sex" id="sex"/>

核心：label标签的for属性应当与相关元素的id属性相同

<select>-下拉列表
语法：

<select><option></option><option></option>....</select>

注：

<select>中至少包含一对<option>
在<option>中定义select="select"时，当前选项为默认选中项
<textarea>-文本域(用户输入内容较多时使用)
定义多行文本输入
语法：

<textarea rows="3" cols="20">文本内容</textarea>

注：cols=“每行中的字符数”，rows=“显示行数”，基本不用

四.HTML中的注释和特殊字符

1.注释

便于阅读和理解HTML文档
形式：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 网页标题 --><title>网页</title>
</head>
<body>
<!-- 网页主体 -->文档
</body>
</html>

2.特殊字符

用来代替很难或不方便使用的符号

五.`<input>`相关属性

type属性的属性值

属性值	描述
button	定义可点击按钮(用于通过JS启动脚本)
checkbox	定义复选框
file	定义输入字段和"浏览"按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段，字符会被掩码
radio	定义单选按钮
reset	定义重置按钮
submit	定义提交按钮
text	定义单行输入字段

其他属性

属性	属性值	描述
name	用户自定义	定义input元素的名称
value	用户自定义	规定input元素的值
checked	checked	默认选项
maxlength	正整数	输入字段的最大长度

HTML（卓音前端之旅第一站）相关推荐

CSS(卓音前端之旅第二站)
CSS 什么是CSS 语法规范 CSS基础选择器 1.作用 2.选择器分类 1. 基础选择器 1. 标签选择器:用HTML标签名作为选择器 2. 类选择器 3. id选择器 4. 通配符选择器 2. ...
Javascript之旅——第一站：从变量说起
原文出处: 一线码农的博客欢迎分享原创到伯乐头条工作这几年,js学的不是很好,正好周末有些闲时间,索性买本<js权威指南>,大名鼎鼎的犀牛书,好好的把js深入的看一看.买过这本书的 ...
asp.net mvc 之旅—— 第一站从简单的razor入手
记得2011年mvc3刚出来的时候,我们就有幸将 mvc3 用在我们团购项目上,当时老大让我们用一个星期时间来熟悉mvc,幸好园子里面的老朋友DR 正在写mvc3系列,也恭喜这个系列文章被整理成专题供 ...
Python的学习之旅第一站：基本语法
初识Python Python是一门简单易学的解释型语言.对于什么是解释型语言,在C语言的第一章可以学习到.感谢大家的支持和鼓励.点个赞,评论和收藏.谢谢啦!我也是初学者,大家一起努力吧,写博客记录自 ...
Spring之旅第一站(不得不佩服老外...)
第1章 Spring之旅说明 1.本文抄写了<Spring 实战>重点内容,参考了GitHub上的代码 2.每个人的学习方式不一样,但目的是一样的,活学活用.最近一直在听<我们不一 ...
Sql Server之旅——第一站那些给我们带来福利的系统视图
本来想这个系列写点什么好呢,后来想想大家作为程序员,用的最多的莫过于数据库了,但是事实上很多像我这样工作在一线的码农,对sql 都一知半解,别谈优化和对数据库底层的认识了,我也是这样... 一:那些系 ...
DRP之旅第一站--DRP概览
进入了DRP的项目,相对于以前的知识而言DRP的概念比较陌生,是个新的概念,面对新的概念和知识我们应该如何去跟它打交道. 学习一个新知识应该从哪些角度进行思考: 这个知识概念是什么? 什么是DRP?: ...
卓音工作室2022讨论班第五期——JavaScript基础
一.js介绍 1.js背景 js全称是javascript,是web的脚本语言.它最初由Netscape(网景公司)的Brendan Each(布兰登·艾奇,javascript之父)发明,刚开始的命 ...
2015生命之旅---第一站重庆
老邓的流水账又来了.... 这篇文章来源于我的2015年7月-九月的一系列出行,跟程序无关,我只想把我的经历告诉大家,让大家与我共勉.为什么会有这次旅行,为什么是生命之旅,这还得从去年说起,去年九月, ...

HTML（卓音前端之旅第一站）