封面画师：画师JW     封面ID：78792385

什么是HTML

初始HTML

Hyper Text Markup Language（超文本标记语言），超文本包括：文字、图片、音频、视频、动画等。

W3C标准

World Wide Web Consortium（万维网联盟），成立于1994年，Web技术领域最权威和最具影响力的国际中立性技术标准机构。

http://www.w3.org/

http://www.chinaw3.org/

W3C标准

  • 结构化标准语言（HTML、XML）
  • 表现标准语言（CSS）
  • 行为标准（DOM、ECMAScript）

<body>、</body>等成对的闭合标签，分别叫开始标签和结束标签。单独呈现的标签（空元素），如<hr/>，叫作自闭合标签。

网页基本信息

<!DOCTYPE >：告诉浏览器我们需要使用什么规范

<head>：网页头部

<title>：网页标题

<meta>：描述性标签，用来描述网站的一些信息，一般用来做SEO（Search Engine Optimization：汉译为搜索引擎优化）。name属性可选值为keywords、description。

<body>：网页主体

网页基本标签

标题标签：<h1></h1> ~ <h6>``</h6>

段落标签：<p></p>

换行标签：<br/>

水平线标签：<hr/>

字体样式标签：粗体：<strong></strong> 斜体：<em></em>

注释：<!-- -->

空格：&nbsp; 在HTML源文件中写多个空格“ ”，在浏览器上浏览时只会出现一个空格。

大于：&gt great than

小于：&lt less than

版权符号©：&copy;

图像标签

<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，_self(默认)表示在当前页面打开链接，_blank表示在新页面打开链接。

锚链接

  1. 需要一个锚标记，使用name属性设置一个锚标记
  2. 跳转到标记，href的属性设置为 # + 锚标记
1
2
<a href="#" name="top">顶部</a>
<a href="#top" >回到顶部</a> 
1
2
3
4
5
<!-- first.html-->
<a href="#" name="down">底部</a>

<!--second.html-->
<a href="first.html#down"> 跳转到first界面的底部</a>

功能性链接

邮件链接：mailto

<a href="mailto:邮箱地址">点击联系我</a>

QQ链接：

搜索“QQ推广”，进入QQ推广的网页，登录自己的QQ，点击推广工具，选择填写提示语，然后复制代码到自己的网页即可。

行内元素和块元素

块元素

  • 无论多少内容，该元素都独占一行
  • 比如：p、h1 ~ h6 …

行内元素

  • 内容撑开宽度，左右都是行内元素的可以排在一行
  • 比如：a、strong、em …

列表标签

  • 什么是列表：列表就是信息资源的一种展示形式。他可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应信息。
  • 列表的分类：
    • 无序列表，应用于试卷、问答等
    • 有序列表，应用于导航、侧边栏等
    • 定义列表，公司网站底部等
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!-- 有序列表 -->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>C语言</li>
    <li>前端</li>
</ol>
<!-- 无需列表 -->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>C语言</li>
    <li>前端</li>
</ul>
<!-- 自定义列表 -->
<!-- 标签 -->
<dl>
    <!-- 列表名称 -->
    <dt></dt>
    <!-- 列表内容 -->
    <dd></dd>
    <dd></dd>
    <dd></dd>
    <dd></dd>
</dl>

表格标签

  • 使用表格的原因：简单通用、结构稳定
  • 基本结构：
    • 单元格
    • 行，table rows
    • 列，table data cell
    • 跨行
    • 跨列

行使用<tr></tr>表示，单元格使用<td></td>表示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- 表格 -->
<table border="1px">
    <tr>
        <!-- 跨列 -->
        <td colspan="4">1-1</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>
    </tr>
</table>

媒体元素

视频元素：video

<video src="path" controls autoplay></video>

其中，path表示视频文件路径(资源路径)；controls表示控制条，有了它视频才能在网页上播放；autoplay设置视频自动播放。

音频元素：audio

<audio src="path" controls autoplay></audio>

其中，path表示视频文件路径(资源路径)；controls表示控制条，有了它视频才能在网页上播放；autoplay设置视频自动播放。

注意：部分浏览器可能对视频、音频的自动播放进行了限制。

页面结构分析

元素名 描述
header 标题头部区域的内容（用于页面或页面中的一块区域）
footer 标记脚部区域的内容（用于整个页面或页面的一块区域）
section Web页面中的一块独立的区域
article 独立的文章内容
aside 先关内容或应用（常用于侧边栏）
nav 导航内辅助内容

