根据慕课网零基础前端体系课程总结笔记。这是第一周的内容总结笔记。文章可能略显简单或者纰漏，之后慢慢修改。

HTML5语法与基础标签

简介

本次课程旨在介绍HTML5的基础知识和应用，包括互联网基本原理、HTML语言及其标签使用、以及HTML5新增特性。课程内容涵盖了创建首个网页、浏览网页方法、HTML元素结构、字符集设定、元标记、段落和标题标签，以及DIV标签的应用。

互联网基本原理

在本地开发，在服务器共享：

程序员在本地计算机上使用HTML、CSS、JS开发程序后，将这些文件上传至服务器以便用户访问。服务器具有共享文件能力，通过域名访问特定文件夹中的文件。更新服务器上的网页或程序只需在本地继续开发并上传新版本

理解HTTP协议：从请求到响应的过程：

用户通过输入网址或扫描二维码发起HTTP请求，请求被服务器接收并解析，服务器找到相应的文件后返回HTTP响应，完成网页显示过程。

深入理解HTTP协议及其在Web开发中的应用：

HTTP协议是互联网数据传输的应用层基础协议，由请求和响应组成。前端关注页面的美观和互动效果，后端处理数据查询和逻辑运算。学习编程前，应先掌握HTML、CSS和JavaScript等前端技术。

创建第一个网页

创建网页的两种方法：

  • 首先，你需要创建一个空白文件夹并在VS Code编辑器中打开它。接着，你可以使用快捷键Ctrl+N新建文件，并记得手动将文件类型设置为HTML。

  • 你也可以通过点击文件夹图标来新建文件并命名。这两种方法都可以帮助你在VS Code中成功创建HTML文件

HTML骨架生成基础：

通过输入感叹号并按下Tab键可以在编辑器中自动生成HTML5骨架。要成功生成HTML骨架，必须确保网页已以HTML格式保存。未保存或格式错误的网页无法触发智能感应。此外，还需注意保持编辑器中的文件未被锁定以便进行保存。（新版VSCode是输入html:5 回车）

浏览网页的方法

浏览方法1：

浏览方法2：

认识HTML5骨架

基本骨架：

字符集

html5的配置项:

charset属性的作用是告知<meta>标签设置的是何种字符集

UTF-8与GB2312字符集的特点及其应用:

UTF-8是一种全球通用的字符集，支持全球多国语言和大量图形字符，但占用空间较大。GB2312字符集是中国制定的标准，仅包含汉字、英文及少量其他语言字符，节省空间但不支持所有国际字符。选择合适的字符集可以提高网页加载速度并确保正确展示文本

Title、关键词与页面描述

HTML中的title标签及其重要性:

title标签用于设定网页标题，直接影响浏览器标签页显示和搜索引擎的排名。合理设置title属性有助于提升网页的可识别性和 SEO 效果，是网页优化的重要手段之一。

1
<title>标题</title>

设置meta标签的关键词和页面描述

通过meta标签来设置网页的关键字和描述，强调关键字（Keywords）和描述（Description）的重要性。

1
2
<meta name='Keywords' content='关键词，博客'>
<meta name='Description' content='这是一个页面描述'>

认识标签

HTML是一种用于创建网页的标准标记语言，其中标签扮演着关键角色。标签通常以成对形式存在，由起始标签和结束标签构成，共同赋予网页元素特定的功能和结构。通过使用不同的标签，可以实现如段落、标题等多样化的排版效果，每个标签都有其独特的语义，从而准确表达页面内容的意图

标题和段落

标题H系列标签的基本用法

H1标签的语义重要性很大，应该合理使用的重要性，避免被搜索引擎认为作弊，不收录

段落P标签的基本用法

段落必须包含在P标签中以实现换行效果

div标签

DIV标签的作用与应用

DIV标签用于组合相关内容，实现网页结构清晰划分。可单独使用或配合CSS进行布局设计，形成DIV+CSS布局形式，是前端网页制作的基础。

HTML5特性

空白折叠现象：文字和文字之间的多个空格、换行会被折叠成一个空格

标签“内壁”和文字之间的空格会被忽略

转义字符：

HTML注释的重要性及使用方法：

