这篇博客详细整理了HTML5的学习笔记，包括HTML的结构生成、网页基础知识、Web标准、HTML标签规范和常用标签。此外，还深入介绍了VSCode工具的使用，如插件安装，以及HTML中的表格、列表和表单元素，如input、select、textarea的使用。同时，强调了标签语义化和注释标签的重要性。
HTML学习笔记整理
目录
HTML结构快速生成
- 生成标签，英文半角下shift+1,得到!，按下tab键
- 多个相同标签： * 【eg:div*3】
- 父子级标签：> 【eg:ul>li】
- 兄弟标签：+ 【eg:div+p】
- 带有类名的：.类名 【eg:.pink】
- 带有ID名的：#类名 【eg:#name 若为p#name则得到<p id='name'></p>】
- 生成的类名有顺序的，可用自增符号：$
- 【eg:name$*2得到<name1></name1> <name2></name2>】
- 【eg:p{$}*2得到<p>1</p> <p>2</p>】
- 花括号{}：【eg:p{你好}得到<p>你好</p>】
Day1
问：
网页的基本组成
什么是html
常用的浏览器
什么是WEB标准的三大组成部分
目录：
网页、常用浏览器、web标准组成部分
00-03.网站、网页
网站：多个网页的集合
网页：是构成网站的基本元素。是网站中的一“页”，为html格式的文件，需要通过浏览器阅读。一般由 图片+文字+音频等元素组成。常见以.html或.htm后缀结尾，即俗称为html文件。
.html：指超文本（超越了文本限制，超级链接文本）标记语言，专门描述网页的一种语言。是一种标记语言，由标签组成。
04.常用浏览器、内核
常用浏览器（五大）：微软（IE、edge）、火狐（Firefox）、谷歌（Chrome）、Safari、Opera...
浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示情况
| 内核 | 备注（其余浏览器） | |
|---|---|---|
| IE | Trident | IE、猎豹安全、360极速、百度 |
| FireFox | Gecko | FireFox |
| Safari | Webkit | 苹果 |
| Chrome/Opera | Blink（Webkit的分支） | Chrome/Opera、UC、QQ、搜狗、360... |
05.Web标准
Web标准：将结构、表现、行为独立分开
W3C标准：网页 = 结构(html) + 表现(css) + 行为(js)
Web标准由W3C（万维网联盟）阻止和其他标准化组织指定的一系列标准集合。
为什么需要：发展前景广、内容能被更广泛的设备访问、易被搜索、降低网站费用、易于维护、提高浏览速率。
Web标准的构成（三大部分）：
- ①.结构(似身体)：HTML 用于网页元素进行整理和分类。
- ②.表现(似装饰外观)：CSS 用于设置网页元素的版式、颜色、大小...等外观样式。
- ③.行为(似行为动作)：JS 网页模型的定义以及交互的编写。
06.HTML标签
问：
标签书写规范
html骨架标签
写出超链接标签
写出图片标签alt和title的区别
相对路径的三种形式
目录：
html的语法规范、基本结构标签、开发工具、常用标签、注释和特殊字符。
07.HTML语法规范
都包含在<>里，大部分都是成对出现的。
双标签：<开始></结束>，例如：<html></html>，
单标签：不需要结束标签，例如：<br />
- 标签关系
双标签关系可分为：包含关系、并列关系
| 包含关系（eg:父子关系） | 并列关系（eg:兄弟关系） |
|---|---|
| eg：<head> <title></title> </head> |
eg: <head></head> <body></body> |
08.HTML基础结构标签
html页面也称为html文档，每个网页都有一个基本的结构标签（即：骨架标签）。文档后缀名为.html或.htm
| 标签名 | 定义 | 备注 |
|---|---|---|
| <html></html> | HTML标签 | 页面中最大的标签，也称为：根标签 |
| <head></head> | 文档头部 | head标签中必须设置title标签 |
| <title></title> | 文档标题 | 设置网页标题 |
| <body></body> | 文档主体 | 包含文档所有内容，基本都放在body里 |
09—10.VSCode工具创建页面
使用的网页开发工具：visual studio code（简称：VSCode）
插件使用（推荐安装）：
| Chinese Language | 中文语言包 |
| open in Brower | 右击选择浏览器打开html文件 |
| JS-CSS-HTML Formatter | 每次保存，会自动格式化js、css和html代码 |
| Auto Rename Tag | 自动重命名配对的html/XML标签 |
| CSS Peek | 追踪主样式 |
其余注意事项：
- <!DOCTYPE>：处于<html>标签之前，不是html标签，而是文档类型声明标签
- lang语言种类：定义当前文档显示的语言（常用 en：英文、zh-Ch：中文），告诉大家这个是英文网站or中文网站or....网站
- 【eg：<html lang = "en">，告诉浏览器or搜索引擎，这是英文网站】
- 字符集charset，常用的值：GB2312、BIG5、GBK、UTF-8(这个最常用，称之为万国码)
- ※必要代码，否则页面可能会乱码：<meta charset = "UTF-8"/>
11.标签语义
标签语义：即这个标签的用途是什么。
12—18.html中常用的标签
-
标题标签(作用：作标题使用)：
<h1>——<h6>，六个等级的网页标签，字体大小效果递减。块级元素，独占一行。
-
段落标签(作用：把html文档分割为若干段)：
<p>，
自动换行：ctrl+z 特点：根据窗口大小自动换行，段与段之间有空隙
-
换行标签(作用：强制换行)：
<br />，其为单标签
-
文本标签(作用：突出重要性)
| 加粗 | <strong></strong>或<b></b> |
|---|---|
| 倾斜 | <em></em>或<i></i> |
| 删除线 | <del></del>或<s></s> |
| 下划线 | <ins></ins>或<u></u> |
-
盒子(无语义，用于布局)
| <div></div> | 块级元素，一行只能放一个<div>，大盒子 |
| <span></span> | 行内元素，一行可放多个<span>，小盒子 |
-
图像标签和路径
※单标签：<img key = "value">
【<img src = "图像URL">，src为必须属性，用于指定图像文件的路径和文件名】
| 属性 | 属性值 | 说明 |
|---|---|---|
| ※src | 图片路径 | 必须属性 |
| alt | 文本（替换） | 图像未显示时，alt的值替换 |
| title | 文本（提示） | 鼠标放在上面，显示title的值 |
| border | 像素 | 设置图片边框粗细 |
| width | 像素 | 设置图片宽 |
最低0.47元/天 解锁文章
8961
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
