HTML基础
1、什么是HTML？
- HTML 指的是超文本标记语言: HyperText Markup Language
- HTML 不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
2、HTML发展史
| 版本 | 发布时间 |
|---|---|
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML 1.0 | 2000 |
| HTML5 | 2012 |
| XHTML5 | 2013 |
3、HTML5的优势
- 世界知名浏览器厂商对HTML5的支持：
- 微软
- 苹果
- Opera
- Mozilla
- 市场的需求
- 跨平台
4、W3C标准
-
W3C 指万维网联盟（World Wide Web Consortium）
-
W3C 创建于1994年10月，Web技术领域最权威和具影响力的国际中立性技术标准机构
-
W3C 创建并维护 WWW 标准
-
https://www.w3.org/ （外国网站）
-
https://www.chinaw3c.org/ （中国网站）
5、HTML基本结构
标签 ：
- HTML 标记是由"<"和">"所括住的指令标记，用于向浏览器发送标记指令。
- 主要分为：单标记指令、双标记指令（由"<起始标记>"＋内容＋""构成）。
- HTML语言使用标志对的方法编写文件，既简单又方便。它通常使用"<标志名>内容"来表示标志的开始和 结束，因此在HTML文档中这样的标志对都必须是成对使用的。
- 为了便于理解，将HTML标记语言大致分为：基本标记、格式标记、文本标记、图像标记、表格标记、链接标记、表 单标记和帧标记等。
整体结构：
ps: 图片来自菜鸟教程
- <!DOCTYPE html> 声明为 HTML5 文档
- <html> 元素是 HTML 页面的根元素
- <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
- <title> 元素描述了文档的标题
- <body> 元素包含了可见的页面内容
- <h1> 元素定义一个大标题
- <p> 元素定义一个段落
注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。
6、常用标签
6.1、body及标题标签
<body bgcolor="white" text="blue">
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>
</body>
- body 标签
- bgcolor 背景颜色 1.颜色名 2.rgb 3.十六进制
- text 字体颜色 1.颜色名 2.rgb 3.十六进制
- 标题标签
- <h1></h1> ~ <h6></h6> 一次增大
效果：
6.2、水平线标签
<hr width="50%" align="center" size="20px" color="red"/>
- width 宽度 1.百分比 2.px
- align 对齐方式 left right center（默认）
- size 水平线粗细
- color 水平线颜色
效果：
6.3、段落标签
<!-- p标签会自动在其前后创建一些空白 -->
<p align="left">
HTML语言使用标志对的方法编写文件，既简单又方便。它通常使用"内容"来表示标志的开始和结束，因此在HTML文档中这样的标志对都必须是成对使用的。
为了便于理解，将HTML标记语言大致分为：基本标记、格式标记、文本标记、图像标记、表格标记、链接标记、表 单标记和帧标记等。
</p>
<!-- 后面还有三个，换用不同的align属性值 -->
- align 对齐方式 left、right、center、justify
效果：
：
6.4、div和span
div
- 是一个块级元素，通常与css配合使用，用于布局。
- 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
- 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是固有的唯一格式表现。可以通过 的 class 或 id 应用额外的样式。
<div>
content
</div>
常用属性：
| 属性 | 值 | 描述 |
|---|---|---|
| align | left、right、center | 规定div元素的内容的对齐方式 |
span
标签被用来组合文档中的行内元素 ，span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化 。
<span>content</span>
6.5、换行标签
<!--
此标签只是简单地开始新的一行，而当浏览器遇到标签时，通常会在相邻的段落之间插入一些垂直的间距。
请使用 <br> 来输入空行，而不是分割段落。
-->
<br/>
段落标签与换行标签的差别：
6.6、格式化标签
- pre 定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。
- 而文本也会呈现为等宽字体 文本标签
- <b>（粗文本）、<i>（斜体文本）、<u>（下划线文本）、 <del>（中划线文本）、<sub>（下标文本）、<sup>（上标文本）
<pre>
为了便于理解，将HTML标记语言大致分为：
基本标记、格式标记、文本标记、图像标记、表格标记、链接标记、表单标记和帧标记等
</pre>
<hr/>
<p>粗体：<strong>粗体</strong></p>
<p>斜体：<i>斜体</i></p>
<p>下划线：<u>下划线</u></p>
<p>中划线：<del>中划线</del></p>
<p>下标：H<sub>2</sub></p>
<p>上标：2<sup>2</sup></p>
效果：
6.7、注释和特殊符号
<!-- 这就是注释 -->
<!-- 特殊符号，只是举了常用的几个，可以百度查询 -->
Hello World
<br/>
Hello World
<br/>
大于号：>
<br/>
小于号：<
<br/>
版权符号：©
效果：
6.8、a标签
- 标签定义超链接，用于从一张页面链接到另一张页面。
- 元素最重要的属性是 href 属性，它指示要链接的目标位置，同时没有href属性a标签内的内容与普通文本没有区别， 也就失去了超链接的功能。
- 若是想要跳转到当前页面，那么href的值为#。被链接页面通常显示在当前浏览器窗口中，除非您规定了另一个目标 （target 属性）。
<a href="https://www.baidu.com/">百度</a>
常用属性：
| 属性 | 值 | 描述 |
|---|---|---|
| href | URL | 链接所要跳转的位置，可能是其它或当前页面 |
| target | _blank _parent _self _top iframename作为锚点的a标签的name值 |
规定在何处打开链接文档。 _blank：开启新页面显示页面； _self：当前页面显示跳转到页面，默认值。 _top：用于有frameset布局的页面，想要覆盖整个页面显示。 iframename：这里iframename与上边的值不同，具体以为iframe起了什么样的名字为准，该值指示要连接的页面跳转后将在相应名称的框架中显示。 |
锚点的实现：
利用a标签的name属性：
<a name="top" ></a>
一般标签的id属性：
<div id="top"></div>
<a id="top" ></a>
锚点定位：
<a href="#top">回到首部</a>
功能性链接：
<!-- 邮箱链接 -->
<a href="mailto:2512071458@qq.com">点击联系我</a>
<!-- qq推广，制作链接：https://shang.qq.com/v3/widget.html -->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2512071458&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:2512071458:53" alt="点击这里联系我领取福利" title="点击这里联系我领取福利"/>
</a>
6.9、图片标签
- img 元素向网页中嵌入一幅图像。
- 从技术上讲， 标签并不会在网页中插入图像，而是从网页上链接图像。 标签创建的是被引用图像的占位空间。
<img src="" alt="" >
必要属性：
| 属性 | 值 | 描述 |
|---|---|---|
| src | URL | 规定显示图像的 URL。 |
| alt | text | 规定图像的替代文本，一般在图片无法正常显示占位的文字 |
常用属性：
| 属性 | 值 | 描述 |
|---|---|---|
| align | top、bottom、middle、left、right | 规定如何根据周围的文本来排列图像 |
| border | px | 定义图片周围的边框 |
| height | px、% | 定义图片的高度 |
| width | px、% | 定义图片的宽度 |
| title | 文本 | 当鼠标悬停图片上时出现的文字 |
6.10、列表
无序列表（应用范围：导航，侧边栏...）
<ul>
<li></li>
<li></li>
......
</ul>
<ul>
<li>好好学习</li>
<li>天天向上</li>
</ul>
常用属性：
| 属性 | 值 | 描述 |
|---|---|---|
| type | disc circle square |
规定列表项目的符号类型 disc：实心圆（默认） circle：空心圆 square：方块 |
有序列表（应用范围：试卷，问答...）
<ol>
<li></li>
<li></li>
......
</ol>
<ol>
<li>第一</li>
<li>第二</li>
</ol>
常用属性：
| 属性 | 值 | 描述 |
|---|---|---|
| type | 1 a A i I |
在列表中使用的标记类型。 1：用数字形式表示序号（默认） a：用小写字母表示序号 A：用大写字母表示序号 i：用小写罗马数字表示序号 I（大写i）：用大写罗马数字表示序号 |
自定义列表（应用范围：网站底部...）
<dl>
<dt></dt> <!-- 标题 -->
<dd></dd> <!-- 列表内容 -->
<dd></dd>
<dd></dd>
......
</dl>
<dl>
<dt>学科</dt>
<dd>Java</dd>
<dd>运维</dd>
<dd>数据结构</dd>
</dl>
6.11、表格
<!--
table相当于一个表格的外框，tr为行，td为一个一个单元格，th为有标题作用的单元格，th中的内容同时有加粗的效果。
-->
<table border="1px">
<tr>
<th colspan="3">学生成绩</th>
</tr>
<tr>
<td rowspan="2">张三</td>
<td>语文</td>
<td>99</td>
</tr>
<tr>
<td>数学</td>
<td>88</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>95</td>
</tr>
</table>
table常用属性：
| 属性 | 值 | 描述 |
|---|---|---|
| align | right、center、left | 表格对齐方式 |
| border | px | 规定表格边框宽度 |
| width | %、px | 规定表格的宽度 |
tr常用属性：
| 属性 | 值 | 描述 |
|---|---|---|
| align | right、left、center | 定义表格内容对齐方式 |
| bgcolor | rgb(x,x,x)、#xxxx、colorname | 规定表格行的背景颜色 |
| valign | top、middle、bottom | 规定表格行中内容的垂直对齐方式 |
td常用属性：
| 属性 | 值 | 描述 |
|---|---|---|
| colspan | 数字：1，2... | 合并的列数 |
| rowspan | 数字：1，2... | 合并的行数 |
6.12、媒体标签
<!-- 视频 -->
<video src="../resources/video/1.mp4" controls autoplay></video>
<!-- 音频 -->
<video src="../resources/audio/1.mp3" controls autoplay></video>
- src：资源地址
- controls：进度条控制
- autoplay：自动播放
6.13、iframe内联框架
<!-- 使用方式一：直接嵌套显示 -->
<iframe src="https://www.baidu.com" frameborder="0" width="800px" height="500px"></iframe>
<!-- 使用方式二：用a标签跳转 -->
<iframe src="" name="iframe" frameborder="0" width="800px" height="500px"></iframe>
<br/>
<a href="https://www.baidu.com" target="iframe">点我跳转百度</a>
效果：
6.14、表单
-
标签用于为用户输入创建 HTML 表单。
-
表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。还可以包含 textarea等元素。
-
表单用于向服务器传输数据。
-
表单中表单元素一定要设置name属性，否则后台无法获取数据
<form action="" method="post">
<table>
<tr>
<td>用户名：</td>
<td><input type="text" name="userName"></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="pwd"></td>
</tr>
<tr>
<td><input type="reset"></td>
<td><input type="submit"></td>
</tr>
</table>
</form>
常用属性：
| 属性 | 值 | 描述 |
|---|---|---|
| action | URL | 规定当提交表单时向何处发送表单数据 |
| method | get，post | 规定用于发送 form-data 的 HTTP 方法 |
| name | 自定义名字 | 表单名字 |
| target | _blank _self _ parent _top iframename | 规定在何处打开 action URL |
method：
表单提交方式：get、post
-
get：默认，主动的获取方式，数据放在url上，数据的容量有限，安全性差，有缓存
-
post：数据放在请求实体中，数据量理论上没有限制，相对安全，没有缓存
6.15、input标签
- input标签用于搜集用户信息。
- 根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、单选按钮、按钮等等
<form action="" method="post" enctype="multipart/form-data" >
<table >
<tr>
<td>文本框：</td>
<td><input type="text" value="张三" maxlength="10" name="text1"></td>
</tr>
<tr>
<td>只读文本框：</td>
<td><input type="text" value="张三" readonly="readonly" name="text2"></td>
</tr>
<tr>
<td>单选框：</td>
<td><input type="radio" value="man" name="sex">男</td>
<td><input type="radio" value="woman" name="sex">女</td>
</tr>
<tr>
<td>复选框：</td>
<td><input type="checkbox" value="1" name="test">1</td>
<td><input type="checkbox" value="2" name="test">2</td>
<td><input type="checkbox" value="3" name="test">3</td>
</tr>
<tr>
<td>文件域：</td>
<td><input type="file" name="file"></td>
</tr>
<tr>
<td>隐藏域：</td>
<td><input type="hidden" value="admin"></td>
</tr>
<tr>
<td>普通按钮：</td>
<td><input type="button" value="普通按钮"></td>
</tr>
<tr>
<td>图片按钮：</td>
<td><input type="image" src="../resources/audio/1.jpg"></td>
</tr>
<tr>
<td>音量：</td>
<td><input type="range" name="voice" min="0" max="100" step="2" ></td>
</tr>
<tr>
<td>搜索框：</td>
<td><input type="search" name="search" ></td>
</tr>
<tr>
<td>提交按钮：</td>
<td><input type="submit" ></td>
</tr>
<tr>
<td>重置按钮：</td>
<td><input type="reset" ></td>
</tr>
<tr>
<td>日期框：</td>
<td><input type="date" name="date"></td>
</tr>
</table>
</form>
常用属性：
| 属性 | 值 | 描述 |
|---|---|---|
| alt | text | 定义图像输入的替代文本 |
| checked | checked | 规定此input元素首次加载时应被选中 |
| disabled | disabled | 当input元素加载时禁用此元素 |
| readonly | readonly | 规定输入字段为只读 |
| maxlength | number | 规定输入字段中的字符的最大长度 |
| value | value | 规定 input 元素的值。 |
| type | button checkbox file hidden image password radio reset submit text range search |
规定input元素的类型。 按钮 复选框 文件 隐藏域 图像形按钮 密码 单选框 重置按钮 提交按钮 文本 滑块 搜索框 |
若上传文件，请求方式为post，且表单添加一个属性:enctype="multipart/form-data"
注意：
- 没有name属性的属性是无法提交到后台的！！！！
- Radio单选按钮以name相同为一组。
- Checkbox复选按钮以name相同为一组。
6.16、textarea和label
textarea
该标签定义多行的文本输入控件。文本区中可容纳无限数量的文本，可以通过 cols 和 rows 属性来规定 textarea 的 尺寸。cols规定文本区内的可见宽度。rows规定文本区内的可见行数。
<textarea>content</textarea>
label
- 标签为input 元素定义标注（标记）。
- label元素不会呈现任何的特殊效果。
- label标签的for属性应当与相关元素的id属性相同，此时点击label标签会自动为元素聚焦
<label for="username">用户名：</label>
<input type="text" id="username" name="username"/>
6.17、button标签
<button>按钮</button>
常用属性：
| 属性 | 值 | 描述 |
|---|---|---|
| disabled | disabled | 禁用该按钮 |
| type | button、submit、reset | 规定按钮的类型 |
| value | text | 规定按钮的初始值 |
| name | button_name | 规定按钮的名称 |
与input按钮的区别：
input是单标签，button是双标签，标签之间可以添加内容（文本或标签等）
6.18、下拉框
<select name="color">
<option value="red">红色</option>
<option value="blue">蓝色</option>
<option value="green">绿色</option>
</select>
select常用属性：
| 属性 | 值 | 描述 |
|---|---|---|
| disabled | disabled | 禁用该该下拉框 |
| multiple | multiple | 规定可以选择多个选项 |
| name | name | 规定下拉列表的名称 |
| size | number | 规定下拉列表中可见选项的数目 |
option常用属性：
| 属性 | 值 | 描述 |
|---|---|---|
| disabled | disabled | 禁用该下拉列表中的这个元素 |
| selected | selected | 规定选项(在首次显示在列表中时)表现为选中状态 |
| value | text | 规定提交服务器的选项值 |
说明：上述常用标签的样式属性可以用CSS样式替代。
6.19、标签的分类
HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素。
块级元素
元素都从新的一行开始，并且其后的元素也另起一行；元素的高度、宽度、行高以及顶和底边距都可设置；元素宽度 在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
行内元素
和其他元素都在一行上；元素的高度、宽度及顶部和底部边距不可设置；元素的宽度就是它包含的文字或图片的宽 度，不可改变。
行内块状元素
和其他元素都在一行上；元素的高度、宽度、行高以及顶和底边距都可设置。
浙公网安备 33010602011771号