前言：后面两个月将会进行一个网页的项目，这段时间学习整理一下，先整理一下，html的一些语法，后续进行整理css和js的，同时最近也临近期末考试，后面还要继续
目录
（一）HTML简介
网页
网页是根据因特网上一定的规则，使用html等制作的用于展示特定内容的网页集合。
网页是构成网站的基本元素。
网页是图片、链接、文字、声音、视频等源深路组成，其实就是一个html文件。
HTML
HTML指的是超文本标记语言（Hyper Text Markup Language）,它是用来描述网页的一种语言。
HTML不是一种编程语言，而是一种标记语言（markup language）。 标记语言是一套标记标签（markup tag）。
超文本
- 它可以加入图片、声音、动画、多媒体等内容（超越文本限制）。
- 它可以从一个文件跳转到另一个文件，于世界各地主机的文件连接（超级链接文本）。
网页形成
网页由网页元素组成，这些元素通过html标签描述出来，然后通过浏览器解析并显示出来。
常用浏览器及其内核
常用浏览器
浏览器是网页显示、运行的平台。
五大浏览器有 IE、Firefox、Chrome、Safari 和 Opera。
四大内核：Trident, Gecko, Webkit, Blink
浏览器内核
浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。
| 浏览器 | 内核 | 备注 |
| IE | Trident | IE、猎豹安全、360、百度浏览器 |
| firefox | Gecko | 火狐浏览器内核 |
| Safari | Webkit | 苹果浏览器内核 |
| Chrome/Opera | Blink | chrome/opera 浏览器内核 |
Web标准
Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。
为什么需要Web标准
浏览器不同，它们显示的页面或者排版有些许差异。
遵循Web标准除了可以让不同的开发人员写出的页面更标准、更统一外，还有以下优点：
- 让Web标准发展前景更为广阔
- 内容能被更广泛的设备访问。
- 更容易被搜索引擎了搜索。
- 降低网站流量费用。
- 易于维护。
- 提高页面浏览速度。
Web标准的构成
| 标准 | 说明 |
| 结构 | 结构对网页元素进行整理和分类，现阶段主要是HTML |
| 表现 | 表现用于设置网页元素的版式、颜色、大小等外观样式，主要是指CSS |
| 行为 | 行为是指网页模型的定义以及交互的编写，现阶段主要是JS |
Web标准提出的最佳体验方案：结构、表现、行为相分离。
HTML 标签
HTML 语法规范
基本语法规范
HTML 标签是由尖括号包围的关键词，例如<html>。
HTML 标签通常是成对出现的，例如<html>和<html/>，称为双标签。
第一个是开始标签，第二个是结束标签。有些特殊标签必须是单个标签（极少情况），例如<br/>，我们称之为单标签。
标签关系
标签关系可以分为两类：包含关系和并列关系
HTML 基本结构标签
每个网页都会有一个基本的结构标签，页面内容都是在这些基本标签上书写。 HTML 页面也叫 HTML 文档。
开发工具
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>html语言框架
!<DOCTYPE> 文档类型声明，告诉浏览器使用何种 HTML 版本来显示网页。
当页面采用HTML5版本显示网页
<!DOCTYPE> 声明位于文档最前面的位置，处于<html>标签之前。
<!DOCTYPE> 不是一个 HTML 标签，他就是文档类型声明标签。
lang 语言种类
用来显示当前文档显示的语言。
<html lang="zh-CN">
<html lang="en">
这个属性对浏览器和搜索引擎（谷歌/百度）还是有作用的。
charset 字符集
<meta charset="UTF-8" />
字符集（character set）是多个字符的集合，以便计算机能够识别和存储各种文字。
在<head>标签内，可以通过<meta>标签的charset 属性来设置文档使用何种字符编码。
charset常用的值有：GBK、UTF-8，其中UTF-8被称为万国码，基本包含了全世界所有国家需要用到的字符。
HTML 常用标签
标题标签 h1-h6
为了使网页具有语义化，经常使用标题标签，HTML 提供 6 个等级的网页标题标签即 <h1>-<h6>。
使用方法：<h1>标签内容</h1>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>h1-h6标题标签</title>
</head>
<body>
<h1>标题h1标签</h1> <br />
<h2>标题h2标签</h2> <br />
<h3>标题h3标签</h3> <br />
<h4>标题h4标签</h4> <br />
<h5>标题h5标签</h5> <br />
<h6>标题h6标签</h6> <br />
</body>
</html>段落和换行标签
p 指paragraph，意为段落。把文字有条理的显示出来分成一段一段。
<p> 相关段落内容</ p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--下面两段文字我从网站上面随便复制的，感受一下段落标签-->
<!--第一段文字内容内容-->
<p> 我总是害怕改变，患得患失，安逸，而你很有想法，有追求，你怪我老是拉着你不给
你高飞，经过这件事情，和你长谈，我明白了，人就是要不断的改变才能有好的生活。
</p>
<!--第二段文字内容-->
<p>
以后你每做的任何决定，我都支持你，都追随你。
</p>
</body>
</html>标签语义: 把 HTML 文档分割为若干段落。
特点：
- 文本在一个段落中会根据浏览器窗口的大小自动换行。
- 段落和段落之间保有空隙。
<br/> 是 break 缩写，意为打断、换行。
标签语义： 强制换行
特点：
<br/>是个单标签。<br/>标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。
课堂案例
体育新闻显示页面——基本标签的使用
文本格式化标签
在网页中，有时候需要为文字设置粗体、斜体或下划线等效果，需要使用 HTML 中的文本格式化标签，使文字以特殊方式显示。
标签语义： 突出重要性，比普通文字重要。
| 语义 | 标签 | 说明 |
| 加粗 |
| 更推荐 |
| 斜体 |
| 更推荐使用 |
| 删除线 |
| 更推荐使用 |
| 下划线 |
| 更推荐使用 |
div 和 span 标签
<div> 和 <span> 是没有语义的，它们是一个盒子，用来装内容的。
div 是 division 的缩写，表示分割、分区。span 意思是跨度、跨距。
特点：
- div 标签用来布局，但是现在一行只能放一个 div，大盒子。
- span 标签用来布局，一行可以多个 span，小盒子。
图像标签
在 HTML 标签中，<img /> 标签用于定义 HTML 标签页面中的图像。
<img src="图像url" />
单词 image 的缩写，意为图像。
src 是标签的 必须属性，用于指定图像文件的路径和文件名。
属性： 属于这个图像标签的特性。
图像标签的其他属性
| 属性 | 属性值 | 说明 |
|
| 图片路径 | 必须属性，告诉要引用哪张图 |
|
| 文本 | 替换文本，当图片不显示时显示文字 |
|
| 文本 | 提示文本。鼠标放到图像上显示文字 |
|
| 像素 | 图像宽度 |
|
| 像素 | 图像高度 |
|
| 像素 | 图像边框粗细 |
路径
相对路径
相对路径： 以引用文件位置为参考基础，而建立出来的目录路径。是相对于 HTML 页面的位置。
| 分类 | 符号 | 说明 |
| 同级路径 | 同一级 | |
| 下一级路径 |
| 位于 HTML 文件上一级 |
| 上一级路径 |
| 位于 HTML 文件下一级 |
绝对路径
绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径或者完整的网络地址。
超链接标签
在 HTML 标签中，<a/> 标签用于从一个页面链接到另一个页面。
链接的语法格式
a 是单词 anchor 的简写，是锚的意思。
<a href=" "></ a>
| 属性 | 作用 |
|
| 指定链接地址 url，为必须属性。 |
|
| 指定页面打开方式， |
超链接分类
- 外部链接
- 内部链接:网站内部页面之间的相互链接。
- 空链接:
# - 下载链接：地址链接的是文件.exe、压缩包.zip 等。
- 网页元素链接：在网页中的各种网页元素。如文本、图像、表格、音频、视频等。
- 锚点链接：点击链接，可以快速定位到页面中的某个位置。
- 在链接文本的
href属性中，设置属性为 #名字的形式 - 找到目标位置标签，里面添加一个 id 属性 = 名字
- 在链接文本的
阻止 a 链接跳转，课可给 href 属性设置 javascript:void(0); 或者 javascript:;。
HTML 中的注释和特殊字符号
- 注释:
<!--注释-->VSCode 中快捷键：Ctrk + / - 字符实体
| 字符 | 显示 |
|
| 空格 |
|
| ＜ |
|
| ＞ |
|
| © |
表格标签
表格的主要作用
表格主要用于显示、展示数据，因为可以让数据显示非常规整，可读性好。 表格不是来布局的，而是来展示数据的。
表格基本语法
<table></table>用于定义表格的标签。<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>中。<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>中。- 字母 td 指表格数据（table data），即单元格的内容。
表头单元格标签 th
一般单元格位于表格的第一行或第一列，表格单元格里面的文本内容 加粗显示。 <th> 标签表示 HTML 表格的表头部分（table head 的缩写） 表头单元格(<th>)也是单元格，常用于表格第一行，突出重要性，表头单元格里面的文字会加粗居中显示。
表格属性
只作了解，后期通过 CSS 来设置。 这些属性都要写到 <table></table> 标签中
| 属性名 | 属性值 | 描述 |
|
| left、center、right | 表格元素对齐方式 |
|
| 1 或"" | 规定是否有边框，默认为 |
|
| 像素值 | 规定单元边沿与其内容之间空白，默认 1px |
|
| 像素值 | 规定单元格之间的空白，默认为 2px |
|
| 像素值或百分比 | 规定表格宽度 |
|
| 像素 | 表格高度 |
表格结构标签
场景：表格可能很长，将表格分割为表格头部和表格主题两大部分。
加强语义化：<thead> 表示头部区域，<tbody> 表示主体区域，更好区分表格结构。
注意：
<thead></thead>：定义表格头部，且内部必须有<tr>标签。<tbody></tbody>：定义表格主体，存放数据。- 以上标签都放在
<table></table>里面。
合并单元格
- 跨行合并：rowspan="合并单元格个数"
- 跨列合并：colspan="合并单元格个数"
合并三部曲：
- 确定跨行 or 跨列。
- 找到目标单元格：跨行取最上面为目标单元格，跨列取最左边为目标单元格。
<td colspan="2"></td> - 删除多余单元格。
列表标签
表格展示数据，列表则用来布局。 列表特点是整齐、整洁、有序，作为布局更方便自由。 根据使用场景不同，列表分为三大类：
- 无序列表
- 有序列表
- 自定义列表。
无序列表
<ul> 标签标识 HTML 页面项目中的无序列表，一般以项目符号呈现列表项。
使用 <ul> 标签来定义有序列表，<li> 来定义列表项。
<ul>
<li>内容</li>
<li>内容</li>
<li>内容</li>
</ul>
注意:
- 各个列表项之间无需，并列关系。
<ul></ul>中只能包含<li></li>，写入其他标签或文字是不允许的。- 无序列表带有自己的属性，可用 CSS 修改样式属性。
有序列表
使用 <ol> 标签来定义有序列表，<li> 来定义列表项。
<ol>
<li>内容</li>
<li>内容</li>
<li>内容</li>
</ol>
与无需列表类似，有自己的样式属性，通过 CSS 设置。
自定义列表
<dl> 定义描述列表，与 <dt> 和 <dd> 标签配合使用。
<dl>
<dt>列表描述</dt>
<dd>内容1</dd>
<dd>内容2</dd>
<dd>内容3</dd>
</dl>
注意
- dl 里面只能包含 dt 和 dd
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>列表操作</title>
</head>
<body>
<!--无序列表的格式-->
无序列表语法格式:
<ul>
<li>无序1</li>
<li>无序2</li>
<li>无序3</li>
</ul>
<!--有序列表格式-->
有序列表格式：
<ol>
<li>有序1</li>
<li>有序2</li>
<li>有序3</li>
</ol>
<!-- 自定义列表格式 -->
自定义列表语法形式：
<dl>
<dt>标头描述</dt>
<dd>自定义1</dd>
<dd>自定义2</dd>
<dd>自定义3</dd>
</dl>
</body>
</html>
表头标签
为什么需要表头
收集用户信息。 和用户进行交互，收集用户资料。
表头组成
- 表单域
- 表单控件（元素）
- 提示信息
表单域
表单域是一个包含表单元素的区域。 使用 <form> 标签用于定义表单域，手机和传递用户信息。 form 标签会将它范围内的表单元素信息提交给服务器。
目前而言，暂时不需要用表单域提交数据，只需要写上 form 标签即可。
语法格式
<form action="url地址" method="提交方式" name="表单域名称">
各种form控件
</form>
常用属性：
| 属性 | 属性值 | 作用 |
| action | url 地址 | 指定接受并处理表单数据的服务器的 url 地址 |
| method | get/post | 设置表单数据的提交方式 |
| name | 名称 | 用于指定表单名称，区分同一个页面中的多个表单域 |
注意：
- 写表单元素之前需要有表单域将其包含。
- 表单域是
form标签。
表单控件
在表单域中定义各种表单元素，允许用户在表单中输入或选择的内容控件。
表单元素
<input> 标签用于收集用户信息。
input 标签包含 type 属性，决定了输入字段的不同形式：文本字段、复选框、掩码后的文本控件、单选按钮、按钮等。
<input type="属性值" />Copy to clipboardErrorCopied
input标签为单标签type属性设置不同属性值来指定不同控件类型
type 常用属性值
| 属性值 | 描述 |
| button | 定义可点击按钮 |
| checkox | 复选框 |
| file | 定义输入字段和“浏览”按钮，供文件上传 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像形式的提交按钮 |
| password | 定义密码字段。字符被掩码。 |
| radio | 定义单选按钮 |
| reset | 定义重置按钮，清除表单所有数据。 |
| submit | 定义提交按钮。重置按钮会清除表单所有数据。 |
| text | 定义输入字段。用户可输入文本，默认宽度为 20 个字符。 |
input 的其他属性
| 属性 | 属性值 | 描述 |
| name | 自定义 | 定义 input 元素名称 |
| value | 自定义 | 规定 input 元素的值 |
| checked | checked | 规定此 input 元素首次加载时应当被选中 |
| maxlength | 正整数 | 规定输入字段字符的最大长度 |
注意
- 对于
radio单选框，必须使input的name具有相同的属性值，才能实现多选一。 同理，复选框也要有相同的name值。 - 单选框和复选框可以设置
checked属性，页面打开默认选择按钮。 - 设置
type的值为submit，点击按钮后可以把表单域 form 里面的表单元素里面的值提交给后台。 - 设置
type="button"，普通按钮，后期结合 js 使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>input 表单元素</title>
</head>
<body>
<form action="xxx.php" method="get">
<!-- text 文本框 用户可以里面输入任何文字 -->
用户名: <input type="text" name="username" value="请输入用户名" maxlength="6"> <br>
<!-- password 密码框 用户看不见输入的密码 -->
密码: <input type="password" name="pwd" > <br>
<!-- radio 单选按钮 可以实现多选一 -->
<!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
<!-- 单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮 -->
性别: 男 <input type="radio" name="sex" value="男"> 女<input type="radio" name="sex" value="女"> <br>
<!-- checkbox 复选框 可以实现多选 -->
爱好: 吃饭 <input type="checkbox" name="hobby" value="吃饭"> 睡觉 <input type="checkbox" name="hobby"> 打豆豆 <input type="checkbox" name="hobby" checked="checked">
<br>
<!-- 点击了提交按钮,可以把 表单域 form 里面的表单元素 里面的值 提交给后台服务器 -->
<input type="submit" value="免费注册">
<!-- 重置按钮可以还原表单元素初始的默认状态 -->
<input type="reset" value="重新填写">
<!-- 普通按钮 button 后期结合js 搭配使用-->
<input type="button" value="获取短信验证码"> <br>
<!-- 文件域 使用场景 上传文件使用的 -->
上传头像: <input type="file" >
</form>
</body>
</html>label 标签
<label> 标签为 input 元素定义标注。 <label> 标签用于绑定一个表单源深路，当点击 label 标签内的文本时，浏览器自动将焦点转到或者选择对应的表单元素上，提升用户体验。 语法：
<label for="sex"> 男</label> <input type="radio" name="sex" id="sex" />
核心： <lable>标签的 for 属性与相关元素的 id 属性相同。
select 下拉表单元素
select 标签设置多个选项让用户选择，节约页面空间。 语法
<select> <option>山东</option> <option>北京</option> <option>天津</option> <option selected="selected">长安</option> </select>
注意
- select 中至少包含一对 option。
- 在 option 中定义属性
selected=selected，当前项即为默认选项。
textarea 文本域表单元素
场景：输入内容较多时。
语法：
<textarea rows="3" cols="30">文本内容</textarea>
cols="每行字符数"，rows="显示的行数"
可用于用户反馈界面框
ok，先处理到这里吧，到时候专门补充，重点参考了这个，可以说几乎一样，大家也可以参考这个笔记。
390
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
