HTML标签-HTML详细学习笔记

HTML标签

快捷键

1. 标签名+Tab 自动生成完整标签，如：div+Tab=< div>< /div>
2. 内容+Ctrl+/=< !–内容–>即生成注释
3. ctrl+f 查找

HTML基础标签

标签关系

包含关系与并列关系

---

路径

1. 相对路径

相对路径分类	符号
同一级路径
下一级路径	/
上一级路径	…/

3. 绝对路径：通常从盘符开始（反斜杠"“）或者是完整地网络地址（正斜杠”/"）

---

标签

标签一般成对出现，如< html>< /html>,第一个是开始标签，第二个是结束标签，有’/';但也有单标签，如

< html>< /html>

< html>< /html> HTML标签 页面中最大的标签，即根标签

< head>< /head>

< head>< /head> 文档头部 注意在head标签中我们必须设置的标签是title

< title>< /title>

< title>< /title> 文档标题 让页面拥有一个属于自己的网页标题

< body>< /body>

< body>< /body> 文档主体 元素包含文档的所有内容，页面内容基本都是放body里面

---

< !DOCTYPE>

文档类型声明标签（不是HTML标签），告诉浏览器使用哪种HTML版本来显示网页

• < !DOCTYPE html>是采用HTML5的版本
• < !DOCTYPE>声明位于文档中最前面位置

lang

语言种类 用来定义当前文档使用的语言种类

• < html lang=“en”>为英语
• < html lang=“zh-CN”>为中文

charset

字符集 以便计算机识别存储各种文字

