【Pink】前端基础之HTML

博主：夏那
发布时间：2020 年 12 月 23 日
178次浏览
暂无评论
4491字数
分类：计算机科学

pink 老师是一位很有天分，非常负责任的老师，能够把困难的知识讲解的简单，把枯燥的课堂变成风骚的笑场！PInk 老师，我爱您❤！！！

新知

快速生成无意义的拉丁字母：Lorem
原来锚点链接这么简单
标签、属性、值可根据编辑器为其分配的颜色来进行区分
201224对表单还不太熟悉
布局的概念和实际操作

关于学习

被动学习：听讲、阅读、听与看、示范/展示
主动学习：小组讨论、实作演练、转教别人/立即应用

学习路线

主要学习 PC 端网站布局，做到精通网页布局，前端人员的必备技能。
HTML5（20%） CSS3（50%） H5C3提高（10%）项目-品优购电商网站页面制作（20%）

HTML简介

网页的相关概念

网站是展示特定内容的网页的集合。
网页是由图片、文字、链接、声音、视频等元素组成。
HTML 超文本标记语言（Hype Text Mark Language）。为什么叫超文本？因为图片、声音、视频都超越了单纯的文字内容，还有链接，也不是普通的文字内容。

常用浏览器及内核

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

Web 标准

W3C(万维网联盟）是国际最著名的标准化组织。
通过标准，可以让不同开发人员写出的页面标准统一。
Web 标准提出的最佳体验方案：结构、表现、行为相分离。

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

HTML 标签

绝大多数都是双标签，单便签有但是很少。
标签关系可以分为包含关系和并列关系。

单标签汇总

<br>
<img src="图像url">

HTML 基本结构标签（骨架标签）

每个网页都会有一个基本的结构标签，页面内容也是在这些基本标签上书写的。
HTML 页面也被称为 HTML 文档。

VSCode 使用

新建文件（Ctrl + N），保存（Ctrl + S）
Ctrl + 加减号按键可以放大缩小视图
快捷生成页面骨架结构（!）
插件推荐：Chinese-simple | Open in browzer（保存后无法自动刷新） or Live server | Auto rename tags

Doctype 和 lang 以及字符集的作用

<!DOCTYPE html>不是 HTML 标签，而是文档类型声明标签，表示当前页面采取的是 HTML5 版本来显示网页。
lang 语言种类，en zh-CN fr 对你实际写什么无影响，但会触发浏览器的翻译提示。
charset（character Set）字符集，多个字符的集合，以便计算机能够识别和存储各种文字。通过<meta>标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。常用的值有：GB2312（简体）、BIG5（繁体）、GBK（国标）和 UTF-8，UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符。

标签语义

标签语义，标签的含义，即这个标签是用来干嘛的。比如标题标签、段落标签、换行标签等等。

标题、段落、换行标签

标题标签独占一行。

在代码页面选择空格或者换行是不行的，必须要有标签。

<h3>我是三级标题</h3>，语义：作为标题使用，并且重要性递减。

段落标签（paragraph）

换行（break）标签

体育新闻案例

见 Vscode

文本格式化标签

粗体、斜体、下划线等，突出重要性，比普通文字更重要。

粗体：<strong></strong> or <b></b>

斜体：<em></em> or <i></i>

删除线：<del></del> or <s></s>

下划线：<ins></ins> or <u></u>

div 和 span 标签

这两个标签是没有语义的，它们就是一个盒子，用来装内容的。

div 是 division 的缩写，用来布局，一个 div独占一行，这是大盒子。

span 标签也用来布局，一行上可以多个 span，这是小盒子。

图像标签

img 单标签和它的几个属性：src alt title width height （border 一般在 CSS 中设置）

属性采取键值对的格式，即 key = "value"

宽度和高度最好只修改一个，这样图片就会根据那个进行等比缩放，不至于被拉伸。

相对路径与绝对路径

相对路径是指从代码所在的这个文件出发，去找目标文件，即目标文件相对于 HTML 页面的位置。

相对路径的可移植性好，保密性好。

. 当前
./ 下一级
../ 上一级

链接标签

a 链接，anchor 锚的意思。

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

外部链接：到外面的网站。

内部链接：网站内部页面间的跳转。

下载链接：如果链接的是文件 .exe 或者 zip 压缩包，就会下载。

锚点链接：当点击链接时，可以快速定位到页面中的某个位置。

在 href 属性中，设置属性值为 #名字的形式，如 <a href="#two">第二集</a>
找到目标位置标签，里面添加一个 id 属性 = 刚才的名字，如<h3 id="two">第二集介绍</h3>

注释标签和特殊字符

注释便签： 快捷键：Ctrl + /

特殊字符：比如空格、大于号、小于号、，，> < （Non-Breaking Space | greet than | less than）

综合案例

详见 Vscode

表格

表格一般用来展示数据。

表格标签

<table></table>

<tr></tr>   // table row     一行

<td></td>  // table data   普通单元格

<th></th>  // table head  表头单元格会加粗居中显示

表格属性：一般通过 CSS 来调整，现在只是了解。

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

表格结构标签

可将表格分成表格头部和表格主体两大部分，分别为：thead tbody

合并单元格

跨行合并：rowspan 最上侧单元格为目标单元格，写合并代码
跨列合并：colspan 最左侧单元格为目标单元格，写合并代码

先确定是跨行还是跨列
找到目标单元格，写上合并方式=合并的单元格数量
删除多余的单元格

列表

列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。

列表项：<li></li>，li 相当于一个容器，可容纳所有元素，但是列表里只放 li

无序列表（重点）：<ul></ul> unordered list
有序列表：<ol></ol> ordered list
自定义列表（重点）：<dl></dl> <dt></dt> <dd></dd> definition list definition term definition description

| 标签名 | 定义 | 说明 |
| - | - | - |
| ul | 无序标签 | 里面只能有 li ，没有顺序，使用较多。li 里面可以包含任何标签 |
| ol | 有序标签 | 里面只能包含 li ，有顺序，使用相对较少。li 里面可以包含任何标签 |
| dl | 自定义列表 | 里面只能包含 dt 和 dd 。dt 和 dd 里可以放任何标签 |

表单

表单可用来收集用户信息。

表单的组成：表单域、表单控件（表单元素）、提示信息。

表单域

表单域是一个包含表单元素的区域，可以把它范围内的表单元素信息提交给服务器。

<form action="url" method="提交方式" name="表单域名称">

   各种表单元素控件

</form>

表单控件（表单元素）

输入表单元素：input <input type="属性值" name="value2" value=“”>
- 提交表单就是把value送到后端。
- 单选框和复选框可以设置 checked 属性，当页面打开的时候就可以默认选中这个按钮。
- input 的 type 属性值：text password radio checkbox submit reset button（搭配JavaScript来使用）file
下拉表单元素：select <select><option>选项1</option></select>
文本域表单元素：textarea 用户输入内容较多的情况下 <textarea></textarea>

label 标签

用于绑定一个表单元素，当点击 <label> 标签内的文本时，浏览器会自动将焦点（光标）转到对应的表单元素上，用来增加用户体验。

<label for = "gender">男</label>

<input type = "radio" name= "gender" id = "gender">

// label 标签的 for 属性对应的是 id 值

综合案例-注册页面

见 Vscode 。

查阅文档

搜索引擎
W3C school
MDN web docs

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复

评论 *

私密评论

名称 *

邮箱 *

地址

Sana
在内容的思考和创作上浅尝辄止，蜻蜓点水，并没有深入思考学生可能...
沉舟侧畔
希望优秀的人能进入体制内，扭转当前的颓势

【Pink】前端基础之HTML

夏那 • 2020 年 12 月 23 日

pink 老师是一位很有天分，非常负责任的老师，能够把困难的知识讲解的简单，把枯燥的课堂变成风骚的笑场！PInk 老师，我爱您❤！！！

新知

快速生成无意义的拉丁字母：Lorem
原来锚点链接这么简单
标签、属性、值可根据编辑器为其分配的颜色来进行区分
201224对表单还不太熟悉
布局的概念和实际操作

关于学习

被动学习：听讲、阅读、听与看、示范/展示
主动学习：小组讨论、实作演练、转教别人/立即应用

学习路线

主要学习 PC 端网站布局，做到精通网页布局，前端人员的必备技能。
HTML5（20%） CSS3（50%） H5C3提高（10%）项目-品优购电商网站页面制作（20%）

HTML简介

网页的相关概念

网站是展示特定内容的网页的集合。
网页是由图片、文字、链接、声音、视频等元素组成。
HTML 超文本标记语言（Hype Text Mark Language）。为什么叫超文本？因为图片、声音、视频都超越了单纯的文字内容，还有链接，也不是普通的文字内容。

常用浏览器及内核

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

Web 标准

W3C(万维网联盟）是国际最著名的标准化组织。
通过标准，可以让不同开发人员写出的页面标准统一。
Web 标准提出的最佳体验方案：结构、表现、行为相分离。

HTML 标签

绝大多数都是双标签，单便签有但是很少。
标签关系可以分为包含关系和并列关系。

单标签汇总

<br>
<img src="图像url">

HTML 基本结构标签（骨架标签）

每个网页都会有一个基本的结构标签，页面内容也是在这些基本标签上书写的。
HTML 页面也被称为 HTML 文档。

VSCode 使用

新建文件（Ctrl + N），保存（Ctrl + S）
Ctrl + 加减号按键可以放大缩小视图
快捷生成页面骨架结构（!）
插件推荐：Chinese-simple | Open in browzer（保存后无法自动刷新） or Live server | Auto rename tags

Doctype 和 lang 以及字符集的作用

<!DOCTYPE html>不是 HTML 标签，而是文档类型声明标签，表示当前页面采取的是 HTML5 版本来显示网页。
lang 语言种类，en zh-CN fr 对你实际写什么无影响，但会触发浏览器的翻译提示。
charset（character Set）字符集，多个字符的集合，以便计算机能够识别和存储各种文字。通过<meta>标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。常用的值有：GB2312（简体）、BIG5（繁体）、GBK（国标）和 UTF-8，UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符。

标签语义

标签语义，标签的含义，即这个标签是用来干嘛的。比如标题标签、段落标签、换行标签等等。

标题、段落、换行标签

标题标签独占一行。

在代码页面选择空格或者换行是不行的，必须要有标签。

<h3>我是三级标题</h3>，语义：作为标题使用，并且重要性递减。

段落标签（paragraph）

换行（break）标签

体育新闻案例

见 Vscode

文本格式化标签

粗体、斜体、下划线等，突出重要性，比普通文字更重要。

粗体：<strong></strong> or <b></b>

斜体：<em></em> or <i></i>

删除线：<del></del> or <s></s>

下划线：<ins></ins> or <u></u>

div 和 span 标签

这两个标签是没有语义的，它们就是一个盒子，用来装内容的。

div 是 division 的缩写，用来布局，一个 div独占一行，这是大盒子。

span 标签也用来布局，一行上可以多个 span，这是小盒子。

图像标签

img 单标签和它的几个属性：src alt title width height （border 一般在 CSS 中设置）

属性采取键值对的格式，即 key = "value"

宽度和高度最好只修改一个，这样图片就会根据那个进行等比缩放，不至于被拉伸。

相对路径与绝对路径

相对路径是指从代码所在的这个文件出发，去找目标文件，即目标文件相对于 HTML 页面的位置。

相对路径的可移植性好，保密性好。

. 当前
./ 下一级
../ 上一级

链接标签

a 链接，anchor 锚的意思。

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

外部链接：到外面的网站。

内部链接：网站内部页面间的跳转。

下载链接：如果链接的是文件 .exe 或者 zip 压缩包，就会下载。

锚点链接：当点击链接时，可以快速定位到页面中的某个位置。

在 href 属性中，设置属性值为 #名字的形式，如 <a href="#two">第二集</a>
找到目标位置标签，里面添加一个 id 属性 = 刚才的名字，如<h3 id="two">第二集介绍</h3>

注释标签和特殊字符

注释便签： 快捷键：Ctrl + /

特殊字符：比如空格、大于号、小于号、，，> < （Non-Breaking Space | greet than | less than）

综合案例

详见 Vscode

表格

表格一般用来展示数据。

表格标签

<table></table>

<tr></tr>   // table row     一行

<td></td>  // table data   普通单元格

<th></th>  // table head  表头单元格会加粗居中显示

表格属性：一般通过 CSS 来调整，现在只是了解。

表格结构标签

可将表格分成表格头部和表格主体两大部分，分别为：thead tbody

合并单元格

跨行合并：rowspan 最上侧单元格为目标单元格，写合并代码
跨列合并：colspan 最左侧单元格为目标单元格，写合并代码

先确定是跨行还是跨列
找到目标单元格，写上合并方式=合并的单元格数量
删除多余的单元格

列表

列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。

列表项：<li></li>，li 相当于一个容器，可容纳所有元素，但是列表里只放 li

无序列表（重点）：<ul></ul> unordered list
有序列表：<ol></ol> ordered list
自定义列表（重点）：<dl></dl> <dt></dt> <dd></dd> definition list definition term definition description

表单

表单可用来收集用户信息。

表单的组成：表单域、表单控件（表单元素）、提示信息。

表单域

表单域是一个包含表单元素的区域，可以把它范围内的表单元素信息提交给服务器。

<form action="url" method="提交方式" name="表单域名称">

   各种表单元素控件

</form>

表单控件（表单元素）

输入表单元素：input <input type="属性值" name="value2" value=“”>
- 提交表单就是把value送到后端。
- 单选框和复选框可以设置 checked 属性，当页面打开的时候就可以默认选中这个按钮。
- input 的 type 属性值：text password radio checkbox submit reset button（搭配JavaScript来使用）file
下拉表单元素：select <select><option>选项1</option></select>
文本域表单元素：textarea 用户输入内容较多的情况下 <textarea></textarea>

label 标签

用于绑定一个表单元素，当点击 <label> 标签内的文本时，浏览器会自动将焦点（光标）转到对应的表单元素上，用来增加用户体验。

<label for = "gender">男</label>

<input type = "radio" name= "gender" id = "gender">

// label 标签的 for 属性对应的是 id 值

综合案例-注册页面

见 Vscode 。

查阅文档

搜索引擎
W3C school
MDN web docs

新知

关于学习

学习路线

HTML简介

网页的相关概念

常用浏览器及内核

Web 标准

HTML 标签

单标签汇总

HTML 基本结构标签（骨架标签）

VSCode 使用

Doctype 和 lang 以及字符集的作用

标签语义

标题、段落、换行标签

体育新闻案例

文本格式化标签

div 和 span 标签

图像标签

相对路径与绝对路径

链接标签

注释标签和特殊字符

综合案例

表格

列表

表单

表单域

表单控件（表单元素）

label 标签

综合案例-注册页面

查阅文档

发表评论 取消回复

【Pink】前端基础之HTML

新知

关于学习

学习路线

HTML简介

网页的相关概念

常用浏览器及内核

Web 标准

HTML 标签

单标签汇总

HTML 基本结构标签（骨架标签）

VSCode 使用

Doctype 和 lang 以及字符集的作用

标签语义

标题、段落、换行标签

体育新闻案例

文本格式化标签

div 和 span 标签

图像标签

相对路径与绝对路径

链接标签

注释标签和特殊字符

综合案例

表格

列表

表单

表单域

表单控件（表单元素）

label 标签

综合案例-注册页面

查阅文档

发表评论取消回复