前端复习笔记2-html(2)

常用标签的使用

容器级别的标签可以嵌套容器级别的，可以嵌套文本级别的，可以是文本内容。
也就是说，容器级别的标签内部什么都可以放，但是不能违背语义原则。
文本级别的标签可以嵌套文本级别的，可以是文本内容，但是不能嵌套容器级别的。也就是说文本级别的标签除了容器级别的标签之外的什么都可以放。但是不能违背语义原则。

1、h标签

h是heading的缩写，就是标题的意思。它是一个标签家族，可以从h1~h6，它的作用：可以给网页添加标题语义。h标签是一个容器级别的双标签。

2、p标签

p是paragraph的缩写，是段落的意思，它是用来对网页文本添加段落语义的。p标签是一个文本级别的双标签。

3、img标签

img是image的缩写，就是图像的意思，img是一个文本级别的单标签。

img标签天生两个属性：

• src属性用来填写图片的地址，可以是相对或绝对路径，和href用法一样。
• alt属性用来填写一段文本，替换当图片因为某些原因加载不成功时的状态。

4、a标签

a是anchor的缩写，是锚的意思。a标签是超级链接，它是用来给文本添加超级链接语义，a标签是一个文本级别的双标签。

a标签有三个属性：

• href属性，用来填写超级链接的目标地址，可以是相对路径或者绝对路径。
• target属性，用来决定链接的目标网页是覆盖自己打开还是新建窗口打开。target记住两个值：_blank和_self。

  _blank代表新建窗口，_self代表覆盖自己。默认a标签是覆盖自己打开的。所以a标签基本都是需要把target属性改为_blank。

• title属性，这个属性是用来和客户进行交流。当鼠标悬停在超级链接上的时候，会弹出这个属性的属性值。一般用来告诉客户，这个超级链接的目标是什么。

a标签的常用方法：

• 以一句话作为点击内容
• 以一个段落作为点击内容
• 以一张图片作为点击内容，图片以后当成文字文本对待
• a标签可以制作站内锚点

---

在网页当中有空白折叠现象，网页不认识空格和换行。如果想要空格，那么需要运用实体字符 ，一个这样的实体字符代表一个空格。如果想要换行，需要运用强制换行标签<br/>。标签表示在网页上加一个分割线。

了解性标签：

• q标签，表示引用一句话，对这句话添加引用语义，附带效果加双引号。
• blockquote标签，表示整段引用，对整段话添加引用语义，附带效果居中。
• strong标签，表示着重强调，附带效果加粗。
• em标签，表示轻微强调一个词或者一句话，附带效果文本倾斜。
• i b u 这三个标签分别是给文本添加倾斜、加粗、下划线语义。但是这几个标签违背了w3c的初衷，所以准备废弃。以后不用。

---

5、三种列表

ol：ordered list的缩写。有序列表。

ol需要和li标签配合使用，它是我们见到的第一种组标签，ol 中除了li标签之外什么都不可以放。li标签里面什么都可以放。
ol，li都是容器级别的双标签。

ul：unordered list的缩写。无序列表。

ul需要和li标签配合使用，它是我们见到的第一种组标签，ul 中除了li标签之外什么都不可以放。li标签里面什么都可以放。
ul，li都是容器级别的双标签。

dl：definition list的缩写。自定义列表。

dl 一般需要和dt dd标签配合时使用，至少要有一个dt，它也是一个组标签，在dl当中只能出现dt或者dd。
dt是definition title的缩写，是自定义主题的意思。
dd是definition description的缩写，是自定义描述的意思。每一个dt可以有多个dd进行描述。
dl，dt，dd都是容器级别的双标签。

• dl用法：以前dl当中会定义多个主题，但是因为布局不方便，所以很少用。现在都会使用上述方式。也就是说一个dl标签里面只定义一个主题。

6、表单类元素（标签）

5种输入框3种按钮
input 标签，它的功能非常多，它根据type属性值的不同所展现出来的表现形式不一样。
文本级别的单标签。

①文本输入框

<input type="text" placeholder="输入账号" value="123"/>
文本输入框，type值为text。
placeholder属性，是用来填写输入框当中的提示信息。
value这个属性很重要，当我们在输入框中填写内容的时候，其实是把这些内容当做一个值传给了value，以后我们可以用js从这个输入框的value属性当中拿到所填写的值，也就是说，value的值就是输入框中填写的东西，因此，在输入框中，显式的更改value属性值，就是在给输入框当中填写指定的内容。

