Web前端入门 HTML

1、初识HTML

HTML是什么？
列表、表格与媒体元素
表单

菜鸟教程

HTML教程手册

1.1、什么是HTML?

Hyper Text Markup Language（超文本标记语言）

超文本包括：文字、图片、音频、视频、动画、超链接等

1.2、发展史

1.3、HTML5的优势

世界知名浏览器厂商对HTML5的支持
- IE（微软）
- Firefox（火狐）
- Chrome（谷歌）
- Safari （苹果）
- Opera（欧朋）
市场的需求
跨平台

在这里插入图片描述

1.4、Web标准

W3C

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

W3C
W3cChina

Web标准包括

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

1.5、渲染引擎

渲染引擎(浏览器内核)：浏览器中专门对代码进行解析渲染的部分

浏览器出品的公司不同，内在的渲染引擎也是不同的：

在这里插入图片描述
注：渲染引擎不同，导致解析相同代码时的速度、性能、效果也是不同的

1.6、常见IDE

记事本

DreamWeaver

IDEA

WebStorm

vscode

……

1.7、HTML基本结构

HTML网页基本结构

<!DOCTYPE html>
<html>
    <!--网页头部-->
    <head>
        <meta charset="UTF-8">
        <title>我的第一个网页</title>
    </head>
    <!--网页主体-->
    <body>
        <p>Hello，World!</p>
    </body>
</html>

注：< body>、等成对的标签，分别叫开放标签和闭合标签
单独呈现的标签（空元素），如 <hr/> ；意为用 /> 来关闭空元素

1.8、网页基本信息

DOCTYPE声明
<title>标签
<meta>标签

<!--DOCTYPE:告诉浏览器使用什么规范-->
<!DOCTYPE html>
<html lang="en">
    <!-- head标签代表网页头部 -->
    <head>
        <!-- meta描述性标签，它用来描述我们网站的一些信息 -->
        <!-- meta一般用来做SEO -->
        <!-- UTF-8 网页字符编码 -->
        <!-- keywords 搜索关键字 -->
        <!-- description 内容描述 -->
        <meta charset="UTF-8">
        <meta name="keywords" content="阿里巴巴采购批发,热销市场,网销宝">
        <meta name="description" content="阿里巴巴热销市场，精选一手热批好货源">
        <!--title 网页标题 -->
        <title>阿里巴巴热销市场 - 天下好货，一手掌握，采购批发，上1688</title>
    </head>
    <!--body标签代表网页主体-->

    <body>
        <p>Hello，World!</p>
    </body>

</html>

注：gb2312包含全部中文字符
utf-8 则包含全世界所有国家需要用到的字符
页面编码应与页面文件保存时的编码一致

1.9、网页的基本标签

排版标签

标题标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

特点：

文字都有加粗
文字都有变大，并且从h1到h6逐渐减小
独占一行

段落标签

<p>每日一习话。</p>
<p>善为国者，遇民如父母之爱子，兄之爱弟，闻其饥寒为之哀，见其劳苦为之悲。</p>

特点：

段落之间存在间隙
独占一行

换行标签

<p>青年来到大学，不是为了学习怎样成为社会机器中一个更有效的齿轮，<br/>
    而是为了自我教育和互相教育。梭罗说，一棵树长到一定的高度，才知道怎样的空气更适合。<br/>
    人也是如此。而大学，就是要将适合的空气置于青年鼻尖。</p>

特点：

单标签
让文字强制换行

水平线标签

<h1>七律·长征</h1>
<hr>
<p>红军不怕远征难，万水千山只等闲。</p>
<p>五岭逶迤腾细浪，乌蒙磅礴走泥丸。</p>
<p>金沙水拍云崖暖，大渡桥横铁索寒。</p>
<p>更喜岷山千里雪，三军过后尽开颜。</p>

特点：

单标签
在页面上显示一条水平线

文本格式化标签

场景：需要让文字有加粗、下划线、倾斜、~~删除线~~等效果

在这里插入图片描述
语义：右侧标签的写法主要突出重要性的强调语境

<strong>七律·长征</strong>
<hr>
<p><em>红军不怕远征难，万水千山只等闲。</em></p>
<p><em>五岭逶迤腾细浪，乌蒙磅礴走泥丸。</em></p>
<p><em>金沙水拍云崖暖，大渡桥横铁索寒。</em></p>
<p><ins>更喜岷山千里雪，三军过后尽开颜。</ins></p>

实际项目开发中选择标签的原则：标签语义化

即：根据语义选择对应正确的标签
如：需要写标题，就使用h系列标签
如：需要写段落，就使用p标签
……

好处：

