web-标签总结

• 用什么标签，不是根据样子来决定，而是语义
• HTML不是依靠缩进来表示嵌套的，就是看标签的包裹关系。但是，我们发现有良好的缩进，代码更易读。
• HTML中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示。

charset 字符集

<meta charset="UTF-8">

设置使用的是哪个字符集，UTF-8，字符比较的齐全，每一个汉字3个字节，文件尺寸较大。gb2312:字符少，一个汉字2个字节，文件尺寸较小。

字符实体

• < less than 对应着 <
• > greater than 对应着 >
• © 版权符号©
•   空格

p 段落标签

• HTML标签是分等级的，HTML将所有的标签分为两种：容器级、文本级。
• 容器级的标签，里面可以放置任何东西；
• 文本级的标签里面，只能放置文字、图片、表单元素。
• p标签是一个文本级标签。记住：p里面只能放文字、图片、表单元素。其他的一律不能放。

img 图片

<img src="" alt="" />

属性src：图片的路径（相对路径/绝对路径）。alt：替代文本，当图片显示失败的时候显示的文字。

a 超链接

<a href="网址" title="悬停文本" target="_blank">链接文字</a>

• 如果不写target=”_blank”那么就是在相同的标签页打开，如果写了，就是在新的空白标签页中打开。
  页面内的锚点：<a name="锚点name"></a>，如果先跳转到这个锚点：<a href="#锚点name"></a>

ul 无序列表

语义：列表，清单等，列表中的每个项目都是都是并列的，同级别的，不分先后的。

<ul>
    <li></li>
</ul>

1. 组标签，ul和li是同时出现的。
2. li是不能单独出现的，同样ul的儿子标签也只能是li，不能是别的元素。
3. 但是li是一个容器级别的标签里面可以放置任何标签
4. 常用在页面顶部的导航条

ol 有序列表

<ol>
    <li></li>
</ol>

和ul相比，除了语义是有序之外，用法一样。
但是ol使用比较少，一般实际开发的时候，即使是有序的列表也会用ul去实现。

dl 自定义列表

<dl>
    <dt></dt>
    <dd></dd>
</dl>

dl表示definition list 定义列表
dt表示definition title 定义标题
dd表示definition description 定义表述词儿
dt、dd只能在dl里面；dl里面只能有dt、dd

div span

• div的语义是division“分割”。
• div在浏览器中，默认是不会增加任何的效果改变的，但是语义变了，div中的所有元素是一个小区域。

• div标签是一个容器级标签，里面什么都能放，甚至可以放div自己

• div里面放置大东西的, span里面是放置小元素的

• span的语义就是span“范围、跨度”。

• span也是表达“小区域、小跨度”的标签，但是是一个“文本级”的标签。
• span里面只能放置文字、图片、表单元素。 在标签的可以将图片和表单直接看成文字。
• span里面不能放p、h、ul、dl、ol、div。

表单

• 表单就是收集用户信息的，就是让用户填写的、选择的。

<form action="" method="post">
</form>

• action属性就是表示，表单将提交到哪里。
• method属性表示用什么HTTP方法提交，有get、post两种。

文本框

<input type="text" name="" id="" value="" />

• input表示“输入”，指的是这是一个“输入小部件”，
• type表示“类型”，
• text表示“文本”，指的是类型是一个文本框的输入小部件。
• value属性就是默认有的值，文本框中已经被填写好了

密码框

<input type="password" name="" id="" value="" />

• 也就是说，input标签很神奇，又是文本框，又是密码框。
• 到底是啥？看type属性的值是什么，来决定。
• 如果type=”text” 文本框
• 如果type=”password” 密码框

单选按钮

<input type="radio" name="sex" id="" value="" />男
<input type="radio" name="sex" id="" value="" />女

• 单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”
• 默认被选择，就应该书写checked=”checked”<input type="radio" name="sex" id="" value="" checked="checked"/>男

复选框

<input type="checkbox" name="fav" id="" value="" />篮球
<input type="checkbox" name="fav" id="" value="" />乒乓桥
<input type="checkbox" name="fav" id="" value="" />台球

• 复选框，最好也是有相同的name（虽然他不需要互斥，但是也要有相同的name）

下拉列表

<select name="">
    <option value="">北京</option>
    <option value="">上海</option>
    <option value="">广州</option>
    <option value="">重庆</option>
</select>

• select标签和ul、ol、dl一样，都是组标签。

文本域

<textarea name="" rows="" cols=""></textarea>

• 这个标签，是个标签对儿。对儿里面不用写东西。如果写的话，就是这个框的默认文字。
• cols属性表示columns“列”，rows属性表示rows“行”。
  值就是一个数，表示多少行，多少列。

按钮

普通按钮

<input type="button" name="" id="" value="" />

提交按钮

<input type="submit" value=""/>

• 这个按钮点击，表单真的能提交。这个表单就会被提交到，form标签的action属性中的那个页面中去。

重置按钮

<input type="reset" name="" id="" value="" />

label标签

<input type="radio" name="sex" /> 男
<input type="radio" name="sex" /> 女

本质上讲，“男”、“女”这两个汉字，和input元素没有关系。

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

input元素要有一个id，然后label标签就有一个for属性，和id相同，就表示绑定了，这个label和input就有绑定关系了。