HTML注释对于提高代码可读性和维护性至关重要，它们帮助开发者和同事理解代码的功能和逻辑。在VS Code编辑器中，可以使用CTRL + 斜杠快捷键快速插入注释。注释内容用于解释代码功能，不会显示在最终网页中。实践时，可以在不同的HTML元素（如DIV）周围添加注释，以标明其用途

列表标签

简介

这节课我们将要先学习无序列表，有序列表和定义列表。列表标签实际上是有三种，无序、有序和定义。我们将分别通过三节课来详细学习使用它们。

无序列表

无序列表的基本概念与实现：

无序列表用于没有特定顺序的项目列表，如购物清单。无序列表由ul标签和li标签组成，其中ul表示无序列表，li表示列表项。浏览器默认在每个列表项前添加小圆点。

无序列表的正确用法：

无序列表是一种父子组合标签，需与子标签li配合使用，且需注意缩进来提高代码可读性。子标签li不能独立存在或作为其他元素的子标签。ul只能放li，li可以放任何其他标签

无序列表嵌套

ul只能放li，li可以放任何其他标签，以下嵌套是合法的

无序列表的type属性：HTML5中的无序列表可以通过type属性设定前导符号样式，但已废弃，推荐使用CSS。type属性可选值包括disk（默认实心圆）、circle（空心圆）和square（实心方块）。无序列表在网页布局中常见于导航栏和菜单项。

有序列表

了解和应用有序列表ol标签：

有序列表（ol）是一种具有明确顺序的列表，适用于展示从1开始递增的序列，如考试成绩。在HTML中，ol标签用于创建有序列表，其子元素默认会自动获得递增的序号

OL 标签属性介绍

