HTML ~ 从入门到入坑。
文章目录
Hyper Text Markup Language。
HTML 5。
优势。
- 世界知名浏览器厂商对 HTML 5 的支持。
微软
苹果
Opera
Mozilla
-
市场的需求。
-
跨平台。
w3c。
万维网联盟创建于 1994 年,是 Web 技术领域最具权威和影响力的国际
中立性技术标准机构
。到目前为止,W3C 已发布了 200 多项影响深远的Web技术标准及实施指南,如广为业界采用的超文本标记语言 HTML(标准通用标记语言下的一个应用)、可扩展标记语言 XML(标准通用标记语言下的一个子集)以及帮助残障人士有效获得 Web 信息的无障碍指南(WCAG)等,有效促进了 Web 技术的互相兼容,对互联网技术的发展和应用起到了基础性和根本性的支撑作用。
https://www.w3.org/
https://www.chinaw3c.org/
-
结构化标准语言。(HTML、XML)。
-
表现标准语言(CSS)。
-
行为标准(DOM、ECMAScript)。
HTML。
开放标签。
闭合标签。
入门。
<!-- !DOCTYPE:告诉浏览器,我们要使用什么规范。-->
<!DOCTYPE html>
<html lang="en">
<!-- head 网页头部。-->
<head>
<!-- meta 描述型标签。ta 用来描述网站的一些信息。-->
<!-- 一般用来做 SEO。-->
<meta charset="UTF-8">
<meta name="keywords" content="Geek。">
<meta name="description" content="Geek。">
<!-- 窗口标题。-->
<title>Title</title>
</head>
<!-- 网页主体。-->
<body>
Hello World。
</body>
</html>
标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签。</title>
</head>
<body>
<!-- 标题标签。-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!-- 段落标签。-->
<p>1</p>
<p>2</p>
<p>3</p>
<!-- 水平线标签。-->
<hr>
<!-- 换行标签。-->
1<hr>
<br>
2<hr>
<br>
3<hr>
<br>
<h1>字体样式标签。</h1>
粗体:<strong>i love you</strong>
斜体:<em>i love you</em>
<hr>
<br>
<h1>特殊符号。</h1>
空 格
空 格
<hr>
<br>
>
<hr>
<br>
<
<hr>
<br>
©版权所有 Geek。
</body>
</html>
图片标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- src 图片地址。-->
<!-- 相对路径。-->
<!-- 绝对路径-->
<!-- alt 图片加载不出来就会显示 alt 中的文字。-->
<img src="../resources/image/0.jpg" alt="小程序码。" title="悬停文字">
</body>
</html>
链接标签 & 锚链接。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签。</title>
</head>
<body>
<!-- 使用 name 作为标记。-->
<a href="" name="top"></a>
<!-- href 要中转的页面。-->
<!-- target 窗口在哪打开。
_blank:在新标签页中打开。
_self:在自己的内面中打开。
-->
<a href="我的第一个网页。.html" target="_blank">点击我中转页面1</a>
<a href="https://www.baidu.com/"><img src="../resources/image/0.jpg" alt="小程序码。" title="悬停文字"></a>
<a href="https://www.baidu.com/"><img src="../resources/image/0.jpg" alt="小程序码。" title="悬停文字"></a>
<a href="https://www.baidu.com/"><img src="../resources/image/0.jpg" alt="小程序码。" title="悬停文字"></a>
<a href="https://www.baidu.com/"><img src="../resources/image/0.jpg" alt="小程序码。" title="悬停文字"></a>
<a href="https://www.baidu.com/"><img src="../resources/image/0.jpg" alt="小程序码。" title="悬停文字"></a>
<a href="https://www.baidu.com/"><img src="../resources/image/0.jpg" alt="小程序码。" title="悬停文字"></a>
<a href="https://www.baidu.com/"><img src="../resources/image/0.jpg" alt="小程序码。" title="悬停文字"></a>
<!-- 锚链接。
需要一个锚标记。
-->
<a href="#top">回到顶部</a>
<a name="down">down</a>
</body>
</html>
<a name="down">down</a>
可以在其他的页面的 a 标签中写
<a href="链接标签。.html #down">
跳转
</a>
邮件链接。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="mailto:YifanLiGeek@gmail.com">联系我</a>
</body>
</html>
QQ 推广。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="mailto:YifanLiGeek@gmail.com">联系我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
<img border="0"
src="http://wpa.qq.com/pa?p=2::51"
alt="点击这里给我发消息" title="点击这里给我发消息"/>
</a>
</body>
</html>
行内元素 & 块元素。
- 块元素。
无论内容多少,该元素独占一行。
(p、h1 ~ h6)
- 行内元素。
内容撑开宽度,左右都死行内元素的可以排在一行。
(a、strong、em…)
列表。
无序列表。
有序列表。
自定义定义列表。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 有序列表。-->
<ol>
<li>Java</li>
<li>Python</li>
<li>运维</li>
<li>前端</li>
<li>C/C++</li>
</ol>
<!-- 无序列表。-->
<ul>
<li>Java</li>
<li>Python</li>
<li>运维</li>
<li>前端</li>
<li>C/C++</li>
</ul>
<!-- 自定义列表。-->
<dl>
<dt>学科</dt>
<dd>Java</dd>
<dd>Python</dd>
<dd>运维</dd>
<dd>前端</dd>
<dd>C/C++</dd>
<dt>位置</dt>
<dd>武汉</dd>
<dd>西安</dd>
<dd>重庆</dd>
<dd>新疆</dd>
</dl>
</body>
</html>
表格标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1px">
<tr>
<!-- 跨列。-->
<td colspan="4">1-1</td>
<!--<td>1-2</td>-->
<!--<td>1-3</td>-->
<!--<td>1-4</td>-->
</tr>
<tr>
<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>
<!--<td>3-4</td>-->
</tr>
</table>
</body>
</html>
视频和音频。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 视频和音频。-->
<video src="../resources/vedio/hecheng.mp4" controls autoplay></video>
<audio src="../resources/audio/mojito.mp3"></audio>
</body>
</html>
页面结构分析。
元素名 | 描述 |
---|---|
header | 标记头部区域内容(用于页面或页面中的一块区域)。 |
footer | 标记脚部区域内容(用于页面或页面中的一块区域)。 |
section | Web 页面中的一块独立区域。 |
article | 独立的文章内容。 |
aside | 相关内容或应用(常用于侧边栏)。 |
nav | 导航类辅助内容。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<header>
<h2>页面头部</h2>
</header>
<section>
<h2>页面主体</h2>
</section>
<footer>
<h2>页面脚部</h2>
</footer>
</body>
</html>
iframe 内联框架。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--<iframe src="https://www.baidu.com/" frameborder="0" width="1000px" height="1000px"></iframe>-->
<!--<iframe src="//player.bilibili.com/player.html?aid=31228602&bvid=BV1tW411d7Ta&cid=54561887&page=1" scrolling="no"-->
<!--border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>-->
<iframe src="" name="hello" frameborder="0"></iframe>
<a href="https://www.baidu.com/" target="hello">点击跳转</a>
</body>
</html>
表单。post & get 请求。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>注册</h1>
<!-- 表单 form。
action。表单提交的位置。可以是网站,也可以是一个请求处理地址。
method。POST GET 请求方式。
get 方式提交可以在 url 中看见提交的内容,不安全但高效。
post 方式提交不能在 url 中看见提交的内容,安全,可以传输大文件。
-->
<form action="我的第一个网页。.html" method="get">
<p>名字:<input type="text" name="username"></p>
<p>密码:<input type="password" name="pwd"></p>
<input type="submit">
<input type="reset">
</form>
</body>
</html>
文本框和单选框。
属性 | 说明 |
---|---|
type | 指定元素的类型。text、password 、checkbox、radio、submit、reset、file、hidden、image 和 button,默认为 text。 |
name | 指定表单元素的名称。 |
value | 元素的初始值。type 为 radio 时必须指定一个值。 |
size | 指定表单元素的初始宽度。当 type 为 text 或 password 时,表单元素的大小以字符为单位。对于其他类型, 宽度以像素为单位。 |
maxlength | type 为 text 或 password 时,输入的最大字符数。 |
checked | type 为 radio 或 checkbox 时,指定按钮是否是被选中。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>注册</h1>
<!-- 表单 form。
action。表单提交的位置。可以是网站,也可以是一个请求处理地址。
method。POST GET 请求方式。
get 方式提交可以在 url 中看见提交的内容,不安全但高效。
post 方式提交不能在 url 中看见提交的内容,安全,可以传输大文件。
-->
<form action="我的第一个网页。.html" method="get">
<p>名字:<input type="text" name="username"></p>
<p>密码:<input type="password" name="pwd"></p>
<p>性别:
<input type="radio" value="boy" name="sex" checked/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<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>
<p>按钮:
<input type="button" name="btn1" value="点击变长">
<!--<input type="image" src="../resources/image/0.jpg">-->
</p>
<p>下拉框。
<select name="列表名称" id="">
<option value="china">中国</option>
<option value="选项的值">美国</option>
<option value="选项的值" selected>瑞士</option>
<option value="选项的值">印度</option>
</select>
</p>
<!-- 文本域。-->
<p>反馈:
<textarea name="textarea" cols="50" rows="10">文本内容</textarea>
</p>
<!-- 文件域。-->
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
<input type="submit">
<input type="reset" value="清空表单">
</form>
</body>
</html>
搜索框 & 滑块 & 简单验证。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>注册</h1>
<!-- 表单 form。
action。表单提交的位置。可以是网站,也可以是一个请求处理地址。
method。POST GET 请求方式。
get 方式提交可以在 url 中看见提交的内容,不安全但高效。
post 方式提交不能在 url 中看见提交的内容,安全,可以传输大文件。
-->
<form action="我的第一个网页。.html" method="get">
<!-- 邮件验证。-->
<p>邮箱:
<input type="email" name="email">
</p>
<!-- URL。-->
<p>URL:
<input type="url" name="url">
</p>
<!-- 数字。-->
<p>
<input type="number" name="num" max="100" min="0" step="1">
</p>
<!-- 滑块。-->
<p>
<input type="range" name="voice" min="0" max="100" step="2">
</p>
<!-- 搜索框。-->
<p>搜索:
<input type="search" name="search">
</p>
<input type="submit">
<input type="reset" value="清空表单">
</form>
</body>
</html>
表单应用。
- readonly。
<p>名字:<input type="text" name="username" value="geek" readonly></p>
-
disabled。
-
hidden。
界面不显示,但点击提交后 name 和 value 会提交。
- 增强鼠标可用性。label。
点击文字“你点我试试”,text 输入框会激活,出现光标。
<p>
<label for="label1">你点我试试</label>
<input type="text" id="label1">
</p>
表单验证初级。
-
placeholder。提示信息。
-
required。非空。
-
pattern。正则。