前端学习之HTML

HTML基础

HTML，即超文本标记语言 — Hyper Text Markup Language。

何为超文本，可以理解为超出文本的范围。超文本包括：文字、图片、音频、视频、动画等。

标记语言：<>

HTML的发展史

1993年：HTML
1995年：HTML2.0
1996年：HTML3.2
1997年：HTML4.0
1999年：HTML4.01
2000年：XHTML1.0
2001年：XHTML1.1
XHTML2.0 由于改动过大，学习成本高，没被使用。
2013年：HTML5

目前网页中常用的是HTML5，其提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素、特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形、图表、图像和动画，以及不需要安装任何插件直接使用网页播放视频等。

HTML5的优势：

世界知名浏览器厂商对HTML5的支持
微软
Google
苹果
Opera
Mozilla
市场的需求
市场需要一个统一的标准
Wed兼容性的问题，修改bug的时间成本高
跨平台
这是天然的优势，因为是B/S开发

W3C标准

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

http://www.w3.org/

http://www.chinaw3c.org/

W3C标准包括：

结构化标准语言 — HTML、XML
表现标准语言 — CSS
行为标准 — DOM(文档对象模型)、 ECMAScript标准(—> JavaScript)

很多浏览器还停留在ES5规范上，但是开发人都使用的是ES6规范

常见的前端开发工具

常见的有：

记事本
Nodepad++
Subline
Dreamweaver
VScode(前端专业)
WebStorm（前端专业）
IDEA
…

使用IDEA创建一个前端项目：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个HTML</title>
</head>
<body>
我的第一个HTML
</body>
</html>

< body > 、< /body >等成对的标签，分别叫做开放标签和闭合标签。
单独呈现的标签(空元素)，如< hr/ >，意为用 / 来关闭空元素，称为自闭合标签。

HTML的基本结构

HTML 的基本结构：
所有的HTML 标签都以<>开头，以</>结尾。
正常的网页都要放在< body >标签中。

上图就是HTML 的基本结构，具体说明：

DOCTYPE文档类型，默认声明：表示告诉浏览器这个网页使用什么规范，默认使用的是HTML
title标签：网站的小标题名称
meta标签，用于描述信息，一般用来做SEO(Search Engine Optimization，搜索引擎优化)。

<!-- 建议规范编码，统一使用UTF-8-->
<meta charset="UTF-8">
<!-- 网站关键字描述 -->
<meta name="keywords" content="java">
<!-- 网站的描述-->
<meta name="description" content="学习java真快乐">

网站的基本标签

标题标签

标题标签用于标题的描述，可以描述六级标题，分别用< h1 >< /h1 >到< h6>< /h6 >来进行描述。

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

<!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>
</body>
</html>

段落标签

段落标签用于描述段落。用 < p >< /p >标签来表示。

<p></p>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>段落标签</title>
</head>
<body>
<p>
    CSDN介绍
</p>
<p>
    中国专业IT社区CSDN (Chinese Software Developer Network) 创立于1999年，致力于为中国软件开发者提供知识传播、在线学习、职业发展等全生命周期服务。
</p>
<p>
    旗下拥有：专业的中文IT技术社区： CSDN.NET；移动端开发者专属APP： CSDN APP、CSDN学院APP；新媒体矩阵微信公众号：CSDN资讯、程序人生、GitChat、CSDN学院、AI科技大本营、区块链大本营、CSDN云计算、GitChat精品课、人工智能头条、CSDN企业招聘；IT技术培训学习平台： CSDN学院；技术知识移动社区： GitChat；人工智能新社区： TinyMind；权威IT技术内容平台：《程序员》+ GitChat；IT人力资源服务：科锐福克斯；IT技术管理者平台：CTO俱乐部。
</p>
</body>
</html>

虽然我们可以使用换行标签< br/ >也能达到换行的目的，但是它和段落标签是有区别的。使用段落标签得到的每一段之间的间距是比较大的，但是使用 < br/ >标签得到的间距是比较小的。

