HTML常⽤标签、form表单、标签分类
HTML
⼀、HTML
1.HTML简介
HTML（HyperText Markup Language）就是超⽂本标记语⾔。"超⽂本"就是表⽰⻚⾯内可以包含⾮⽂字元素，如：图⽚、链接、⾳乐等等。
1.1 基础语法
1.1.1 标签
HTML 标记是由"<“和”>"所括住的指令标记，⽤于向浏览器发送标记指令。
主要分为：单标记指令、双标记指令（由"<；起始标记>“＋内容＋”</结束标记>"构成）。
1.1.2 整体结构
<!--声明当前HTML的版本是HTML5 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<!--主体内容-->
</body>
</html>
2.常⽤标签
HTML⻚⾯是由标签组成，不同的标签浏览器对其进⾏不同样式和内容的渲染，我们需要记忆常⽤的标签即可。⼤致可分为如下⼏类：标题、⽔平线、段落、换⾏、图⽚、表格、超链接、列表、表单、下拉列表、div 和 span等。
2.1 标题和⽔平线
2.1.1 标题
h1 - h6 标签可定义标题，标题依次递减，由于 h 元素拥有确切的语义，因此请慎重地选择恰当的标签层级来构建⽂档的结构。请不要利⽤标题标签来改变同⼀⾏中的字体⼤⼩。
h999这样的标签不产⽣错误，但是不具有标题的效果。
h1标签可以为搜索引擎获取，便于⻚⾯在被搜索的时候检索到，但是⼀个⻚⾯最好只有⼀个h1标签，否则可能进⼊搜索引擎的⿊名单。
<!--标题（块级元素：元素会⾃动换⾏）h1~h6，依次递减-->
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
...
2.1.2 ⽔平线
hr 标签在 HTML ⻚⾯中创建⼀条⽔平线（horizontal rule）可以在视觉上将⽂档分隔成各个部分。在 HTML 中，hr 标签没有结束标签。
<!--hr ⽔平线-->
<hr />
<hr>
<hr width="80%"/>
<hr width="80%" align="left" size="5"/>
<hr width="80%" align="left" size="5" color="red"/>
常⽤属性：
2.2 段落和换⾏
2.2.1 段落
p标签定义段落。p 元素会⾃动在其前后创建⼀些空⽩。浏览器会⾃动添加这些空间，您也可以在样式表中规定。
<!--p 段落，⾏之间会有间隙
属性：align对齐⽅式
center 居中对齐
left 居左对齐（默认）
right 居右对齐
-->
<p align="center">p 元素会⾃动在其前后创建⼀些空⽩。浏览器会⾃动添加这些空间，您也可以在样式表中规定。</p>
<p align="right">p 元素会⾃动在其前后创建⼀些空⽩。浏览器会⾃动添加这些空间，您也可以在样式表中规定。</p>
常⽤属性：
2.2.2 换⾏
br标签为换⾏符号 br 标签是空标签（意味着它没有结束标签，因此这是错误的：<br></br>）。
注意：br 标签只是简单地开始新的⼀⾏，⽽当浏览器遇到 p 标签时，通常会在相邻的段落之间插⼊⼀些垂直的间距。请使⽤br 来输⼊空⾏，⽽不是分割段落。
<!--br 换⾏，单标签
<br>
<br/>
-->
你好<br />
HELLO
2.3 列表
2.3.1 ⽆序列表
由 ul 和 li 标签组成。
⽆序列表
<ul>
<li></li>
</ul>
可以改变⽆序列表前⾯点的形状 type
dise：实⼼圆（默认）circle：空⼼圆square：⽅块
-->
<ul type="circle">
<li>好好学习</li>
<li>天天向上</li>
<li>天天向上</li>
</ul>
常⽤属性：
2.3.2 有序列表
由 ol 和 li 标签组成。
<!--列表：
有序列表
<ol>
<li></li>
</ol>
可以改变有序列表前的数字type
a,A,1,i,I
-->
<ol type="a">
<li>好好学习</li>
<li>天天向上</li>
<li>天天向上</li>
</ol>
常⽤属性：
2.4 div和span
2.4.1 div
div是⼀个块级元素，通常与css配合使⽤，⽤于布局。
div 是⼀个块级元素。这意味着它的内容⾃动地开始⼀个新⾏。实际上，换⾏是 div 固有的唯⼀格式表现。可以通过 div 的 class 或 id 应⽤额外的样式。
层，默认宽度占⽗元素的总宽度（默认含⼀⾏）
属性：
对齐⽅式 align
宽度 width
⾼度 height
-->
<div >你好</div>
<div>Hello</div>
常⽤属性：
2.4.2 span
span标签被⽤来组合⽂档中的⾏内元素，span 没有固定的格式表现。当对它应⽤样式时，它才会产⽣视觉上的变化。
<!--span
块，默认是有多少内容占多少地⽅href标签怎么用
-->
<span>你好</span>
<span>Hello</span>
2.5 格式化标签
2.5.1 font
规定⽂本的字体、字体尺⼨、字体颜⾊。
<!--font
规定⽂本的字体，字体尺⼨，字体颜⾊
-->
<font color="red" size="4" face="楷体">规定⽂本的字体、字体尺⼨、字体颜⾊</font>
2.5.2 pre
定义预格式化的⽂本。被包围在 pre 元素中的⽂本通常会保留空格和换⾏符。⽽⽂本也会呈现为等宽字体（原样输出）。
<!--pre
定义预格式化的⽂本。被包围在 pre 元素中的⽂本通常会保留空格和换⾏符。⽽⽂本也会呈现为等宽字体
-->
<pre>
定义预格式化的⽂本。
被包围在 pre 元素中的⽂本通常会保留空格和换⾏符。⽽⽂本也会呈现为等宽字体
</pre>
2.5.3 ⽂本标签
<!--
<b>（粗⽂本）、<i>（斜体⽂本）、<u>（下划线⽂本）、
< del >（中划线⽂本）、<sub>（下标⽂本）、<sup>（上标⽂本）
-->
你好<br />
<b>你好</b>
<strong>你好</strong>
<i>你好</i>
<u>你好</u>
<del>你好</del><br />
H<sub>2</sub>O
2<sup>3</sup>
3.a标签
a标签定义超链接，⽤于从⼀张⻚⾯链接到另⼀张⻚⾯。
a元素最重要的属性是 href 属性，它指⽰要链接的⽬标位置，同时没有href属性a标签内的内容与普通⽂本没有区别，也就失去了超链接的功能。
若是想要跳转到当前⻚⾯，那么href的值为#。被链接⻚⾯通常显⽰在当前浏览器窗⼝中，除⾮您规定了另⼀个⽬标（target 属性）。
<!--
a标签
超链接，⽤来从⼀个页⾯链接到另⼀个页⾯
属性：
href：需要链接的页⾯地址（如果不设置这个标签，则和普通的⽂本没有区别）
target：打开的⽅式
_self：当前窗⼝（默认）
_blank：新开空⽩窗⼝
-->
<a href="www.baidu">百度</a><br>
<a href="www.baidu" target="_self">百度</a><br>
<a href="www.baidu" target="_blank">百度</a><br>
常⽤属性：
锚点的实现：
<!--锚点的实现
设置锚点：
1. a标签
设置name属性值
2.其他标签（包含a标签）
设置id属性值
锚点定位：
<a href="#name属性值或id属性值"></a>
-->
4.图⽚
img 元素向⽹⻚中嵌⼊⼀幅图像。
注意：从技术上讲，img 标签并不会在⽹⻚中插⼊图像，⽽是从⽹⻚上链接图像。img 标签创建的是被引⽤图像的占位空间。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。