HTML常用标签

h1~h6

表示一级到六级标签

<h1>一级标题</h1>

<h6>六级标题</h6>

p

表示段落。默认情况，在网页上，页面的内容不会按照我们写的代码进行换行，回车会被渲染成一个空格

<p>这是一段文字</p>

 a

表示超链接。未被访问的超链接默认为 蓝色；已经被访问的超链接默认为 紫色

href

必填属性。超链接跳转路径的设置，可以是网址 url()，也可以是相对路径

target

_blank 页面打开时在新的窗口中打开，如果不设置，则在当前窗口打开

title

当鼠标放在超链接上时，显示一段提示文字

img

image的缩写，img是一个单标签，功能是在网页上展示一张图片

src

表示图片的源，在src可以设置图片地址。可以是绝对路径，也可以是相对路径

绝对路径：可以使用电脑中的文件的路径 C:\
                  也可以使用网络路径http://

相对路径：表示基于当前文件去找到对应的资源文件的路径。一般情况下，我们在做静态页面时，页面中的背景图，图标等不常更改的资源。一般存放在项目中，做 路径引入。./ 代表当前目录； ../ 代表上一级目录

alt

当图片加载失败时显示对应的alt中的文本内容

title 

当鼠标放在图片上时，显示一段提示文字 

        width 宽  height 高

                数字

                百分比（占父元素百分比的效果）

宽高只要设置一边，就会等比缩放，如果都设置，除非都是等比例缩放，否者会变形

 列表

有序列表

在列表项前默认有数字序号

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

 无序列表

在列表项前默认有项目符号

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

定义列表

分标题和列表项

<dl>
    <dt>标题</dt>
    <dd>列表项</dd>
    <dd>列表项</dd>
</dl>

无序列表在网页中应用的最多；一般使用列表时会清除对应的点；<ul>和<ol>中尽量只放<li>,其它的可以嵌套在<li>中

文字的样式属性 （强调属性）

em i

让文字倾斜，em 表示强调文字，i 表示文字斜体。在项目中，很多人把 i 作为图标展示的标签。

一般网页，会直接把 i 标签的倾斜样式给去除，变成正常字体

b strong

让文字加粗，stong表示强调，b表示文字加粗。

一般会把 b 和 strong 通过css设置为普通样式

br

可以在网页中实现换行，就像是一个回车。
如果我们在项目开发中，主动频繁使用 br，说明写的有问题

hr

分割线，在网页上实现一条横线，也很少使用

经常性的使用，说明我们写的有问题

表格

<table>
    <thead>
        <tr>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>
    <tfoot>

    </tfoot>
</table>

在写表格时，thead,tbody,tfoot可以省略不写。

如果我们想要生成 n 行 m 列的表格：table>tr*n>td*m

跨行

如果我们想让某一个单元格，跨多行，给这个td添加 rowspan 可以实现跨行操作

跨列

如果我们想让某一个单元格，跨多列，给这个td添加 colspan 可以实现跨列操作

跨行跨列后单元格会被挤出来，删掉多出来的对应行的单元格即可

form

表单标签未来不太常用，因为form已经逐渐被ajax替代了。但是我们前期写页面时，还是要使用

我们应该把所有的表单内元素包裹在一个form中（非必须）

input

input有很多种形态，需要通过type属性进行控制

<form> <input type="text"> </form>

• type

   text  文本输入框，最常用，让用户在文本框中输入我们想要获取的内容（默认宽度为20个字符）

   password   密码，让文本以密文显示

   radio   单选，多个选项只选其一时使用

   checkbox   多选，当有多个选项需要选择时

   submit   提交按钮，自动显示提交两个字，可以通过value修改

   reset   重置按钮，自定显示重置两个字，可以通过value修改

   button   普通按钮，没有功能，需要通过value配置显示文本

   file   文件上传，可以进行本地文件的上传功能

• value 

 一般情况下，value用来获取对应用户输入的值。

• name 

如果我们要使用表单提交，则所有的表单内元素都需要加name属性

当name用在单选和多选，可以 多个单选 或者 多个多选 用同一个name属性，这样表示它们是一个组合

• placeholder 

 占位提示，在我们没有输入内容时，显示一段文本

button

普通按钮，如果把button放在表单里，则button自动会有提交功能

select > option 

下拉选择框，需要用select包裹多个option

<select> 
    <option>选项1</option>
    <option>选项2</option>
</select>

 textarea

文本域，用于输入多行文本时使用

label

label需要配合表单中元素使用

可以对表单项进行描述：当我们点击label时，可以让对应绑定的表单内元素获取焦点

如果我们想要实现，点击label能让对应的表单元素获取焦点，则需要配置 id 和 for

1、给 input 添加 id 属性

2、给 label 添加 for 属性（属性名和刚才的id一致）

select 配合 label 只能实现获取焦点的效果，不能打开下拉框

表单内元素的状态 

blur   失去焦点

focus  获取焦点

checked   给radio和checkbox添加，用于设置对应选项的选中状态，添加则表示选中

selected   给option添加，用于设置默认被选中的选项

readonly   只读，添加到输入框，无法修改内容，只能查看

disabled   添加到元素上，则对应元素禁用，样式变灰

• form 中 type 可定义的元素 （了解即可）

color 定义拾色器。

date 定义 date 控件（包括年、月、日，不包括时间）。

datetime 定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区)。

datetime-local 定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒，不带时区)。

email 定义用于 e-mail 地址的字段。

file 定义文件选择字段和 "浏览..." 按钮，供文件上传。

hidden 定义隐藏输入字段。

image 定义图像作为提交按钮。

month 定义 month 和 year 控件（不带时区）。

number 定义用于输入数字的字段。

range 定义用于精确值不重要的输入数字的控件（比如 slider 控件）。

search 定义用于输入搜索字符串的文本字段。

tel 定义用于输入电话号码的字段。

time 定义用于输入时间的控件（不带时区）。

url 定义用于输入 URL 的字段。

week 定义 week 和 year 控件（不带时区）。

div span

div 是一个没有语义的块元素

      宽度占百分百，哪怕后面还有空余空间，后面的元素也会另起一行。多个div在一起，纵向排列

      块元素可以设置宽高（哪怕设置了宽高，占的位置也是百分百）

span 是一个没有语义的行内元素

      宽度被内容撑开，内容多宽span就多宽。多个span在一起，横向排列

      行内元素不能设置宽高

div 和 span本身没有任何的基础样式

块元素 block ：div h1-h6 p ul li ol dl dt dd table button form...

行内元素 inline：span em i strong br b...

行内块元素 inline-block：img input...

元素之间的状态可以任意转换