html常用标签

title标签

<title>网页的标题</title>

title也是有助于SEO搜索引擎优化的
HTML不是依靠缩进来表示嵌套的，就是看标签的包裹关系。
HTML中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示。

h系列

<h1> 到 <h6> 都是标签：
<h1></h1> 一级标题
<h2></h2> 二级标题
……
<h6></h6> 六级标题

h是容器级标签，理论上可以放置p，ul只是法律上允许

p标签

段落，是英语paragraph“段落”缩写。
HTML标签是分等级的，HTML将所有的标签分为两种：容器级、文本级。
顾名思义，容器级的标签，里面可以放置任何东西；文本级的标签里面，只能放置文字、图片、表单元素。

p标签是一个文本级标签。从学习p的第一天开始，就要死死记住：p里面只能放文字、图片、表单元素。其他的一律不能放。

试着把h放到p到里：
1   <p>
2       我是一个小段落
3       <h1>我是一个主标题</h1>
4   </p>
浏览器不允许你这么做，我们使用Chrome的F12审查，你会发现，浏览器自己把p封闭掉了，不让你去包裹h1。

再次强调，p是一个文本级的标签，p里面只能放文字、图片、表单元素。

图片

页面上可以插入图片，能够插入的图片类型是：jpg(jpeg)、gif、png、bmp。类型和类型之间有什么区别，css课上讲。
不能往网页中插入的图片格式是：psd、ai

HTML页面不是直接插入图片，而是插入图片的引用地址，所以也要把图片上传到服务器上。
插入方法：
1![](baby.jpg)
img是英语image“图片”的简写
src 是英语source“资源”的简写，千万不要写成scr。
src是img标签的属性，baby.jpg是这个属性的值。

这个标签和我们之前学的，都不一样，因为这个标签不是“对儿”。自封闭标签，也称为单标签。
为什么？原因很简单，如果是对儿，里面就要有内容，表示给这个内容增加语义。比如
1<h1>哈哈哈哈，我是主标题啦！！！</h1>
图片就是一个图片，不需要给什么文字增加语义，所以就是自己一个人活得挺好：
1<img />

我们上午学习的meta也是自封闭标签：
1<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

alt属性

alt属性：
1![](baby.jpg)
alt是英语alternate“替代”的意思，就表示不管因为什么原因，当这个图片无法被显示的时候，出现的替代文字（有的浏览器不支持）

相对路径

HTML中插入图片，所以现在有两个文件，一个html文件，一个是jpg文件。
我们关心的就是这两个文件的相对位置。即使这个网站项目，被用u盘拷给了别人，只要相对路径不变。图片一定能够正常显示。
相对路径不会出现这种情况：
1aaa/../bbb/1.jpg
../要么不写，要么就写在开头。

超级链接

一个网站，是由很多html网页组成的，html网页之间能够通过超级链接互相跳转，从而形成了“网”。
语法：
1<a href="1.html">结婚照</a>

a是英语anchor“锚”的意思，就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。
href是英语hypertext reference超文本地址的缩写
a标签的另外两个属性

title 悬停文本
target 是否在新窗口中打开
target实际上是“目标”的意思。
<a href="09_img.html" title="很好看哦" target="_blank">结婚照</a>
blank就是“空白”的意思，就表示新建一个空白窗口。为毛有一个_ ，就是规定，没啥好解释的。
也就是说，如果不写target=”_blank”那么就是在相同的标签页打开，如果写了，就是在新的空白标签页中打开。
完整的超级链接：
<a href="1.html" title="悬停文本" target="_blank">链接的内容</a>
关于超级链接的herf里面也是相对路径

页面内的锚点：