②密码输入框

<input type="password" placeholder="输入密码"/>
文本输入框，type值为password。
placeholder属性，是用来填写输入框当中的提示信息。
密码输入框中也是有value属性的，当你输入密码的时候，密码也会自动的传给value，从输入框的value当中就可以拿到你填写的密码。但是密码框一般不会显式的去更改自己的密码。

③单选输入框

单选输入框，type值radio。
单选输入框一般是成组出现的，所以，单选输入框要让浏览器认出谁和谁是一组。如何让多个单选输入框成为一组由name属性决定，这多个单选输入框拥有相同的name属性值就代表他们是一组。他们之间同一时刻只能选择一个。
单选框的checked属性可以让页面默认选择。
单选输入框和文本绑定：如果想点击文字选中单选框，那么你就要绑定：绑定有以下两种方式：

<!--1-->
<label for="rd1">男：</label>
<input type="radio" name="sex" id="rd1"/>
<!--2-->
<label>女：<input type="radio" name="sex" id=""/></label>

• 第一种方式，需要用到label中的for属性，for属性需要填写绑定的表单类元素的id值。因此表单类元素也要添加一个id属性。这种方式比较麻烦

• 第二种方式比较简单，只要把文本和表单类元素全部放在label标签内部就可以实现绑定。因此它用的比较多。

从上我们可以看到label标签是一个文本级别的双标签，它无语义。一般用来防止文字文裸奔，因此通常情况会把文字放在label当中，这样就可以单独用label对这个文字进行css修饰。
label标签通常还会用来绑定文本信息和表单类元素。

④多选输入框（复选框）

多选输入框，type值为checkbox。
在这个输入框当中，我们也要多记一个属性，checked。他会经常用到默认选择的功能。

⑤日期输入框

日期输入框，type值为date
注：日期输入框在IE浏览器中不兼容，在主流浏览器中没问题。

⑥普通按钮

普通按钮，type值为button。
假如想让按钮上出现你想的文字，value属性可以给按钮添加文字。

⑦提交按钮

提交按钮，type值为submit。
假如想让按钮上出现你想的文字，value属性可以给按钮添加文字。默认的文字是提交。

⑧普通按钮

重置按钮，type值为reset。
假如想让按钮上出现你想的文字，value属性可以给按钮添加文字。默认的文字是重置。

7、下拉菜单

<select>
	<option value="">天安门</option>
	<option value="">卢沟桥</option>
	<option value="">后海</option>
</select>

select是英文选择的意思，它是添加下拉菜单的语义，它也是组标签，一般也会和option配合使用，option是下拉选项的意思。
下拉菜单和无序列表用法很类似。
select是文本级别的双标签。

8、文本域

textarea是文本域的意思。它可以提供一片输入文本的区域。默认这个区域右下角可以改变它的大小。但一般不常用。学了css会经常把它去掉。
textarea也是文本级别的双标签。

9、表格

table是表格的意思，在制作表格时，先把表格手画出来，然后一行一行去写代码。
border属性决定这个表格有没有边框，border如果没写出来默认无边框。
cellspacing属性，可以改变单元格和单元格之间的距离。
cellpadding属性，可以改变单元格内部内容和单元格边框之间的距离。
table标签是一个容器级别的双标签。

<table border="1" cellspacing="10px" cellpadding="10px">
	<tr>
		<th>一班</th>
		<th>二班</th>
		<th>三班</th>
	</tr>
	<tr>
		<td>张三</td>
		<td>老王</td>
		<td>狗蛋</td>
	</tr>
	<tr>
		<td>李四</td>
		<td>老赵</td>
		<td>狗剩</td>
	</tr>
</table>

10、div 和 span

div是division的缩写，意思是切割分割的意思。我们通常把它称作盒子。
它是容器级别的双标签。
span也有分割切割的意思。
它是文本级别的双标签。

标签的分类

容器级别：h1`h6 ol ul dl li dt dd table div
文本级别：p img a input select textarea label span
除了p以外其他的文本级别的标签都可以当做一个文本去处理。