• < meta charset=“UTF-8”/> 放在head标签内，规定HTML文档使用"UTF-8"字符编码
• charset常用值：GB2312(简体中文),BIG5(繁体中文),GBK(包含简繁体中文),UTF-8(万国码）

---

标题标签 < h1>-< h6>

• 标签语义：作为标题使用，重要性逐级递减
• 使用方法：< h1> < /h1>
• 一个标题独占一行

---

段落标签 < p> < \p>

• 标签语义：可以把HTML文档分割为若干段落

---

换行标签

• 标签语义：强制换行
• < br />是单标签
• < br />只是简单换行，与段落不一样

---

文本格式化标签

• 标签语义：突出重要性
• 加粗 < strong> < /strong>或< b> < /b>
• 倾斜 < em> < /em>或< i> < /i>
• 删除线 < del> < /del>或< s> < /s>
• 下划线 < ins> < /ins>或< u> < /u>

---

< div>和< span>标签

• < div>和< span>没有语义，是盒子；div是division缩写，即分割，分区；span意味跨度、跨距
• < div>标签用来布局，但一行只能放一个div，大盒子
• < span>标签用来布局，一行上可以有多个< span>，小盒子

---

图像标签 < img/>

图像标签，< img>标签用于定义HTML页面中的图像

1. 单标签
2. 语法格式：< img src=“图像URL” />
3. 图像标签可以有多个属性，但必须放到标签名后面
4. 属性之间不分先后，但标签名与属性、属性与属性间以空格分开
5. 属性采用键值对的格式，即属性=“属性值”
6. 其他属性：

属性	作用	属性值
src	必须属性，用于指定图像文件的路径和图像名	图片路径
alt	图片加载不出来的时候显示的文本	文本
title	设置图像标签，鼠标放上去后的提示文本	文本
width	设置图像高度	像素
height	设置图像高度	像素
broder	设置图像边框粗细	像素

---

超链接标签< a>< /a>

语法格式

< a href=“跳转目标” target=“目标窗口的弹开方式”>文本或图像< /a>

属性	作用
href	指定链接目标的url地址（必须属性）
target	指定链接页面的打开方式，其中_self为默认值，_blank为新窗口中打开方式

• 阻止链接跳转，语法如下：

<a herf='javascript:void(0);'></a>

//或者
<a herf='javascript:;'></a>     //外单内双或者外双内单规则是使用于此的

链接分类

1. 外部链接，如：< a href=“http://www.baidu.com”>百度< /a>
2. 内部链接，网站内部页面间的相互链接，直接链接内部页面名称，如首页< /a>
3. 空链接，当时无确定链接目标时，如：< a href=“#”>首页< /a>
4. 下载链接，如果herf里面地址是一个文件或者压缩包，会下载这个文件
5. 网页元素链接，网页中的文本，视频，图像，表格，音频等都可以添加超链接， 如：< a href=“http://baidu.com”>< img src=“ima.jpg”/>< /a>
6. 锚点链接，点击时，快速定位到页面中的某个位置

• 在链接文本的herf属性中，设置属性值为#名字的形式，如< a herd=“#two”>第二集< /a>
• 找到目标位置标签，里面添加一个id属性=刚才的名字，如：< h2 id=“two”>第二集介绍< /h3>

---

注释标签 < !-- --> 可用快捷键Ctrl+/

注释标签里面的内容不执行不显示到页面中

---

特殊字符

特殊字符	描述	字符代码
	空格符	&nbsp；
<	小于号	&it；
>	大于号	&gt；
&	和号	&amp；
￥	人民币	&yen；
	版权	&copy；
	注册商标	&reg；
。	摄氏度	&deg；
	正负号	&plusmn；
	乘号	&times；
	除号	&divide；
	平方2（上标2）	&sup2；
	立方3（上标3）	&sup3；

---

表格标签

表格用来显示数据

基本语法

<table>
     <tr>
          <td>单元格内容</td>
          ...
     </tr>
     ...
</table>

1. < table>< /table> 用于定义表格的标签
2. < tr>< /tr>用于定义表格中的行，必须嵌套在< table>< /table>中
3. < td>< /td>用于定义表格中的单元格，必须嵌套在< table>< /table>中
4. < th>< /th>表头单元格，里面的文字加粗居中

表格属性

属性名	属性值	描述
align	left、center、right	规定表格相对周围单元的对齐方式
border	1或""	规定表格单元是否有边框，默认为’',即无表框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认像素1
cellspacing	像素值	规定单元格之间的空白，默认像素2
width	像素值或百分比	规定表格宽度
heigth	像素值或百分比	规定表格高度

表格结构标签

1. < thead>< /thead>用于定义表格头部< thead>内部必须拥有< tr>标签
2. < tbody>< /tbody>用于定义表格主体

合并单元格

1. 确定是跨行合并（rowspan）还是跨列合并（colspan）
2. 找到目标单元格（跨行为最上、跨列为最左），写上合并方式=合并的单元格数量， 如：< td colspan=“2”>< /td>
3. 删除多余单元格

---

列表标签

列表用来布局

无序列表< ul>< /ul>

1. 基本语法格式：

<ul>
   <li>列表项1</li>
   <li>列表项2</li>
   <li>列表项3</li>
   ...
</ul>

3. 中只能嵌套
7. 之间相当于一个容器，可以容纳所有元素

有序列表

1. 基本语法格式：

<ol>
   <li>列表项1</li>
   <li>列表项2</li>
   <li>列表项3</li>
   ...
</ol>

2. < ol>< /ol>中只能嵌套< li>< /li>
3. < li>< /li>之间相当于一个容器，可以容纳所有元素

自定义列表< dl>< /dl>

1. 基本语法格式：

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

2. < dl>< /dl>里面只能包含< dt>和< dd>
3. < dt>< dd>个数无限制

---

表单标签

表单用来收集信息
表单由表单域、表单控件和提示信息三部分组成

表单域< form>< /form>

1. < form>标签用于定义表单域，< form>会把它范围内的表单元素信息提交给服务器
2. 基本语法格式：

<form action="url地址" method="提交方式" name="表单域名称">
  各种表单元素控件
</form>

3. 常用属性：

属性	属性值	作用
action	url地址	用于指定接受并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式，其取值为post/get
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域

表单控件（表单元素）

输入表单元素

1. 基本语法格式：

<input type="属性值" name="名称" value="元素值" />

2. 为单标签

3. input的属性：

属性	属性值	描述
type	botton,checkbox,file,hidden,image,password,radio,reset,submit,text	用于指定不同的控件类型
name	由用户自定义	定义input元素名称
value	由用户自定义	规定input元素的值
checked	checked	规定此input元素首次加载时应当被选中
maxlength	正整数	规定输入字段中的字符的最大长度
id	用户自定义	可让表单元素与标签绑定

5. name和value是每个表单元素都有的属性值，主要给后台人员使用

6. name表单元素的名字，要求单选按钮和复选框都有相同的name值

7. checked属性主要针对单选和复选按钮

8. type属性设置不同的属性值用来指定不同的控件类型：

type的属性值	描述
button	定义可点击按钮（多数情况下，用于通过JavaScrip启动脚本）
checkbox	定义复选框
file	定义输入字段和"浏览"按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段，该字段中的字符被掩码
radio	定义单选按钮
reset	定义重置按钮，重置按钮会清除表单中的所有数据
submit	定义提交按钮，提交按钮会把表单数据输入到服务器
text	定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符

10. < label>标签

• < label>标签用于绑定一个表单元素，当点击< label>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，以增加用户体验
• 基本语法格式：

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

• 标签的for属性应与相关元素的id属性相同

下拉表单元素< select>< /select>

1. 基本语法格式：

<select>
  <option>选项1</option>
  <option selected="selected">选项2</option>
  <option>选项3</option>
  ...
</select>

2. < select>中至少包含一对< option>
3. 在< option>中定义selected="selected"时，当前项为默认选项

文本域元素< textarea>< /textarea>

1. 基本语法格式：

<textarea cols="50" rows="5">
  文本内容
</textarea>

2. cols=“每行中的字符数”，rows=“显示的行数”

HTML5提高

HTML5新增的语义标签

1. < header>: 头部标签
2. < nav>: 导航标签
3. < artical>: 内容标签
4. < section>: 定义文档某个区域
5. < aside>: 侧边栏标签
6. < footer>: 尾部标签

注意：

1. 这种语义化标签主要针对搜索引擎
2. 在IE9中，需要把这些元素转换为块级元素
3. 移动端可以随意使用这些新标签不用担心兼容问题

新增多媒体标签

视频：

1. 当前标签元素支持三种视频格式：Mp4,Ogg,Webm,尽量使用mp4格式（大多数浏览器支持）
2. 语法：

<video src="文件地址" controls="controls"></video>

• 如果还要考虑到兼容性的问题，可使用以下代码：

<video controls="controls" width="300">
    <source src="move.ogg" type="video/ogg" >
    <source src="move.mp4" type="video/mp4" >
    您的浏览器暂不支持<video>标签播放视频
</video>

3. 常用属性

属性	值	描述
autoplay	autoplay	视频就绪自动播放（谷歌需要添加muted来解决自动播放的问题）
controls	controls	向用户显示播放控件
width	px	设置播放器宽度
height	px	设置播放器高度
loop	loop	播放完是否继续播放该视频，循环播放
preload	auto(预先加载视频)
none(不预加载视频)	规定是否预加载视频（如果有了autoplay 就忽略该属性）
src	url	视频url地址
poster	imgurl	加载等待的画面图片
muted	muted	静音播放

音频：

1. 当前< audio>支持三种音频格式：Mp3,Wav,Ogg,尽可能使用Mp3
2. 语法：

<audio src="文件地址" controls="controls"></audio>

<audio controls="controls">
   <source src="happy.mp3" type="audio/mpeg">
   <source src="happy.ogg" type="audio/ogg">
   您的浏览器暂不支持<audio>标签
</audio>

3. 常见属性：

属性	值	描述
autoplay	autoplay	音频在就绪后马上播放
controls	controls	向用户显示控件，比如播放按钮
loop	loop	每当音频结束时重新开始播放
src	url	要播放的音频URL

• 谷歌把视频和音频的自动播放禁止了

5. 注意：我们可以给视频标签添加muted属性来静音播放视频，音频不可以（JavaScrip可以解决）

新增input类型

属性值	说明
type=“email”	限制用户输入必须为Email类型
type=“url”	限制用户输入必须为URL类型
type=“date”	限制用户输入必须为日期类型
type=“time”	限制用户输入必须为时间类型
type=“maonth”	限制用户输入必须为月类型
type=“week”	限制用户输入必须为周类型
type=“number”	限制用户输入必须为数字类型
type=“tel”	手机号码
type=“search”	搜索框
type=“color”	生成一个颜色选择表单

新增表单属性

属性	值	说明
required	required	表示其内容不能为空，必填
placeholder	提示文本	表单的提示信息，存在默认值将不显示
autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete	off/on	当用户在字段开始键入时，浏览器基于之前键入过得值，应该显示出在字段中填写的选项
默认已打开，如autocomplete=“on”，关闭autocomplete="off"需要放在表单内，同时加上name属性，同时成功提交
multiple	multiple	可以多选文件提交

• 可以通过以下设置方式修改placeholder里面的字体颜色：

input::placeholder {
  color:pink;
}