换行标签

<br/>

水平线标签

<hr/>

字体样式标签

<em></em>    斜体
<strong></strong>    加粗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式标签</title>
</head>
<body>
<h1>Java</h1>
<p>
    <em>Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程</em>
</p>
<p>
    <strong>Java具有简单性、面向对象、分布式、健壮性、安全性、平台独立与可移植性、多线程、动态性等特点。Java可以编写桌面应用程序、Web应用程序、分布式系统和嵌入式系统应用程序等</strong>
</p>

</body>
</html>

特殊符号标签

空格、大于小于号、版权公式等都是特殊符号。

&nbsp;    空格符
&gt;      大于号
&lt;      小于号
&copy;    版权符号
要使用什么符号，我们可以使用 & ;来找

为什么会有空格符，是因为我们在写html程序的时候，我们以为写两个以上的空格会在程序运行时也显示相对应的空格数，但是实际上不论我们写了几个空格，只显示一个空格。此时就需要空格符来帮忙了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>特殊符号标签</title>
</head>
<body>
hello,&nbsp;&nbsp;&nbsp;&nbsp;world!
</body>
</html>

图像标签

常见的图像格式有：.jpg、.png、.jepg、.gif、.bmp
但是 .png会有浏览器兼容问题，一般使用 .jpg、.gif多一点。
我们使用图像标签 < img >。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片标签</title>
</head>
<body>
<img src="../statics/images/chang.jpg" alt="图片" title="风景" width="300" height="300">
</body>
</html>

src：资源图片，即图片的路径
alt：图片加载失败时，表示图片的问题，也即图片的描述。
title：鼠标放在图片上的悬浮提示
width：图片的宽
height：图片的高

超链接

超链接：简单来讲，就是指按内容链接、指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。
我们可以将超链接理解为：表示从一个地方跳转到另一个地方。

超链接的标签为：< a >< /a >，也称a标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
<!--<a href="https://www.baidu.com/" title="百度" target="_self">百度</a>-->
<a href="https://www.baidu.com/" target="_blank">
    <img src="../statics/images/chang.jpg" width="100" height="100">
</a>
</body>
</html>

href：表示的是要跳转的地址
target：表示的是目标打开的窗口是在当前页面打开，还是在新窗口打开。
_self：表示在当前页面打开
_blank：表示在新窗口打开

锚链接

锚链接有三种方式：

用于页面间指定位置跳转：可以快速定位目录
可以在同一页面中跳转
可以在不同页面中跳转

锚点：
在使用锚链接时，我们需要设置锚点。

<a name="markerA">A</a>

功能性标签
邮件链接：

借助第三方平台

块元素、行内元素

块元素：不论多少内容，都是独占一行的。如p标签、标题标签

行内元素：只能根据内容的长度来扩展。如a标签、strong、em等

列表、表格、媒体元素

列表

列表的作用是展示结构。列表分为：

无序列表
有序列表
自定义列表、

无序列表

无序列表可以用来进行导航、侧边栏新闻、在文章中一般会使用它来进行排列。无序列表标签为：< ul >< /ul >

<ul>
    <li></li>
</ul>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无序列表</title>
</head>
<body>
<ul>
    <li>数学</li>
    <li>语文</li>
    <li>英语</li>
</ul>

</body>
</html>

有序列表

有序列表一般用于问答试卷、测试，或者需要排序的场景。
有序列表标签为：< ol >< /ol >

<ol>
    <li></li>
</ol>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>有序列表</title>
</head>
<body>
<ol>
    <li>热搜1</li>
    <li>热搜2</li>
    <li>热搜3</li>
    <li>热搜4</li>
</ol>
</body>
</html>

自定义列表

自定义列表一般用在网页的底部，用于标记项。
自定义列表的标签为：< dl >< /dl >