例如：

1
2
3
4
5
6
7
8
9
<header>
    <h2>我是头部</h2>
</header>
<section>
    <h2>我是主体</h2>
</section>
<footer>
    <h2>我是脚部</h2>
</footer>

iframe内联框架

<iframe src="path" name="mainFrame"></iframe>

其中，path表示引用页面地址，mainFrame表示框架标识名。

1
2
3
4
5
6
<!--在界面内嵌入百度首页-->
<iframe src="https://www.baidu.com" name="hello" frameborder="0" width="1000px" height="800px"></iframe>
<!--name属性的使用-->
<iframe src="" name="hello" frameborder="0" width="1000px" height="800px"></iframe>
<a href="first.html" target="hello">点击跳转</a>
<!--点击超链接，在当前页面嵌入first.html界面-->

表单

1
2
3
<form method="POST" action="result.html">
...
</form>

其中，method规定如何发送表单数据，常用值用GET和POST；action表示向何处发送表单数据，即：表单提交的位置，其值可以是网站，也可以是一个请求处理地址。

GET可以在url中显示表单信息，但高效；POST则是隐藏，可以传大文件。

文本框与单选框

<input>标签（表单元素）属性说明：

属性 说明
type 指定元素类型。比如：text(默认)、password、checkbox、radio、submit、reset、file、hidden、image、button。
name 指定表单元素的名称
value 元素的初始值。type为radio时，必须指定一个值。
size 指定表单元素的初始宽度。当type是text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位。
maxlength type为text或password时，输入的最大字符数。
checked type为radio或checkbox时，指定按钮是否被选中。

type = "image"的效果与 type = “submit” 都可以提交表单。

例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form action="#" method="POST">
    <p>性别：
        <input type="radio" value="boy" name="gender" />男
        <input type="radio" value="girl" name="gender" /> 女
    </p>
    <p>爱好：
        <input type="checkbox" name="hobby" value="code" />写代码
        <input type="checkbox" name="hobby" value="chat" />聊天
        <input type="checkbox" name="hobby" value="game" />游戏
        <input type="checkbox" name="hobby" value="music" />音乐
    </p>
    <input type="submit" value = "提交">
    <input type="submit" value="清空">
</form>

列表框、文本域和文件域

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<form action="#" method="POST">
    <!-- 下拉框 -->
    <p>国家：
        <select name="country" >
            <option value="us">美国</option>
            <option value="chn" selected>中国</option>
            <option value="jp">日本</option>
            <option value="in">英国</option>
        </select>
    </p>
    <!-- 文本域 -->
    <p>个性签名：
        <textarea name="textarea" cols="30" rows="10"></textarea>
    </p>
    <!-- 文件域 -->
    <p>上传文件：
        <input type="file" name="files">
    </p>
    <input type="submit" value = "提交">
    <input type="submit" value="清空">
</form>

搜索框滑块和简单验证

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<form action="first.html" method="POST">
    <!-- 邮件验证 -->
    <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="5">
    </p>
    <!-- 滑块 -->
    <p>滑块：
        <input type="range" name="voice" min="0" max="100" step="2">
    </p>
    <!-- 搜索框 用户名和密码输入也可以使用 -->
    <p>搜索：
        <input type="search" name="search">
    </p>
    <input type="submit" value = "提交">
    <input type="submit" value="清空">
</form>

input的其他属性

1
2
3
4
5
6
7
8
9
<!-- 只读 -->
<input type="text" name="test1" value="TEST1" readonly>
<!-- 禁用 -->
<input type="text" name="test2" value="TEST2" disabled>
<!-- **隐藏** -->
<input type="text" name="test3" value="TEST3" hidden>
<!-- 增强鼠标可用性 可用于单选按钮 -->
<label for="mark">点我</label>
<input type="text" id="mark">

表单初级验证

为什么要进行表单的初级验证？增加安全性，减小服务器压力。

1
2
3
4
5
6
7
8
9
<!-- 提示信息 非空-->
<p>
    字符串：<input type="text" name="string" placeholder="请输入字符串" required>
</p>
<!-- 正则表达式 -->
<p>
    邮箱：<input type="text" name="diyEmail" 
              placeholder="请输入邮箱" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
</p>