HTML的经常使用标签整理

·html标签的基本形式

<开始标签[...属性]>标签内容<结束标签>

<标签名>[标签内容]</标签名>

·head部分的标签

meta

做用：元素可提供有关页面的元信息

title

做用：规定关于元素的额外信息，会显示再页面标题上

style

做用：对其余标签进行样式规定

link

做用：连接一些外部资源

·body部分的标签

标题标签
复制代码

标签形式：<h级数>标题内容</h级数>（一共有6级）

做用：设置标题

级数越大，标题越大，而且浏览器会自动给符加标题样式，但通常本身会经过其余属性修改来设置

div标签
复制代码

标签形式：< div > 文段内容< div>

做用：用于布局

万能标签，通常的内容均可以放入div标签内，属于无语义标签

段落标签
复制代码

标签形式：< p>段落内容</ p>

做用：通常用来存储文本

Tips: &nbsp是用来输出空格的

font标签
复制代码

标签形式:< font>字体集</ font>

Tips:经过修改font的属性只能控制字体集的大小和颜色

img标签
复制代码

标签形式：< img width="图片宽度" height="图片高度" src="图片连接"/>

做用：用来输出图片

Tips:

1. 图片的支持格式：PNG/JPEG/GIF/PDF（pdf必须是单页的）
2. 非标签方式：也经过在backgroud的属性设置来显示图片
3. 路径：绝对路径和相对路径

1> 绝对路径

指明了位置的路径

Windows系统绝对路径从盘符开始，例：C：\html\logo.jpg

2> 相对路径

在相对的文件夹下自动寻找

./图片所在文件夹./所用的图片

连接标签
复制代码

< a>< /a>

做用：文档内部锚点、跳转到外部文档、下载资源

属性：href、target

href后加要跳转的网址，target后加要跳转的方式

例：

打开新的网页：

<a href="https:/ /www. bilibili.com/"target="_blank">文本内容< /a>在新网页打开

<a href="https:/ /www .bilibili.com/"target="_self">文本内容< /a>在当前网页打开连接

文档内部锚点：

< a href="#要跳转到的标签的id">文本内容< /a>

禁止跳转的：

< a href="javascript:;">禁止跳转< /a>

< a href="javascript:void(0);">禁止跳转< /a>

列表标签
复制代码

分类：

无序标签：< ul>< li></ li>< ul>

有序标签：< ol>< li></ li>< ol>

定义列表：< dl>< dt>< /dt>< dd>< /dd>< /dl>

做用：插入无序、有序、自定义标签

例：

< ul>
    < li>a< /li>
    < li>b< /li>
    < li>c< /li>
< /ul>
 < ol>
    < li>a< /li>
    < li>b< /li>
    < li>c< /li>
< /ol>
< dl>
    表示定义的概念的名字
    < dt>
    正数
    < /dt>
    概念的主体
    < dd>
    大于0的数
    < /dd>
< /dl

复制代码

表格标签
复制代码

标签形式：< table>< /table>

表格标签内又能够分为

1.< thead>< /thead>存放表头的内容

2.< tbody>< /body>存放表格内的内容

3.< tfoot>< /tfoot>存放表格底部的内容（不管位置如何放置，它的显示位置必定是表格底部）

在该三个标签内又能够实行分列和分行操做，经过< tr>实现换行，经过< td>

一些属性：

边框问题：border=“非0/0” ；1为显示，0为隐藏，非0的数决定边框宽度

单元格间距：cellspacing=“数字” ；决定间隔宽度

单元格边距：cellpadding=“数字” ；决定单元格的内边距

单元格跨列：colspan=“数字” ；对应的单元格占几格

单元格跨行：rowspan=“数字”

内容对齐：align=“center/right/left” ；设置在行上的，规划当前行上全部单元格的文字的位置 设置在table上，规定该表格在当前页面的位置

表单标签
复制代码

标签形式：< from>< /from>

做用：用于收集用户输入的内容（文本、文件）

表单元素：

1、Input

给一个能输入的文本框：

< input type="text" maxlength="10" value="要显示的初始值"/>

给一个能点的点 若是name相同那么就只能选一个：

< input name="gender" type="radio">1

< input name="gender" type="radio">2

可多选：

< input type="checkbox">

在多选时提早被选中，赋值：

< input value="0" checked type="checkbox">1

显示一个按钮： < input type="button" value="显示在按钮上的文本">

数字，能够用键盘的上下键来控制其中的数字变化：

< input type="number">

输入一个日期表：

< input type="date">

产生一个颜色选择器：

< input type="color">

范围读条:

< input type="range" min="1" max="4">

引入一个邮箱的格式校验（和按钮一同使用）:

< input type="email">

< input type="submit" value="提交">

引入对网址的判断:

< input type="url">

< input type="submit" value="提交">

选择一个文件:

< input type="file">

可选择多个文件:

< input type="file" multiple="4">

输入的时候是密码状态:

< input type="password">

二：Select下拉列表

< select>

< option>1< /option>

< option selected value="">2< /option>//它是初始看见的那个

< option>3< /option>
< /select>
复制代码

三：Textarea

文本域，有一个能够换行的文本框，能够设置行高和列宽

< textarea rows="1" cols="3" >< /textarea>

四：Button

1.Type为submit时，咱们提交后面form的id的表单

< button type="submit" form="test">显示在按钮上的文本< /button>

2.Type为reset时，重置所指form的文本

< button type="reset" form="test">显示在按钮上的文本< /button>

·标签的通用属性

id
复制代码

id属性用于指定元素的识别名称，是惟一的，同一个文档中不能有重复id，通常配合css和js来选择元素。

class
复制代码

class属性用于指定元素的类别名称，能够给同一个文档中的多个元素归于同一个类，同时css也能够经过class属性给同一个类的元素统一设置样式。

style
复制代码

stlye属性用于给元素设定样式，包括内联样式和内部样式

title
复制代码

title属性用于显示省略的内容，当光标移动到元素内容上时显示title里面的内容

dir
复制代码

dir属性用于设定元素标签内容的文字方向

·特殊标签

引用标签
复制代码

做用：代表这一段是自带引用的

< blockquote>引用的内容< blockquote>

·注释

分类：

1.单行注释
复制代码

< !--< div>注释< /div>-->

2.段落注释
复制代码

< !--段落begin-->

< div>

段落

< /div>

< !--段落begin-->

3.条件注释
复制代码

通常用于检查兼容性

例：

< !--[if IE 6]> < div>您的浏览器版本过旧< /div>