HTML的初步学习
1. 什么是HTML
HTML是超文本标记语言(Hype Text Markup Language)，HTML是用标签来描述网页的语言，它包含了标签和（标签中的）文本内容。
HTML也可以称为是一个web页面，通过浏览器可以访问web页面。
2. HTML的构成
HTML是由各种标签构成的，要学会HTML，要先掌握各种标签的语法。
2.1 主体标签
-
声明使用的规范：
<!DOCTYPE html> -
一个html的实例化：
<html></html> -
网页头部：
<head></head>- 当前文件使用浏览器打开的文字编码方式：
<meta charset="utf-8"> - 描述性标签，用于描述网站的信息，一般用来做SEO：
<meta ****="****"> - 网页标题（浏览器中标签的命名）：
<title></title>
- 当前文件使用浏览器打开的文字编码方式：
-
网页主体的实例化：
<body></body>
2.2 基本标签
- 标题标签：
<h1></h1> - 段落标签：
<p></p> - 换行标签：
<br/> - 水平线标签：
<hr/> - 字体样式标签
- 粗体：
<strong></strong>或<b></b>(bold) - 斜体：
<em></em>(emphasize)或<i></i>(italic)
- 粗体：
- 注释和特殊符号
- 注释：
<!-- --> - 特殊符号：以
&开头，以;结尾；如空格 (no breaking space)
- 注释：
2.3 图像标签
只举例了几个简单的属性设置
常见的图像格式：JPG、GIF、PNG、BMP
例如：<img src="img/猛男派大星.png" width="150%" title="我是派大星" alt="我丢了!"/>中
src是图像的地址，一般使用相对路径（相对路径中../代表上一级目录），width图像宽度height图像高度title是鼠标悬停提示文字alt是图像丢失时的替代文字
2.4 链接标签
-
页面间链接：
<a href="网页地址" target="_blank">链接文本描述</a>- href(hot references):必填，否则链接标签无意义
- target:表示窗口打开的位置（如
_blank表示在新的标签页中打开，默认会在原标签页中打开_self） - 连接描述中可以是简单的文本描述，也可以嵌套一个图像标签，使用图片跳转链接
-
锚链接
- 锚标签需要有一个锚点提供跳转目的地址，使用name进行标记：
<a name="锚点标识名">锚点文本描述</a> - 跳转方式1:
<a href="#锚点标识名">锚点跳转文本描述</a>，重点#锚点名 - 跳转方式2：
<a href="网页地址#锚点标识名">锚点跳转文本描述</a>，该方式能够跳转到指定网页的指定位置
- 锚标签需要有一个锚点提供跳转目的地址，使用name进行标记：
-
功能性链接
- 邮件链接
<a href="mailto:邮箱地址">链接文本描述</a>
- 邮件链接
在腾讯的一个qq推广工具中有链接标签的一种具体应用：
2.5 行内元素和块元素
- 块元素
- 无论内容多少，该元素独占一行
- 比如p、h1~h6等标签
- 行内元素
- 内容撑开宽度，左右都是行内元素的可以排在一行
- 比如常见的字体样式标签
2.6 列表
- 有序列表
<ol>
<li></li>
</ol>
- 无序列表
- 一般用在导航、侧边栏
<ul>
<li></li>
</ul>
- 自定义列表
- 一般用在网站底部
<dl>
<dt></dt>
<dd></dd>
</dl>
2.7 表格
为什么使用表格：表格简单通用，结构稳定
表格标签：
<table border="1px">
<tr>
<td colspan="n"></td>
</tr>
<tr>
<td rowspan="n"></td>
</tr>
</table>
border设置表格边框<tr></tr>每一个标签代表一行<td></td>每一个标签代表一个列值colspan="n"表示将n个列值合并为一个列值rowspan="n"表示将n行个列值合并为一个列值align="value"设置列值的对齐方式（left、center、right）
2.8 音频和视频
-
视频标签：
<video src="资源路径" controls autoplay muted></video>-
controls代表显示视频控制条，若没有controls，视频不会显示 -
autoplay控制视频是否在网页打开时自动播放 -
muted是静音播放
-
-
音频标签：
<audio src="资源路径" controls autoplay></audio>，同视频标签controls代表显示音频控制条，若没有controls，音频不会显示autoplay控制音频是否在网页打开时自动播放
2.9 iframe内联框架
内联框架的作用：在一个网页中嵌入其他网页
iframe标签：<iframe src="path" name="iframe标识名"></iframe>
这个在B站的视频分享中有具体的应用：
2.10 表单
表单标签：<form method="post" action="result html"></form>
action：表单提交的位置，是一个网站或者地址method：post、get提交方式- get方式：可以在URL中看到提交的信息，高效但不安全
- post方式：相对安全，且可以传输大文件（下图为使用post方式如何查看到提交的表单内容，但此步骤还能再经过加密处理）
input标签（以下都为input属性）typeradio：单选框（注意：单选框需要和name一起用，否则在需求只能选择一个选项的情况下，会出现多个单选框都能选中；最好每个input标签都有name值进行分组），可通过checked属性设置默认值checkbox：多选框，可通过checked属性设置默认值button：按钮image：图片按钮，需要通过src属性设置图片路径reset：重置，清空表单file：文件域，可选择文件进行提交email：邮箱验证，验证是否是一个邮箱，但只是初级验证，后期验证可以使用javascript实现。number：数字验证，通过max和min设置数字上下限，还有步长steprange：滑块search：搜索
value：初始值maxlength：最大可输入字符数name：表示组readonly：只读disabled：禁用hidden：隐藏 域
select标签：下拉框，可通过selected属性设置默认选项
<select name="列表名称">
<option value="选项的值">选项1</option>
<option value="选项的值" selected>选项2</option>
<option value="选项的值">选项3</option>
</select>
- 文本域：
<textarea name="ttt" cols="30" rows="50">文本内容</textarea> <label for="目的标签id"></label>，通过label标签可以增强鼠标的可用性，定义for属性可以让鼠标跳转到对应id的标签。
2.11 表单的初级验证
为什么要进行表单验证？减少无用数据、非法数据的提交，减轻服务器压力，提高数据的安全性
在2.10中提到的表单属性中，还有以下三种表单初级验证的方式：
- 属性
placeholder="提示信息"：提示输入信息 - 属性
required：非空判断，有该属性的标签不能为空，否则无法提交 - 属性
pattern：正则表达式验证
浙公网安备 33010602011771号