HTML
1. 初识HTML
HTML的全称为Hyper Text Markup Language，即超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联，这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找、检索信息提供方便。
超文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下：
- 简易性：超文本标记语言版本升级采用超集方式，更加灵活方便。
- 可扩展性：超文本标记语言的广泛应用带来了加强功能、增加标识符等要求，超文本标记语言采取子类元素的方式，为系统扩展带来保证。
- 平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。
- 通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。
W3C标准 / World Wide Web Consortium (万维网联盟)：
- 结构化标准语言（HTML、XML）
- 表现标准语言（CSS）
- 行为标准（DOM、ECMAScript）
HTML基本结构
2. 网页基本信息
helloworld.html
<!-- HTML注释格式 -->
<!-- DOCTYPE：告诉浏览器我们要用什么规范 -->
<!DOCTYPE html>
<html lang="en">
<!-- head标签代表网页头部 -->
<head>
<!-- meta描述性标签，用来描述我们网站的一些信息 -->
<!-- meta一般用来做SEO -->
<meta charset="UTF-8">
<meta name="keywords" content="=======HTML=======">
<meta name="description" content="========html=======">
<!-- title网页标题 -->
<title>Title</title>
</head>
<!-- body代表网页主体 -->
<body>
Hello, World!
</body>
</html>
3. 网页基本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签学习</title>
</head>
<body>
<!-- 标题标签 -->
<h1>一级标签</h1>
<h2>二级标签</h2>
<!-- 段落标签 -->
<p>这是一段内容</p>
<!-- 换行标签 -->
<br/>
<!-- 水平线标签 -->
<hr/>
<!-- 字体样式标签 -->
粗体：<strong>粗体标签</strong>
斜体：<em>斜体标签</em>
<!--特殊符号-->
空格 <br/>
< 小于号 <br/>
> 大于号 <br/>
© 版权符号 <br/>
<!--
特殊符号记忆方式
&随便加个字符会有提示
-->
</body>
</html>
4. 图像标签
<body>
<!-- ../ 代表上一级目录
src: 图片地址（推荐使用相对地址）
alt: 图片名称（当找不到图片的时候显示）
title: 鼠标悬停显示的文字
-->
<img src="../resources/image/1.jpg" alt="头像" title="这是一个头像">
</body>
5. 链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签学习</title>
</head>
<body>
<!-- 使用name作为标记，与锚链接配合使用实现跳转 -->
<a name="top">顶部</a>
<!--a标签
href: 必填，表示要跳转到哪里
target: 表示窗口打开方式
_blank 打开新页面
_self 在自己的网页中打开
-->
<a href="https://www.baidu.com" target="_blank">点击跳转到百度</a>
<!--锚链接
1.需要一个锚链接
2.跳转到标记
-->
<a href="#top">回到顶部</a>
<a href="otherPage.html#top">跳转到别的页面的顶部</a>
<!-- 功能性连接
邮件链接：mailto:
QQ链接：QQ推广官网生成
-->
<a href="mailto:2577231582@qq.com">点击联系我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2577231582&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:920637372:53" alt="点击领取胡桃" title="点击领取胡桃"/>
</a>
</body>
</html>
6. 块元素和行内元素
块元素：
- 无论内容多少，该元素都独占一行
- p标签、h1…h6标签等
行内元素：
- 内容决定长度，不同行内元素可以排在一行
- a标签、strong标签、em标签等
7. 列表标签
<!-- 有序列表ol -->
<ol>
<li>java</li>
<li>python</li>
<li>运维</li>
<li>前端</li>
<li>c++</li>
</ol>
<hr/>
<!-- 无序列表ul -->
<ul>
<li>java</li>
<li>python</li>
<li>运维</li>
<li>前端</li>
<li>c++</li>
</ul>
<!--自定义列表
dl: 标签
dt: 列表名称
dd: 列表内容
-->
<dl>
<dt>学科</dt>
<dd>java</dd>
<dd>python</dd>
<dd>前端</dd>
<dt>位置</dt>
<dd>西安</dd>
<dd>重庆</dd>
<dd>新疆</dd>
</dl>
8. 表格标签
<!--表格table
border 边框宽度
tr 行 tablerow
td 列 tabledatacell
th 表头单元格 tableheadercell
-->
<table border="1px">
<tr>
<!-- 跨列colspan -->
<td colspan="4">1-1</td>
</tr>
<tr>
<!-- 跨行rowspan -->
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
9. 媒体元素
视频：video
音频：audio
<!--音频和视频
src: 资源路径
controls: 控制条
autoplay: 自动播放
-->
<video src="../resources/video/1.mp4" controls autoplay></video>
<audio src="../resources/audio/1.mp3" controls autoplay></audio>
10. 页面结构分析
11.iframe内联框架
<!--iframe内联框架
src: 地址
width: 宽度
height: 高度
-->
<iframe name="hello" src="" frameborder="0" width="1000px" height="800px"></iframe>
<!-- 将在iframe中打开谷歌 -->
<a href="https://www.google.com" target="hello">点击跳转至谷歌</a>
12. 表单语法（POST & GET）
<!--表单form
action: 表单提交的位置，可以是网站也可以是一个请求处理地址
method: post、get 提交方式
get方式： 可以在url中看到提交的信息，不安全但高效
post方式： 相对安全，可传输大文件
-->
<form action="helloworld.html" method="post">
<!-- 文本输入框： input type="text" -->
<p>名字：<input type="text" name="username"></p>
<!-- 密码框： input type="password" -->
<p>密码：<input type="password" name="password"></p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
13. 表单元素
<!--表单form
action: 表单提交的位置，可以是网站也可以是一个请求处理地址
method: post、get 提交方式
get方式： 可以在url中看到提交的信息，不安全但高效
post方式： 相对安全，可传输大文件
-->
<form action="helloworld.html" method="get">
<!-- 文本输入框： input type="text"
value：默认初始值
maxlength：最长字符数
size：文本框的长度
placeholder：提示信息，输入值后消失
-->
<p>名字：<input type="text" name="username" value=""
maxlength="8" size="30" placeholder="张三"></p>
<!-- 密码框： input type="password" -->
<p>密码：<input type="password" name="password"></p>
<!-- 单选框：input type="radio"
value: 单选框值
name: 表示组
checked: 默认选中
-->
<p>性别：
<input type="radio" value="boy" name="sex" checked>男
<input type="radio" value="girl" name="sex">女
</p>
<!-- 多选框：input type="checkbox"
value: 值
name: 表示组
checked: 默认选中
-->
<p>爱好：
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="code" name="hobby" checked>代码
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="game" name="hobby">游戏
</p>
<!--按钮
input type="button" 普通按钮
input type="image" 图像按钮，会提交
input type="submit" 提交按钮
input type="reset" 重置按钮
-->
<p>
<input type="button" name="btn1" value="点击长高10cm">
<input type="image" src="../resources/image/1.jpg">
<input type="submit">
<input type="reset" value="清空表单">
</p>
<!-- 下拉框，列表框 select/option
selected: 默认选中
-->
<p>国家：
<select name="country" id="">
<option value="China" selected>中国</option>
<option value="USA">美国</option>
<option value="England">英国</option>
</select>
</p>
<!-- 文本域 textarea
cols="50" 列
rows="10" 行
-->
<p>反馈：
<textarea name="textarea" id="" cols="50" rows="10">文本内容</textarea>
<input type="button" value="上传" name="upload">
</p>
<!-- 文件域：input type="file"
name：属性名
-->
<input type="file" name="files">
<!-- 邮件验证input type="email" -->
<p>邮箱：<input type="email" name="email"></p>
<!-- url验证input type="url" -->
<p>URL：<input type="url" name="url"></p>
<!-- 数字input type="number" -->
<p>数字：
<input type="number" name="num" max="100" min="0" step="10">
</p>
<!-- 滑块input type="range"
name：属性名
step：步长
-->
<p>滑块：
<input type="range" name="voice" min="0" max="100" step="2">
</p>
<!-- 搜索框input type="search" -->
<p>搜索：
<input type="search" name="search">
</p>
</form>
14. 表单的应用
只读 readonly：
<input type="text" value="只读" readonly>
禁用 disabled：
<input type="radio" value="boy" name="sex" disabled>男
隐藏域 hidden：
<input type="password" name="password" hidden>
增强鼠标可用性（点击文字光标移动至框）：
<!-- for指向id -->
<label for="mark">点击后通过for的参数移动至id所指向的标签</label>
<input type="text" id="mark">
15. 表单初级验证
提示信息 placeholder：
<input type="text" placeholder="提示信息">
非空验证 required：
<input type="text" required>
正则表达式 pattern：
在网上搜常用的正则表达式即可~
3160
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
