快速链接：
一、什么是HTML
HTML（Hyper Text Markup Language）超文本标记语言
超文本：文字、图片、音频、视频、动画等
现在最多使用的是HTML5，它提供了一些新的元素和一些新的特性，同事也建立了一些新的规则。这些元素、特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形、图标、图像和动画，以及不需要安装任何插件直接使用网页播放视频等。现在的web网页播放视频一般有两种方式：
1.使用flash插件播放（逐渐被浏览器淘汰禁用）
2.使用html5播放器播放（现在以及未来的趋势）
二、第一个HTML网页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
1）DOCTYPE
向浏览器声明使用什么规范，现在浏览器默认的就是html5
2)标签
整个html网页的总标签，网页的所有标签和内容均需要在此标签之内进行编辑
3）标签
meta是一个描述性标签，它用来描述我们网站的一些信息，一般用来做搜索引擎优化（SEO）
3）<head>头部标签
代表网页头部
4）<title>标题标签
代表网页的标题
5）网页主体标签
三、网页的基本标签
1)标题标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
……
2）段落标签
<!--一、在一个段落标签中的内容将会显示在同一行中-->
<p>
用户名
密码
</p>
<!--二、在不同的p标签中就会显示在不同的行中，放在不同的p标签中有点类似于使用了换行-->
<p>
用户名
</p>
<p>
密码
</p>
3）换行标签
使用换行标签之后，原本应该显示在同一行的数据将会进行换行，作用形同“Enter回车”，一般将换行标签写为“闭合”形式
<p>
用户名<br/>
密码
</p>
使用两个p标签和使用换行标签显示的内容的区别：
使用两个p标签，则两行数据之间的间隔较大，而单纯使用换行标签，则两行数据之间的间隔比较小
4）水平线标签
水平线标签就是在网页中显示出一条横向贯穿的水平线，我们一般也写成“闭合”形式。
5）字体样式标签
<!--1.粗体，斜体-->
<strong>粗体</strong>
<em>斜体</em>
6）特殊符号标签
空格:
大于：>
小于：<
版权符号：©
更多特殊符号可以查看:https://www.w3school.com.cn/tags/html_ref_symbols.html
四、常见的图像格式
1）JPG
2）GIF
3）PNG
4）BMP（位图）
<img src='path' alt='text' title='text' width='x' height='y'/>
src="图像地址"
alt="图像的替代文字"（当图片因为一些原因无法显示的时候，就会 显示该文字）
title="鼠标悬停提示文字"
width="图像宽度"
height="图像高度"
五、链接标签
<a href="path" target="目标窗口位置">链接文本或图像</a>
href="链接路径"
target="链接在哪个窗口打开",常用值：_self、_blank
target属性用于设置在何处打开链接文档
| 值 | 描述 |
|---|---|
| _blank | 在新窗口中打开被链接文档 |
| _self | 默认，在当前的页面中打开被链接文档 |
| _parent | 在父框架集中打开被链接文档 |
| _top | 在整个窗口中打开被链接文档 |
| framename | 在指定的框架中打开被链接的文档 |
5.1文本超链接
<a href="index.html">点击我跳转到另一个页面</a>
<br/>
<a href="https://www.baidu.com">点击我跳转到百度网站</a>
5.2图像超链接
<!--图片超链接-->
<a href="https://blog.csdn.net/qq_43655835">
<img src="imgs/001.jpg" alt="中华骇客联盟基地" width="400px" height="256px" title="点击跳转"/>
</a>
5.3按钮跳转
<a href="https://blog.csdn.net/qq_43655835" target="_blank">
<button type="button">确认跳转</button>
</a>
<!--回到顶部功能-->
<!--1.首先在页面的顶部设置锚点-->
<a name="top">顶部</a>
<!--2.设置跳转链接-->
<a href="#top">回到顶部</a>
<!--跳转链接之后定位到跳转页面锚点-->
<!--1.首先在跳转之后的页面design.html中设置锚点-->
<a name="design">锚点</a>
<!--2.在操作页面设置跳转链接-->
<a href="design.html#design">跳转至指定位置</a>
5.4功能性跳转
<!--点击发送邮件-->
<a href="mailto:304897438@qq.com">点击联系我</a>
<!--QQ链接-->
<!--搜索"QQ推广"，登录账号，选择"推广工具",复制页面代码到指定位置即可-->
<http：//wpa.qq.com/pa?p=2:24736743:53
六、行内元素和块元素
6.1行内元素
内容撑开宽度，左右都是行内元素的可以排在一行
<a>标签
<strong>标签
<em>标签
6.2块元素
无论内容多少，该元素独占一行
<p>标签
<h1~h6>标签
七、列表标签
7.1有序列表
带序号(1,2,3,4……)
<!--有序列表 orderly
前面有数字
应用范围：试卷、问答……
-->
<ol>
<li>java</li>
<li>python</li>
<li>javascript</li>
<li>运维</li>
<li>前端</li>
</ol>
7.2无序列表
<!-- 无序列表
前面有小圆点
应用范围：导航、侧边栏……
-->
<ul>
<li>java</li>
<li>python</li>
<li>javascript</li>
<li>运维</li>
<li>前端</li>
</ul>
7.2自定义列表
<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
-->
<dl>
<dt>标题</dt>
<dd>java</dd>
<dd>python</dd>
<dd>javascript</dd>
<dd>运维</dd>
<dd>前端</dd>
</dl>
八、表格标签
<!--表格标签-->
<table>
<!--行标签-->
<tr>
<!--列标签-->
<td>1-1</td>
<td>1-2</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
</table>
九、媒体标签
<!--视频标签-->
<video src="" controls autoplay></video>
<!--音频标签-->
<audio src="" controls></audio>
src:资源路径
controls:控制按钮，控制视频或者音频的播放、音量、窗口大小化等
autoplay:自动播放
十、页面结构分析
| 元素名 | 描述 |
|---|---|
| header | 标题头部区域的内容（用于页面或者页面中的一块区域） |
| footer | 标记脚步区域的内容（用于整个页面或者页面的一块区域） |
| section | Web页面中的一块独立区域 |
| article | 独立的文章内容 |
| aside | 相关内容或者应用（常用于侧边栏） |
| nav | 导航类辅助内容 |
十一、iframe内联框架
<iframe src="https://blog.csdn.net/qq_43655835" name="myLog" frameborder="0" width="1000px" height="800px">
</iframe>
src: 显示资源路径
name: 标识iframe
frameborder: 规定是否显示 <iframe> 周围的边框。 取值：1/0
width: iframe的宽度
height: iframe的高度
十二、form表单提交
<form method="post" action="index.html">
<p>
用户名：<input type="text" name="username">
</p>
<p>
密码：<input type="password" name="password">
</p>
<button type="submit">提交</button>
</form>
action: 规定当提交表单时向何处发送表单数据，可以是一个网站，也可以是一个请求处理地址。
method: get/post 用于发送表单数据的http方法
十三、单选框和多选框
<!--单选框-->
<p>
<input type="radio" value="boy" name="sex" checked>男
<input type="radio" value="girl" name="sex">女
</p>
checked: 默认勾选项（多选框一样）
单选框和多选框最需要注意的是：name这个属性必须是一个组，也就是name属性必须是一样的才能实现单选功能，如果name属性不一样，则认为不是同一个单选框组，也就能够同时勾选两个了
<!------------------------------------------------->
<!--多选框-->
<p>
爱好:
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="food" name="hobby">美食
<input type="checkbox" value="run" name="hobby">跑步
<input type="checkbox" value="playgame" name="hobby">游戏
</p>
十四、下拉框
国家：<select>
<option value="volvo" selected>中国</option>
<option value="saab" >美国</option>
<option value="opel">俄罗斯</option>
<option value="audi">古巴</option>
</select>
selected: 默认选项
十五、文本域和文件域
<!--文本域-->
<textarea name="content" id="textareas" cols="30" rows="10">
内容……
</textarea>
<!--文件域-->
<!--选择单个文件-->
<input type="file" name="uploadfile"/>
<!--选择多个文件-->
<input type="file" multiple name="uploadfiles"/>
十六、搜索框滑块和简单验证
<!--将类型选择为email可以进行简单的验证，这种验证非常low,在实际的应用中几乎不会使用这种验证方式，我们可以选择添加js代码进行正则匹配
-->
邮箱地址：<input type="email" name="my_email">
同理：
URL:<input type="url" name="sumit_url">
数字:<input type="number" name="enter_number">
<!--滑块：
常用于设置音量大小，提交之后能够读取到当前的滑块的数值
-->
<input type="range" name="voice" max="100" min="0" step="1"/>
<!--搜索框-->
<p>
<input type="search" name="search"/>
</p>
十七、表单的常见应用
disabled: 禁用
readonly: 只读
hidden: 隐藏
placeorder: 规定可描述输入 <input> 字段预期值的简短的提示信息。
required: 必需在提交表单之前填写输入字段
pattern: 用于验证 <input> 元素的值的正则表达式。
3632
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