<dl>
    <!--标题-->
    <dt></dt>
    <dd></dd>
</dl>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义列表</title>
</head>
<body>
<dl>
    <dt>科目</dt>
    <dd>语文</dd>
    <dd>数学</dd>
    <dd>英语</dd>
</dl>
</body>
</html>

表格

表格(table)结构简单且通用。

表格的基本结构：

表格标签为：< table > < /table >，表格的行为< tr >< /tr >，列为< td >< /td >

<table>
	<tr>
		<td></td>
	</tr>
</table>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<table border="1px">
    <tr>
        <td>1,1</td>
        <td>1,2</td>
        <td>1,3</td>
    </tr>
    <tr>
        <td>2,1</td>
        <td>2,2</td>
        <td>2,3</td>
    </tr>
</table>
</body>
</html>

跨行：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<table border="1px">
    <tr>
        <td rowspan="2">11</td>
        <td>22</td>
        <td>33</td>
    </tr>
    <tr>
        <td>111</td>
        <td>222</td>
    </tr>
</table>
</body>
</html>

rowspan代表所跨的行数。

跨列：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<table border="1px">
    <tr>
        <td colspan="3">111</td>
    </tr>
    <tr>
        <td>444</td>
        <td>555</td>
        <td>666</td>
    </tr>
</table>
</body>
</html>

colspan代表所跨的列数。

音频、视频

音频

音频，audio。
音频标签为 < audio > < /audio >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音频标签</title>
</head>
<body>
<audio src="../statics/videos/3a3.m4a" autoplay controls></audio>
</body>
</html>

src：代表音频的路径
controls：提供播放按钮、进度条、下载按钮、音量按钮。
autoplay：自动播放

视频

视频，video。
视频标签为 < video > < /video >

网页结构分析

一个网页主要分为三部分：

页面的头部

<header>
</header>

页面的主体
页面的尾部

<footer>
</footer>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页结构</title>
</head>
<body>
<header>
    这是头部
</header>

<nav>导航栏</nav>
<aside>侧边栏</aside>
<article>文章主体</article>
<section>独立区域</section>
<footer>
    这是尾部
</footer>

</body>
</html>

内联框架

内联框架：iframe。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
<iframe src="https://www.baidu.com" target="_self" width="300" height="300"></iframe>
</body>
</html>

表单

常见的网站的登录、注册、以及搜索框等，都可以视为是表单。

基础表单

表单的标签是< form >< /form>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础表单</title>
</head>
<body>
<form action="test.html" method="post">
    <p>用户名：<input type="text" name="username"></p>
    <p>密码：<input type="password" name="password"></p>

    <p>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </p>
</form>
</body>
</html>

action：提交的地址
method：提交的方式。有两种，一种是get，这种提交方式是会携带参数的，参数可以在url中看到，该方式不安全，且有大小限制。另一种方式是post，这种提交方式，参数不可见，该方式是安全的，且大小没有限制，一般常用该方式提交表单。
input标签是表示输入框的。name必须写上，该标签有13种类型。

表单元素

所有的表单元素都要写在form表单中，必须加上name属性，否则提交的时候会取不到值
表单元素有13种，如下：

文本框

文本框的类型是 text。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单元素</title>
</head>
<body>
<p>用户名：<input type="text" name="username" value="用户名" size="20" maxlength="10"></p>
</body>
</html>

value：文本框默认的初始值
size：文本框的长度
maxlength：文本框的最大输入长度

密码框

密码框的类型是password。

<!--密码框-->
<p>
    密码：<input type="password" name="password" size="20">
</p>

单选框

单选框的类型是radio。

<p>
    <input type="radio" value="男" name="sex">男
    <input type="radio" value="女" name="sex">女
</p>

value：表单提交的值
name：name的名字相同，那么会自动分组。单选框必须要分组。所以name必须要有，同时相同
checked：表示默认选中
disabled：表示禁用，即不能选
单选框默认没有值，需要在 input type=“radio” 后增加单选框的属性