ol 标签用于创建有序列表，其 type 属性可设定编号样式：小写/大写字母或数字，支持 Roman 数字。此外，ol还具有 start 属性，用于设置列表编号的起始值，需为整数。在网页设计中，可通过 `改变编号的视觉表现，实现非数字编号方式。

HTML5 有序列表新特性：reverse属性应用

HTML5新增ol列表reverse属性，用于指定列表项倒序排列。该属性无需赋值即可生效，与start属性配合使用时需注意避免数值混乱。

定义列表

示例：DD是对DT的解释说明。

多媒体与语义化标签

简介

先学习图片与超链接标签，分为两个小节，一图片标签，二超级链接。其次学习音频和视频标签，最后学习大纲与语义化标签，分为两个小节，一大纲标签，二语义化标签。

图片标签

1
<img src="img/1.jpg">
  • img是images的缩写，是html5图片标签
  • src是source的缩写，是图片的引用的哪个图片地址
  • img/1.jpg是图片路径

图片要复制到项目文件夹中：

图片路径要正确：

图片只是被引入：

img标签的alt属性

网页支持图片格式：

相对路径和绝对路径：

超级链接

超级链接是将网页和网页连结到一起的方法，是互联网成网的原因

1
<a href=“2.html” title="my is a title" target=“black”>去第二个网页</a>

href支持相对和绝对链接

title属性值代表鼠标悬停时的文字

target定义a标签是否在新窗口打开链接

a标签可以包裹img标签，给图片添加超链接

a标签可以给页面添加锚点，通过#号ID跳转。

a标签指向exe、zip、rar等格式文件时自动变成下载链接

有mailto:前缀的自动变成邮箱连接，自动打开邮箱应用，如：<a href="mailto:[email protected]">发邮件</a>

有tel:前缀的自动变成邮箱连接，自动打开邮箱应用，如：<a href="tel:110">打电话</a>

音频和视频

曾几何时，在网页中插入音频和视频需要借助Flash，今天Flash技术已经快要被淘汰，HTML5可以轻松在网页中插入音频和视频

Audio 标签基础与使用

1
<auto src="music/1.mp3" controls autoplay loop></auto>

兼容到IE9；

controls 显示控件；

autoplay 自动播放；

loop：循环播放；

常用格式有mp3和ogg；

Video标签基础与应用

1
<video src="video/1.mp4" controls autoplay loop></video>

兼容到IE9；

controls 显示控件；

autoplay 自动播放；

loop：循环播放；

常用格式有mp4;

大纲标签

区块标签语义，HTML5引入新标签如<section>、<article>、<aside>等，以提高网页结构的清晰度和搜索引擎的抓取效率。这些标签增强了文档的语义表达，使得网页代码更加可读，同时优化了用户体验。

语义化标签

span标签：

span标签用于标示文本块，无显式样式但可结合CSS调整，展现其灵活性。BUI标签（加粗、下划线、倾斜）虽已被CSS替代，在特定情况下仍可使用以强调文本。

b、u、i与 strong, em, mark标签：

figure、figcaption标签

figure元素代表一段独立的内容,与说明figcaption配合使用，它是一个独立的引用单元，比如建议读者拓展视野的图片等，当这部分转移到附录中或者其他页面时不会影响到主体

表单标签

简介

这节课我们来学习表单标签。首先我们来进行课程简介。第一部分内容就是表单的创建。第二部分内容我们要学习基本控件。首先我们要用两节课的时间来学习基本控件，第三节课我们要去学习HTM5中新增的表单控件。

表单创建

表单是什么：

表单用来收集信息，比如注册、登录、发送评论反馈、购买商品等等

表单的创建
所有HTML表单都以一个form元素开始；

基本控件

单行文本框：

1
<input type='text' value='this is value' placeholder='请输入一个值' disable>

input有type的属性，属性值有text表示是一个文本框，password是一个密码款

value属性是已经填好的值

placeholder属性是提示词，

disable属性是用户不可以输入

单选按钮：

1
<input type='radio' name=‘radio1’ value='提交值' checked>

单选按钮应具有相同的name属性以实现互斥选择，且必须包含value属性以指定向服务器提交的值。可以通过添加checked属性使某些选项默认选中

多选选按钮：（复选框）

使用type属性值被设置为checkbox的input元素可以创建复选框

1
<input type='checkbox' name=‘radio1’ value='提交值' checked>多选选按钮

label标签：

label标签用来将文字和单选按钮进行绑定，用户单击文字的时候也视为点击了单选按钮

1
2
3
<label>
    <input type='checkbox' name=‘radio1’ value='提交值' checked>多选选按钮
</label>

密码框：

使用type属性值被设置为password的input元素可以创建密码框

下拉框：

select标签表示下拉菜单，option是它内部的选项

1
2
3
4
5
<select>
	<option value="alipay">支付宝</option>
	<option value="wx">微信</option>
	<option value="bank">网银</option>
</select>

多行文本框

textarea表示多行文本框

rows和cols属性，用于定义多行文本框的行数和列数

1
<textarea rows="30" cols="10"></textarea>

三种按钮：

input 类型总结：

新增的表单控件

HTML5引入丰富input类型：color、date、time等，提升用户体验与交互性。email、number、range等控件增强了数据验证功能，无需额外脚本即可实现基本的输入校验，如格式检查和必填项提示，提高开发效率和数据准确性。

datalist控件
datalist控件可以为输入框提供一些备选项，当用户输入的内容与备选项文字相同时，将会显示智能感应

表格标签

简介

这节课我们来学习表格标签。首先我们来看课程简介。第一部分我们要讲解表格的基本使用，我们要去讲解表格标签到底是什么。接下来我们要学习复杂表格，分为两部分内容，一单元格的合并，二表格的其他特性。

表格标签

什么是表格：

认识表格标签：

HTML5中的表格由table标签定义，tr标签表示表格行，而td标签代表表格单元格。为了形成三行四列的表格布局，需要在table标签内放置三个tr标签，每个tr标签内放置四个td标签。这种结构确保了表格的行和列对应关系清晰可见，便于理解和使用HTML构建复杂的表格布局。

caption标签：是添加表格标题

单元格合并

colspan和rowspan的使用：

通过设定TD或TH的colspan属性可以实现单元格的合并，达到省略某些单元格的目的。例如，将单元格A设置为跨越两列，E设置为跨越三列，可以使表格结构更加紧凑。该操作基于HTML table标签，通过调整不同行和列的单元格数量和大小，以满足特定的设计需求。实践中，需要注意保持总列数和行数的一致性，以避免布局错误。

更新记录

  • 2024年7月8日完成基本结构总结；