h5(html5)基础入门

学习目标

目标🎖️：

学习PC端网站布局，最终网站：品优购静态网站
精通网页布局，也是我们前端人员必备的技能，为后面学习 Javascript 打下坚实基础

资源网站🌐：

百度：www.baidu.com

W3C：www.w3school.com.cn

MDN：https://developer.mozilla.org/zh-CN/

学习路线

在这里插入图片描述

1. HTML 简介导读

目标：

能够说出网页的基本组成
能够说出什么是HTML
能够说出常用的浏览器
能够说出Web标准的三大组成分

1.1 网页

网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合

网页是网站中的 “一页” ，通常是 HTML 格式的文件，它要通过浏览器来阅读

网页是构成网站的基本元素，它通常由图片，链接，文字，声音，视频等元素组成，通常我们看到的网页，

常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML文件

1.1.1 什么是 HTML

HTML 指的是超文本标记语言 ( Hyper Text Markup Language) , 它是用来描述网页的种语言

HTML 不是一种编程语言 , 而是一种标己语言( markup language)

标记语言是一套标记标签 ( markup tag ）

所谓超文本，有两层含义：

它可以加入图片，声音，动画，多媒体等内容（超越了文本限制）
它还可以从一个文件跳转到另外一个文件，与世界各地主机的文件连接（超级链接文本）

1.1.2 网页的形成

网页是由网页元素组成的，这些元素是利用 html 标签描述出来，然后通过浏览器解析来显示给用户的

前端人员开发代码 ----> 浏览器显示代码（解析，渲染）----> 生成最后的 Web 页面

1.1.3 网页总结

网页是图片，链接，文字，声音，视频等元素组成，其实就是一个 HTML文件（后缀名为 html）

网页生成制作：有前端人员书写 HTML 文件，然后浏览器打开，就能看到了网页

HTML ：超文本标记语言，用来制作网页的一门语言，有标签组成的，比如图片标签链接标签视频标签等…

1.2 浏览器

网页是通过浏览器来展示的，关于浏览器我们要介绍一下两点：

常用的浏览器
浏览器内核

1.2.1 常用的浏览器

浏览器是网页显示，运行的平台，常用的浏览器有 IE ，火狐（Firefox），谷歌（chrome），safari和opera等

平常称为五大浏览器

1.2.2 浏览器内核

浏览器内核(渲染引擎)：负责读取网页中的内容，整理讯息，计算网页的显示方式并显示页面

浏览器	内核	备注
IE	Trident	IE、猎豹安全、360极速浏览器、百度浏览器
firefox	Gecko	可惜这几年已经没落了，打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。
Safari	webkit	现在很多人错误地把 webkit 叫做 chrome内核（即使 chrome内核已经是 blink 了）
chrome	Chromium/Blink	在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发
Opera	blink	现在跟随chrome用blink内核。

目前国内一般浏览器都会采用 Webkit/Blink 内核，如360，uc，qq，搜狗等

⭐1.2.3 Web 标准

Web 标准是由 W3C 组织和其他标准化组织制定的一系列标准集合，W3C（万维网联盟）是国际最著名的标准化组织

接下来围绕web标准我们学习以下两点：

为什么需要web标准

浏览器不同，他们显示页面或者排版就有些许差异

请添加图片描述

遵循Web标准除了可以让不同的开发人员写出的页面更标准、更统外,还有以下优点：

让Web的发展前景更广阔
内容能被更广泛的设备访问
更容易被搜寻引搜索
降低网站流量费用
使网站更易于维护
提高页面浏览速度
Web标准的构成

主要包括结构 ( Structure )、==表现 ( Presentation ) === 和行为 ( Behavior )三个方面

标准	说明
结构	结构用于对网页元素进行整理和分类，现阶段主要学的是 HTML
表现	表现用于设置网页元素的版式，颜色，大小等外观样式，主要指的是CSS
行为	行为是指网页模型的定义及交互的编写，现阶段主要学的是 JavaScript

Web 标准提出的最佳体验方案：结构，样式，行为相分离

简单理解：结构写到 HTML 文件中，表现写道 CSS 文件中，行为写到 JavaScript 文件中

1.2.4 Web 标准的构成

结构是重中之重

2. HTML 标签

目标：

能够说出标签的书写注意规范
能够写出HTML骨架标签
能够写出超链接标签
能够写出图片标签并说出 alt 和 title 的区别
能够说出相对路径的三种形式

2.1 HTML 语法规范

2.1.1 基本语法概述

HTML标签是由尖括号包围的关键词,例如<html>
HTML标签通常是成对出现的,例 <htm> 和 <htm> ,我们称为双标签。标签对中的第一个标签是
开始标签,第二个标签是结束标签
有些特殊的标签必须是单个标签(极少情况),例如 <br/>我们称为单标签

2.1.2 标签关系

双标签关系可以分为两类：包含关系 和 并列关系

包含关系：

请添加图片描述

<head><title></title>
</head>

并列关系：

请添加图片描述

<head><body></body>
</head>

2.1.3 第一个 HTML 网页

每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写

HTML 页面也称为 HTML 文档

<html><head><title>first tend</title></head><body>helloworld，this is my first HTML</body>
</html>

标签名	定义	说明
`<html></html>`	HTML 标签	页面中最大的标签，我们称为根标签
`<head></head>`	文档头部	注意在 head 标签中我们必须要设置的标签是title
`<title></title>`	文档的标题	让页面拥有一个属于自己的网页标题
`<body></body>`	文档的主体	元素包含文档的所有内容，页面内容基本都是放到 body 里面的

2.1.4 VSCode 工具

VScode 工具生成骨架标签新增代码

以下是必须写的代码：

<!DOCTYPE>标签

文档类型声明标签：作用就是告诉浏览器使用哪种 HTML 版本来显示网页

<!DOCTYPE html>

这句代码的意思是：当前页面采取的是 HTML5 版本来显示网页

注意：

<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前
<!DOCTYPE> 不是一个 HTML 标签，它就是文档类型声明标签
lang 语言

用来定义当前文档的显示语言

en 定义为英语
zh-CN 定义语言为中文

简单来说，定义为 en 就是英文网页，定义 zh-CN 就是中文网页

其实对于文档显示来说,定义成 en 的文档也可以显示中文,定义成 zh-CN 的文档也可以显示英文

这个属性对浏览器和搜索引擎还是有作用的，建议统一写为 zh-CN

charset 字符集

字符集( Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。
在 <head>标签内,可以通过 <meta> 标签的 charset属性来规定 HTML 文档应该使用哪种字符编码

<meta charset="UTF-8" />

charset 常用的值有:GB2312、BlG5、GBK 和 UTF-8 , 其中 UTF-8 也被称为万国码 , 基本包含了全世界所
有国家需要用到的字符

总结：

以上三个代码 vscode 自动生成基本不需要我们重写

<! DoCTYPE html> 文档类型声明标签,告诉浏览器这个页面采取htm15版本来显示页面
<htm|ang="en”> 告诉浏览器或者搜索引擎这是一个英文网站本页面采取英文来显示
< meta charset=“UTF-8”/> 必须写.采取UF-8来保存文字.如果不写就会乱码.具体原理后面分析

2.2 HTML 常用标签

⭐标题标签 `<h1>` - `<h6>`

<h1>我是一级标题
</h1>

**标签语义：**作为标题使用，并且依据重要性递减

**特点：**字体变粗变大，标题独占一行

具体效果：

⭐段落标签和换行标签

在网页中,要把文字有条理地显示出来,就需要将这些文字分段显示。在HTML标签中

<p>标签用于定义段落，它可以将整个网页分为若干个段落

<p>我是一个段落标签
</p>

特点：

文本会根据浏览器窗口大写自动换行
段落与段落之间有空隙

在HTML中,—个段落中的文字会从左到右依次欠排列,直到浏览器窗口的右端,然后才自动换行。如果希望
某段文本强制换行显示,就需要使用换行标签<br/>

**标签语义：**强制换行

特点：<br />是个单标签，<br />标签只是简单的开始新的一行，但段落不一样，段落之间有一些垂直的空隙

⭐文本格式化标签

在网页中，文字有时需要设置成粗体，斜体或下划线效果，这时就需要用到 HTML 中的文本格式化标签

使文字以特殊的方式显示

标签语义：突出重要性，比普通文字更重要

“⭐”为推荐使用：

语义	标签
加粗	⭐`<strong></strong>`或者 `<b></b>`
倾斜	⭐`<em><em>`或者 `<i></i>`
删除线	⭐`<del></del>`或者 `<s></s>`
下划线	⭐`<ins></ins>`或者 `<u></u>`

⭐盒子标签

简而言之就是用来装内容的

<div></div> :一行只能放一个大盒子
<span></span> : 一行可以放多个小盒子

<div>这是头部</div>
<span>今日价格</span>

效果如下

请添加图片描述

⭐图像标签

在 HTML 标签中，<img>标签用于定义 HTML 页面中的图像

<img src="图像URL" />

src是<img>标签的必须属性，它用于指定图像文件的路径和文件

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本（当图片不能显示时候显示的文字）
title	文本	提示文本（鼠标放到图像上，显示的文字）

在实际开发中，我们更倾向于修改宽或者高的其中一项，这样图像会等比例缩放

注意点：

可以拥有多个属性，且属性在标签名的后面
属性和属性不分先后顺序，且每个属性之间用空格分割
属性采取键值对的格式，即 key="value"的格式，属性=“属性值”

⭐图像标签和路径

目录文件夹：就是普通文件夹，里面存放我们制作网页所需的相关素材，比如 html文件，图片

路径可以分为：

相对路径
绝对路径

**相对路径：**以引用文件所在位置为参考基础，而建立出的目录路径

这里简单来说，图片相对于 HTML 页面位置

相对路径分类	符号	说明
同一级路径		图形文件位于 HTML 文件同一级如`<img src="1.png">`
下一级路径	/	图形文件位于 HTML 文件下一级如 `<img src="images/baidu1.png">`
上一级路径	…/	图形文件位于 HTML 文件上一级如 `<img src="../baidu1.png">`

同一级路径：

上一级路径：

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

例如：E:\Studyhtml 或者 https://i0.hdslb.com/bfs/archive/9e5f278027ae7f1e1933b6e4002870361da6c20b.png

这个不推荐使用

⭐超链接标签

在 HTML 标签中，<a>标签用于定义超链接，作用是从一个页面链接到另外一个页面

语法：<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>

属性	作用
href	用于指定链接目标的url地址。必须属性
target	用于指定连接页面的打开方式。`_self`为默认值，`_blank`为在新窗口中打开

外部链接，例如 <a href="http://www.baidu.com" > 百度</a>
内部链接，网站内部页面的相互连接，只要写链接的内部名称即可，例如 <a href="index.html">首页</a>
空链接，没有确定的目标链接的时候，<a href="#">空链接示意</a>
下载链接，如果href里面的地址是文件或者压缩包，会下载这个文件，注意格式是exe或者是压缩包格式
网页元素链接：在网页中的各种网页元素，如文本，图像，表格，音频，视频等都可以添加超链接
锚点链接，点击链接，可以快速定位到页面中的某个位置

在链接文本的href属性中，设置属性值为 #名字
找到目标位置标签，里面添加一个 id属性=刚才的名字

⭐注释

注释快捷键为 ctrl + /
注释以  结束

重点记住：空格、大于号、小于号这三个，其余的使用的很少，如果需要使用回头查阅即可

⭐表格标签

table 用来定义表格的标签
tr 用来定义表格中的行，必须嵌套在<table></table> 标签中
td 用来定义表格中的单元格，必须嵌套在<tr></tr> 标签中
th 用来定义表格中的表头，表头单元格里面的内容加粗居中显示

<body><table><tr>  <th>姓名</th>     <th>性别</th>    <th>年龄</th>        </tr><tr>  <td>林晓</td>     <td>男</td>     <td>18</td>          </tr>  <tr>  <td>林晓</td>     <td>男</td>     <td>18</td>          </tr>        <tr>  <td>林晓</td>     <td>男</td>     <td>18</td>          </tr>                        </table>
</body>

⭐表格属性

表格标签的属性实际开发并不常用，因为基本都是通过后面的CSS来设置的

属性名	属性值	描述
align	left,center,right	规定表格相对周围元素的对齐方式
border	1或者 ’’0‘’	规定表格单元是否拥有边框，默认为"0"，表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素
cellspacing	像素值	规定单元格之间的空白，默认2像素
width	像素值或百分比	规定表格的宽度

⭐表格结构标签

为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分

用<thead></thead> 标签表示表格的头部区域，<thead>内部必须拥有<tr>标签，一般是位于第一行
用<tbody></tbody> 标签表示表格的主体区域，主要是用于放数据本体
以上标签都是放在<table></table>标签中

⭐合并单元格

跨行合并：rowspan=“合并单元格的个数”
+跨列合并：colspan="合并单元格的个数"

合并单元格三部曲

先确定是跨行合并还是跨列合并
找到目标单元格，写上合并方式 = 合并的单元格数量，比如：<td colspan= “2" ></td>
删除多余的单元格

⭐列表标签

跟据使用场景可以分为三大类：无序列表，有序列表和自定义列表

无序列表：<ul>
有序列表：<ol>
自定义列表：<dl>

标签名	定义	说明
`<ul></ul>`	无序列表	里面只能包含li，没有顺序。li里面可以包含任何标签
`<ol></ol>`	有序列表	里面只能包含li，有顺序
`<dl></dl>`	自定义列表	里面只能包含dt和dd，dt和dd里面可以放任何标签

无序列表（重点）： 有序列表：

自定义列表：

无序列表：

    <ul><li>榴莲</li><li>臭豆腐</li><li>老八蜜汁小憨包</li><li>韭菜</li></ul>

无序列表的各个列表项之间没有顺序级别之分，是并列的
<ul>标签里只能是<li>，直接在 ul 里输入其他标签和文字是不合法的
<li>与</li>之间相当于一个容器，可以容纳所有元素
无序列表会带有自己的样式属性，但在实际开发中，我们会用 CSS 来设置

有序列表同上

自定义列表：

    <dl><dt>关于我们</dt>		头标签<dd>服务支持</dd>		子标签<dd>合作融资</dd><dd>保修查询</dd><dd>联系我们</dd></dl>

<dl></dl>里面只能包含 <dt> 和 </dt>
<dt></dd>个数没有限制，经常是一个<dt>对应多个<dd>

⭐表单标签

一个完整的表单通常由表单域，表单控件（表单元素）和提示信息3部分组成

表单域：

是一个包含表单元素的区域

在 HTML 标签中，<form> 标签用于定义表单域，以实现用户信息的收集和传递

<form> 会把它范围内的表单元素信息提交给服务器

属性	属性值	作用
action	提交至后台的url地址	用于指定接收并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式，其取值为get或post
name	表单域名称	用于指定表单的名称，以区分同一个页面中的多个表单域

表单控件 (表单元素)：

①input 输入表单元素

input输入表单元素
input是个单标签，type 属性设置不同的属性用来指定不同的控件类型(文本字段、复选框、单选按钮、按钮等)

type 属性的属性值及描述如下：

属性值	描述
button	定义可点击按钮(多数情况下，用于通过JavaScript启动脚本)
checkbox	定义复选框
file	定义输入字段和"浏览"按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段。该字段中的字符被掩码
radio	定义单选按钮
reset	定义重置按钮。重置按钮会清楚表单中的所有数据
submit	定义提交按钮。提交按钮会把表单数据发送到服务器
text	定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符

除 type 属性外，<input> 标签还有很多其他很多属性，其常用属性如下：

属性	属性值	描述
name	由用户自定义	定义 input 元素的名称
value	由用户自定义	规定 input 元素的值
checked	checked	规定此 input 元素首次加载时应当被选中
maxlength	正整数	规定输入字段中字符的最大长度

name 和 value 是每个表单元素都有的属性值，主要给后台人员使用
name 表单元素的名字，要求单选按钮和复选框要有相同的 name 值
checked 属性主要针对与单选按钮和复选框，主要作用是一打开页面就默认勾选某个表单元素

<label>标签

label标签用于绑定一个表单元素，当点击<lable>标签内的文本时，浏览器就会自动将焦点(光标)转到表单元素上，用来增加用户体验
label标签的 for属性应当与相关元素的id 属性相同

<label for="name">名字：</label>
<input type="text" id="name">

select下拉表单元素：

下拉表单元素
<select>中至少包含一对<option>
在<option>中定义 selected="selected" 时，当前项即为默认选中项。

<select><option>福建</option><option selected="selected">北京</option>

textarea文本域元素

用于定义多行文本输入的控件

使用场景：当用户输入內容较多的情况下,我们就不能使用文本框表单了,此时我们可以使用< textarea>标签

在表单元素中,< textarea>标签是用于定义多行文本输入的控件

使用多行文本输入控件,可以输入更多的文字,该控件常见于留言板,评论。

cols = “每行中的字符数” ， rows = “显示的函数”，我们在实际开发中不会使用，都是用CSS来改变大小

<form>今日感悟：<textarea cols="20" rows="7">今天学了很多的熬！</textarea>
</form>

❤️表单元素总结

表单元素我们学了三大组

input 输入表单元素
select 下拉表单元素
textarea 文本域表单元素
ecked 属性主要针对与单选按钮和复选框==，主要作用是一打开页面就默认勾选某个表单元素

<label>标签

label标签用于绑定一个表单元素，当点击<lable>标签内的文本时，浏览器就会自动将焦点(光标)转到表单元素上，用来增加用户体验
label标签的 for属性应当与相关元素的id 属性相同

<label for="name">名字：</label>
<input type="text" id="name">

select下拉表单元素：

下拉表单元素
<select>中至少包含一对<option>
在<option>中定义 selected="selected" 时，当前项即为默认选中项。

<select><option>福建</option><option selected="selected">北京</option>

textarea文本域元素

用于定义多行文本输入的控件

使用场景：当用户输入內容较多的情况下,我们就不能使用文本框表单了,此时我们可以使用< textarea>标签

在表单元素中,< textarea>标签是用于定义多行文本输入的控件

使用多行文本输入控件,可以输入更多的文字,该控件常见于留言板,评论。

cols = “每行中的字符数” ， rows = “显示的函数”，我们在实际开发中不会使用，都是用CSS来改变大小

<form>今日感悟：<textarea cols="20" rows="7">今天学了很多的熬！</textarea>
</form>

❤️表单元素总结

表单元素我们学了三大组

input 输入表单元素
select 下拉表单元素
textarea 文本域表单元素

h5(html5)入门

h5(html5)基础入门

学习目标

学习路线

1. HTML 简介导读

1.1.1 什么是 HTML

1.1.2 网页的形成

1.1.3 网页总结

1.2 浏览器

1.2.1 常用的浏览器

1.2.2 浏览器内核

⭐1.2.3 Web 标准

1.2.4 Web 标准的构成

2. HTML 标签

2.1 HTML 语法规范

2.1.1 基本语法概述

2.1.2 标签关系

2.1.3 第一个 HTML 网页

2.1.4 VSCode 工具

2.2 HTML 常用标签

⭐标题标签 <h1> - <h6>

⭐段落标签和换行标签

⭐文本格式化标签

⭐盒子标签

⭐图像标签

⭐图像标签和路径

⭐超链接标签

⭐注释

⭐表格标签

⭐表格属性

⭐表格结构标签

⭐合并单元格

⭐列表标签

⭐表单标签

❤️表单元素总结

❤️表单元素总结

相关文章

⭐标题标签 `<h1>` - `<h6>`