HTML的常用标签整理<a href="https:/ /www. bilibili.com/"target="_bla

·html标签的基本形式

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

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

·head部分的标签

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:

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

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>

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

表单元素：

一、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>

HTML的常用标签整理