对人：较容易理解，好记忆
对机器：有利于机器解析，对搜索引擎(SEO)有帮助

特殊符号标签

特殊符号以&开头，以;结尾

特殊符号	字符实体
空格
大于号(>)	>
小于号(<)	<
引号(")	"
版权符号@	©
已注册®	®
商标™	™

媒体标签

图片标签

常见的图像格式

GIF
JPG
PNG
BMP
……

<img src="path" alt="text" title="text"  width="x"  height="y" />

src：图像地址

alt：替换文本

title：鼠标悬停提示文字

width：图像宽度

height：图像高度

注：图片的width和height属性只需要给出一个值，另一个会等比例缩放！好处是图片不会变形

<!--data URL 格式：data:媒体类型;base64,数据-->
<img width="300" height="300" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAIAAAAP3aGbAAAACXBIWXMAA"/>

绝对路径与相对路径

绝对路径：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径

相对路径：从当前文件开始出发找目标文件的过程

相对路径和绝对路径表示法（大多数情况下都是使用相对路径）

./ – 表示当前目录，相对路径。

../ – 代表上一层目录，相对路径。

../../ – 上一层目录的上一层目录，相对路径。

/ – 根目录，绝对路径。

D:/chapter/demo – 物理路径，绝对路径。

音频标签：audio

<!-- src：指定要播放的视频文件的路径 -->
<!-- controls：提供播放、暂停和音量的控件 -->
<!-- source：定义媒介资源 -->
<!-- autoplay：自动播放 -->
<!-- loop：循环播放 -->
<!-- muted：静音 -->
<audio controls loop autoplay>
    <source src="./autio/纸短情长-北岛铃声.mp3" type="audio/mp3">
    <source src="./autio/纸短情长-北岛铃声.mp3" type="audio/ogg">
    你的浏览器不支持 audio标签。
</audio>

注：音频标签目前支持三种格式：MP3、Wav、 Ogg

视频标签：video

<video width="521" height="521" controls loop  autoplay muted>
	<!-- 自动播放(谷歌浏览器中需配合muted实现静音播放) -->
    <source src="./video/gfsj_sc.mp4" type="video/mp4">
    <source src="./video/gfsj_sc.mp4" type="video/ogg">
    您的浏览器不支持 video 标签。
</video>

<!--除标签不一致，用法同音频标签一致-->

注：视频标签目前支持三种格式：MP4、WebM、 Ogg

链接标签

<a href="path" target="目标窗口位置">链接文本或图像</a>

href：链接路径，跳转到那个页面

target：链接在哪个窗口打开

<!--文本链接-->
<a  href="https://www.baidu.com"  target="_blank">百度一下，你就知道</a>
<!--图像链接-->
<a href="https:www.baidu.com" target="_blank"><img src="./image/1.png" width="540" height="285" alt="百度" title="百度一下"/></a>

self默认值表示在当前页面打开；
blank 在新窗口打开
parent 在父级框架中打开
top 在最顶层中打开

<!--页面间链接-->
<a href="https://www.tmall.com/">点击跳转淘宝页面</a>

<!--锚链接-->
<!--创建一个标记 id  name也可以实现创建一个标记，推荐使用id-->
<!--跳转到标记 #锚点名称-->
<a href="#fruits">水果</a>
<a href="#vegetables">蔬菜</a>

<h1><a href="#" id="fruits">水果</a></h1>
<h1><a href="#" id="vegetables">蔬菜</a></h1>

<!--功能性链接
邮件链接：mailto:
QQ链接:
-->
<a href="mailto:[email protected]">点击联系我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img src="https://pub.idqqimg.com/wpa/images/counseling_style_53.png" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>

<!--不同页面间锚链接-->
<a href="我的第一个网页.html#speak">页面间锚链接</a>

1.10、行内元素和块元素

块元素
- 无论内容多少，该元素独占一行
- (p、h1~h6…)
行内元素
- 由内容撑开宽度，左右都是行内元素可以排列在一行
- (a、strong、em、span…)

<p>我是p元素</p>
<h1>我是标题h1</h1>
<a href="#">我是超链接a元素</a>
<strong>我是strong元素</strong>

2、列表与表格

2.1、什么是列表？

列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获取相应的信息

2.2、列表的分类

无序列表
有序列表
定义列表

<ul>
    <li>Java</li>
    <li>Python</li>
    <li>C++</li>
    <li>MySQL</li>
    <li>运维</li>
</ul>

无序列表的特性

没有顺序，每个<li>标签独占一行（块元素）
默认<li>标签项前面有个实心小圆点
一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等

<ol>
    <li>Java</li>
    <li>Python</li>
    <li>C++</li>
    <li>MySQL</li>
    <li>运维</li>
</ol>

有序列表的特性

有顺序，每个<li>标签独占一行（块元素）
默认<li>标签项前面有顺序标记
一般用于排序类型的列表，如试卷、问卷选项等

<dl>
    <dt>学科</dt>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>MySQL</dd>
    <dd>运维</dd>
</dl>

定义列表的特性

没有顺序，每个<dt>标签、<dd>标签独占一行（块元素）
默认没有标记
一般用于一个标题下有一个或多个列表项的情况

2.3、表格

为什么使用表格？

简单通用
结构稳定
历史很长久

基本结构

表格由单元格、行和列组成

跨行：rowspan

跨列：colspan

table标签用于定义一个表格空间

caption：定义table表格标题（标题的位置跟caption标签出现的位置没有关系）
thead：用于划分表头区域
tbody：用于划分表体区域
tfoot：用于划分表位区域
tr：用于定义每个区域内的行
td：用于定义每个区域内的列

<table border="1">
    <caption>学生信息</caption>
    <thead>
        <th>姓名</th>
        <th>年级</th>
        <th>考试成绩</th>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>3班</td>
            <td>88</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>2班</td>
            <td>98</td>
        </tr>
        <tr>
            <td>小赵</td>
            <td>1班</td>
            <td>79</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2"></td>
            <td>265</td>
            <caption>666</caption>
        </tr>
    </tfoot>
</table>

运行效果

2.4、浏览器兼容性

什么是浏览器兼容性问题？

所谓的浏览器兼容性问题，是指由于不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况

浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页之间的兼容问题

2.5、HTML5的结构元素

有语义的布局标签

场景：在HTML5新版本中推出了一些有语义的布局标签供开发者使用

标签名	描述
header	网页头部
footer	网页底部
section	网页区块
article	网页文章
aside	网页侧边栏
nav	网页导航

注：上述布局标签主要是做手机端网页较为常用的！

2.6、iframe内联框架

<!-- 使用iframe元素配合超链接元素实现不同页面的嵌套 -->
<!-- 在被打开的框架上加name属性 -->
<!-- 超链接上设置target目标窗口属性为希望显示的框架窗口名 -->
<p><a href="https://www.tmall.com/" target="taobao">淘宝</a></p>
<p><a href="http://note.youdao.com/" target="taobao">有道云笔记</a></p>
<p><a href="https://www.aliyun.com/" target="taobao">阿里云</a></p>

<iframe src="https://ai.taobao.com/" frameborder="0" name="taobao" width="100%" height="5100" scrolling="no"></iframe>

src：引用页面地址
name：框架标识名
width：宽度
height：高度
frameborder：是否显示边框 0不显示，1显示
scrolling：显示滚动条 yes显示，no不显示

3、表单

3.1、什么是表单？

表单主要用来制作动态网页，方便和用户进行交互
用于在网页内手机收集信息的入口标签，常见于注册、登录、搜索

3.2、表单语法

<!-- form  表单
action：表单提交的位置，可以是网站，也可以是一个请求处理地址
method：提交方式 get post(常用) 
get方式提交:我们可以在url中看到我们提交的信息，不安全，高效。
post :比较安全，传输大文件。
-->
<form action="https:www.baidu.com" method="POST">
    <p>用户名：<input type="text" name="userName" id="userName"></p>
    <p>密码<input type="password" name="pwd" id="pwd"></p>
    <p>
        <input type="submit" name="submit" id="submit" value="提交">
        <input type="reset" name="reset" id="reset" value="重置">
    </p>
</form>

表单元素格式：

<input  type="text"  name="fname" value="text"/>
<!-- 元素类型	元素名称	默认值 -->

属性	说明
type	指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默认为 text
name	指定表单元素的名称(表单分组)
value	默认初始值
size	指定表单元素的长度
maxlength	输入的最大字符数
checked	是否是被选中

3.2、表单元素

input系列

<form action="https:www.baidu.com" method="post" enctype="multipart/form-data">
    <!-- input  type= "text" 文本框 -->
    <p>用户名：<input type="text" name="userName"></p>
    <!-- input type = "password" 密码框  -->
    <p><input type="password" name="pwd"></p>
    <!-- input type="radio" 单选框按钮  value：单选框的值  name：表示组 -->
    <p>
        性别：
        <input type="radio" name="gender" value="boy" checked> 男
        <input type="radio" name="gender" value="girl"> 女
    </p>
    <p>
        <!-- input type = "checkedbox" 多选框 -->
        <input type="checkbox" name="hobby" value="swim">游泳
        <input type="checkbox" name="hobby" value="game">打游戏
        <input type="checkbox" name="hobby" value="moive">看电影
        <input type="checkbox" name="hobby" value="basketball">打篮球
        <input type="checkbox" name="hobby" value="code" checked>敲代码
    </p>
    <!-- 按钮 
		input type="button" 普通按钮
		input type="image"  图片按钮
		input type="submit" 提交按钮
		input type="reset"  重置按钮
		<button>按钮</button>
	-->
    <p><input type="button" value="我是普通按钮，我没有提交能力"></p>
    <p><button>我是按钮，我具有提交能力</button></p>
    <p><input type="image" src="./image/23.jpg" width="200" height="60"></p>
    <p><input type="submit" name="submit" id="submit" value="提交"></p>
    <p><input type="reset" name="reset" id="reset" value="重置"></p>
    
    <!-- input type="file" 文件域 默认只能上传单个文件-->
	<p><input type="file" name="file" value="file"></p>
	
	<!-- input type="file" 文件域 添加 multiple 属性可以上传多个文件-->
	<p><input type="file" name="introduce" value="introduce" multiple></p>
	
    <!-- input type="email" 邮箱  自动验证Email地址格式是否正确 -->
    <p><input type="email" name="email"></p>
    
    <!-- input type="url" 网址  自动验证URL地址格式是否正确 -->
    <p><input type="url" name="userUrl"></p>
    
    <!-- input type="number" 数字 max 最大值 min 最小值 step 数字 间隔 -->
    <p><input type="number" name="number" max="100" min="1" step="5"></p>
    
    <!-- input type="range" 滑块 同数字用法一致 -->
    <p><input type="range" name="range"></p>
    
    <!-- input type="search" 搜索框 -->
    <p><input type="search" name="search"></p>
</form>

type=button和type=submit的区别：

都是按钮，button是普通按钮。功能需要配合js实现。
submit（提交）点击后会默认就会提交整个表单
<button>按钮</button>：也具有提交能力
image：也具有提交能力

下拉菜单

<!-- 
	下拉框，列表框
		name：列表名称
		selected 默认选中
-->
<select name="country">
    <option value="China" selected>中国</option>
    <option value="USA">美国</option>
    <option value="Britain">英国</option>
    <option value="India">印度</option>
</select>

多行文本域

<!-- textarea 多行文本域 cols 显示的列数 rows 显示的行数 -->
<textarea name="feedback" cols="30" rows="10"></textarea>

3.3、表单的高级应用

隐藏域
只读
禁用

<!-- input type="hidden" 隐藏域  -->
<p><input type="hidden" name="hidden"></p>

<!-- H5标准中，规定对于布尔类型的属性，属性值可以省略 -->
<p>
    <input name="name" type="text" value="张三" readonly>
    <input type="submit" value="保存" disabled>
</p>

hidden：隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器。
readonly：只读服务器方不希望用户修改数据，只是要求这些数据在表单中显示
disabled：禁用只有满足某个条件后，才能使用某项功能。例如，只有用户同意注册协议后才允许单击”注册“按钮

3.4、表单元素的标注

lable标签

为什么要使用标注？

增强鼠标的可用性
自动将焦点转移到与该标注相关的表单元素上
增强用户体验

方式一：

使用label标签把内容(如：文本)包裹起来
在表单标签上添加id属性
在label标签的for属性中设置对应的id属性值

<!-- 
	label 元素定义标注（标记）
	for 属性规定 label 与哪个表单元素绑定 
	id值  表示与 label 捆绑的元素
-->
<p>
    <label for="uName">用户名:</label>
    <input type="text" name="userName" id="uName" placeholder="请输入你的用户名"/>
</p>

方式二：

直接使用label标签把内容(如：文本)和表单标签一起包裹起来
需要把label标签的for属性删除即可

<p>
    <label>
        密码：
        <input type="password" name="pwd" placeholder="请输入你的密码">
    </label>
</p>

3.5、表单的初级验证

为什么要进行表单验证？

表单验证的好处

减轻服务器的压力
保证数据的可行性和安全性

表单初级验证的方法

placeholder （提示）
required （非空验证）
pattern （正则表达式）

<!-- 
	描述文本框期待用户输入何种内容
	提示语默认显示,当用户输入提示语消失 
-->
<input type="search" name="search"  placeholder="请输入要搜索的关键字"/>

<!-- 规定文本框填写内容不能为空，否则不允许用户提交表单 -->
<input type="text" name="userName" required>

什么是正则表达式？

转载

脚本之家

<!-- 用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单 -->
<input type="text" name="tel"  required pattern="^1[358]\d{9}" />