复选框

复选框的类型是 checkbox。

<!--复选框-->
<p>
    <input type="checkbox" name="fruit" value="apple">苹果
    <input type="checkbox" name="fruit" value="banana">香蕉
    <input type="checkbox" name="fruit" value="orange">橘子
</p>

name：必填项，如果是分组，则名称一致
value：表单提交的值
checked：默认选中
disabled：禁用
默认没有值，需要在 input type=“checkbox” 后增加多选框的属性

下拉列表框

下拉列表框的标签是select。

<select>
        <option></option>
</select>

<!--下拉列表框-->
<!--下拉列表框-->
<p>
    <select name="科目">
        <option value="0"></option>
        <option value="1">语文</option>
        <option value="2" selected>数学</option>
        <option value="3">英语</option>
        <option value="4">物理</option>
    </select>
</p>

select：
name：组件名称，必填项
size：显示的数目，默认是1
option(选项)：
value：必填项
option标签中间写下拉框的值
selected：表示默认选中

按钮

按钮分为三种类型：

特定按钮

<p>
    <input type="submit">
    <input type="reset">
</p>

普通按钮

<p>
    <input type="button" value="点击">
</p>

会和JavaScript集合使用

图片按钮
type=“image”

<p>
    <input type="image" src="../statics/images/chang.jpg" width="100" height="50">
</p>

src表示图片的路径

文本域

文本域的标签是textarea。

<textarea></textarea>

<!--文本域-->
<p>
    <textarea name="textarea" cols="30" rows="10"></textarea>
</p>

cols：代表列
rows：代表行

文件域

表单有的时候会提交复杂的文件，会用到文件域，文件上传也会用到。
文件域的类型是 type=“file”

<form action="test.html" method="get" enctype="multipart/form-data">
    <input type="file" name="video">
</form>

邮箱

邮箱的类型是：type=“email”

<p>
    邮箱：<input type="email" name="email">
</p>

网址

网址的类型是：type=“url”

<!--网址-->
<p>
    url:<input type="url" name="url">
</p>

数字

数字的标签是：type=“number”

<p>
    <!--数字-->
    <input type="number" min="0" max="10" step="2"> 
</p>

滑块

滑块是可调节的，标签为 type=“range”

<p>
    <!--滑块-->
    <input type="range" name="range" min="0" max="100" step="10">
</p>

搜索框

搜索框的类型是：type=“search”

<p>
    <!--搜索框-->
    搜索框：<input type="search" name="search">
</p>

搜索框自带了关闭按钮。

表单的应用

表单的应用有以下几方面：

隐藏域
只读和禁用
标注
初级表单验证

隐藏域：
隐藏域的信息是不在网页上显示的。

<p>
    <input type="hidden" name="count" value="10">
</p>

只读和禁用：

<p>
    用户名：<input type="text" name="username" readonly>
</p>
<p>
    密码：<input type="password" name="password" disabled>
</p>

标注：
在填写输入框的时候，我们只能点击输入框来唤醒输入框，不能通过点击文字唤醒，但是通过标注我们可以做到通过文字来唤醒。
通过 for = “name” 来链接到表单中的指定id。

<p>
    <label for="name">用户名：</label>
    <input type="text" name="username" id="name">
</p>

初级表单验证：
进行表单验证的目的是为了减轻服务器的压力。

默认提示：
默认提示时告诉用户应该这么做。使用placeholder属性。

<p>
    用户名：<input type="text" name="username">
</p>
<p>
    密码：<input type="password" name="password" size="30" placeholder="密码为5-16位数字、字母或下划线">
</p>

必填：
必填表示必须填写该字段，使用required属性。

<p>
    密码：<input type="password" name="password" required>
</p>

正则表达式

<p>
    手机号码：<input type="password" name="password" pattern="^1[3578]\d{9}">
</p>