锚点用name属性来设置，一个a标签如果name属性（或者id属性），那么就是页面的一个锚点。
1<a name="wdzp">我的作品</a>
2或者：
3<a id="wdzp">我的作品</a>`

如果有一个超级链接，指向页面中的锚点，那么就是：
1<a href="#wdzp">点击我就查看我的作品</a>

a是一个文本级的标签

比如一个段落中的所有文字都能够被点击，那么应该：
p包裹a：
1<p>
2   <a href="">段落段落段落段落段落段落</a>
3</p>
而不是a包裹p：
1<a href="">
2   <p>
3       段落段落段落段落段落段落
4   </p>
5</a>

列表标签

无序标签

无序列表，用来表示一个列表的语义，并且每个项目和每个项目之间，是不分先后的。
ul就是英语unordered list，“无序列表”的意思。
li 就是英语list item ， “列表项”的意思。
你会发现，这是我们学习的第一个“组标签”，就是要么不写，要么就要写一组。
1   <ul>
2       <li>北京</li>
3       <li>上海</li>
4       <li>广州</li>
5       <li>铁岭</li>
6   </ul>
也就是说，所以的li不能单独存在，必须包裹在ul里面；反过来说，ul的“儿子”不能是别的东西，只能有li。

浏览器会默认的给无序列表小圆点的“先导符号”
但是，我们这里再次强调，ul的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的。

有序标签

ordered list  有序列表，用ol表示
1   <ol>
2       <li>小苹果</li>
3       <li>月亮之上</li>
4       <li>最炫民族风</li>
5   </ol>
也就是说，ol和ul就是语义不一样，怎么使用都是一样的。
ol里面只能有li，li必须被ol包裹。li是容器级。
ol这个东西用的不多，如果想表达顺序，大家一般也用ul：

定义列表

定义列表也是一个组标签，不过比较复杂，出现了三个标签：
dl表示definition list 定义列表
dt表示definition title    定义标题
dd表示definition description 定义表述词儿
dt、dd只能在dl里面；dl里面只能有dt、dd
1   <dl>
2       <dt>北京</dt>
3       <dd>国家首都，政治文化中心</dd>
4       <dt>上海</dt>
5       <dd>魔都，有外滩、东方明珠塔、黄浦江</dd>
6       <dt>广州</dt>
7       <dd>中国南大门，有珠江、小蛮腰</dd>
8   </dl>

定义列表用法非常灵活，可以一个dt配很多dd：
定义列表用法非常灵活，可以一个dt配很多dd：
dt、dd都是容器级标签，想放什么都可以。所以，现在就应该更加清晰的知道：
用什么标签，不是根据样子来决定，而是语义。

div和span

div和span是非常重要的标签，div的语义是division“分割”； span的语义就是span“范围、跨度”。
CSS课程中你将知道，这两个东西，都是最最重要的“盒子”。

1<div>
2       <h3>中国主要城市</h3>
3       <ul>
4           <li>北京</li>
5           <li>上海</li>
6           <li>广州</li>
7       </ul>
8   </div>
9
10  <div>
11      <h3>美国主要城市</h3>
12      <ul>
13          <li>纽约</li>
14          <li>洛杉矶</li>
15          <li>华盛顿</li>
16          <li>西雅图</li>
17      </ul>
    </div>

div在浏览器中，默认是不会增加任何的效果改变的，但是语义变了，div中的所有元素是一个小区域。
div标签是一个容器级标签，里面什么都能放，甚至可以放div自己

span也是表达“小区域、小跨度”的标签，但是是一个“文本级”的标签。
就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。
span里面是放置小元素的，div里面放置大东西的：

1   <p>
2               简介简介简介简介简介简介简介简介
3               <span>
4                   <a href="">详细信息</a>
5                   <a href="">购买</a>
6               </span>
            </p>

div标签是最最重要的布局标签，至于class是什么意思，下午说：

1<div class="header">
2       <div class="logo"></div>
3       <div class="nav"></div>
4   </div>
5   <div class="content">
6       <div class="guanggao"></div>
7       <div class="dongxi"></div>
8   </div>
    <div class="footer"></div>

所以，我们亲切的称呼这种模式叫做“div+css”。div标签负责布局，负责结构，负责分块。css负责样式。

表单

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

1<div>
2       <h3>欢迎注册本网站</h3>
3       <form>
4           所有的表单内容，都要写在form标签里面
5       </form>
    </div>

form是英语表单的意思。form标签里面有action属性和method属性
method属性表示用什么HTTP方法提交，有get、post两种

文本框

<input type="text" />
input表示“输入”，指的是这是一个“输入小部件”，
type表示“类型”，
text表示“文本”，指的是类型是一个文本框的输入小部件。

value表示“值”，value属性就是默认有的值，文本框中已经被填写好了：

<input type="text" value="默认有的值" />

密码框

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

单选按钮

Paste_Image.png

只能选一个，术语叫做“互斥”。
1<input type="radio" name="xingbie" /> 男
2<input type="radio" name="xingbie" /> 女
radio是“收音机”的意思，input的type的值，如果是radio就是单选按钮。
非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做radio。

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

复选框

也是input标签，type是checkbox。 
1<p>
2   请选择你的爱好：
3   <input type="checkbox" name="aihao"/> 睡觉
4   <input type="checkbox" name="aihao"/> 吃饭
5   <input type="checkbox" name="aihao"/> 足球
6   <input type="checkbox" name="aihao"/> 篮球
7   <input type="checkbox" name="aihao"/> 乒乓球
8   <input type="checkbox" name="aihao"/> 打豆豆
9</p>
复选框，最好也是有相同的name（虽然他不需要互斥，但是也要有相同的name）

下拉列表

select就是“选择”，option“选项”。
select标签和ul、ol、dl一样，都是组标签。
1<select>
2   <option>北京</option>
3   <option>河北</option>
4   <option>河南</option>
5   <option>山东</option>
6   <option>山西</option>
7   <option>湖北</option>
8   <option>安徽</option>
9</select>

多行文本框（文本域）

text就是“文本”，area就是“区域”。
1<textarea cols="30" rows="10"></textarea>
这个标签，是个标签对儿。对儿里面不用写东西。如果写的话，就是这个框的默认文字。

cols属性表示columns“列”，rows属性表示rows“行”。
值就是一个数，表示多少行，多少列。

三种按钮

按钮也是input标签，一共有三种按钮：
普通按钮：
1<input type="button" value="我是一个普通按钮" />
button就是英语“按钮”的意思。value就是“值”的意思，按钮上面显示的文字。
提交按钮：
2<input type="submit" />
submit就是英语“提交”的意思。这个按钮不需要写value自动就有“提交”文字。
这个按钮点击，表单真的能提交。这个表单就会被提交到，form标签的action属性中的那个页面中去。
前端开发工程师，只需要关心页面的美、样式、板式、交互。至于数据的保存、读取，都是后台工程师做的事情。
3重置按钮：
1<input type="reset" />
reset就是“复位”的意思。

label标签

本质上讲，“男”、“女”这两个汉字，和input元素没有关系。
1<input type="radio" name="sex" /> 男
2<input type="radio" name="sex" /> 女

label就是解决这个问题的。
1<input type="radio" name="sex" id="nan" /> <label for="nan">男</label>
2<input type="radio" name="sex" id="nv"  /> <label for="nv">女</label>

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

复选框也有label：
1<input type="checkbox" id="kk" />
2<label for="kk">10天内免登陆</label>  
什么表单元素都有label。

HTML杂项

HTML注释

任何的程序、代码都有注释，注释就是给程序员看的，不影响程序的。

适当的注释，能够让我们的程序更加可读，所以用中文提示自己，这里的程序是干什么的。
1   <!--这里是头部，还没有做完，准备加两天班弄完-->
2   <div>头部</div>
3   <!--这里是陈伟弄的，跟我没关系-->
4   <div>主要内容</div>
5   <!--这里是高俊负责的-->
6   <div>页尾</div>
HTML注释的语法
1<!--注释的内容-->
Sublime中按ctrl+/ 就是注释

字符实体

我们想在页面上输出“<h1>”这些字符，但是HTML认为这是一个标签，还没封闭。
1好高兴啊，今天我们学习了<h1>标签，老师说这个标签是主标题的语义。
所以，
1<
就是<的字符实体，什么意思呢？就是用常用字符表示这些符号的方式。
lt 就是英语less than 小于的意思；

1>
就是>的字符实体。
gt就是greater than 大于的意思。

1©
就是©  版权符号。

1 
nbsp就是英语non-breaking spacing不打断空格的意思，就是空格。

所以：
1哈    哈
空出了4个字的格，可以防止空白折叠现象。

欢迎关注公共号