共计 3051 个字符，预计需要花费 8 分钟才能阅读完成。
HTML 总结
HTML 上局部
网页开发相干概念
-
网站和网页的关系
- 网站是由多个网页组成的。
-
什么是网页？
- 应用 HTML 语法编写的 html 文件，文件后缀是.html 或者.htm
- 内容蕴含文字、链接、音频、视频等
- 应用浏览器关上查看
总结：
- 网页就是一个 后缀为 html 的文件，由浏览器负责解析生成图形界面
HTML 简介
- html 是超文本标记语言（Hyper Text Markup Language）。
超文本是什么意思？
- 超文本是指能够链接到另一个文档或文本.
网页的造成：
网页是由许多 html 标签包裹文字拼起来的。
HTML 语法标准：
HTML 是一种超文本标记语言，由固定的 HTML 标签组成
HTML 标签 分类
单标签：有些非凡的标签必须是单个呈现 如 <img />（就如同当初的我，据说独身的人都很优良）
双标签：标签成对呈现，如 <html></html> 成双成对
标签有两种关系：
蕴含关系 (父子)
<head>
<title></title>
</head>并列关系 (兄弟)
<head></head>
<body></body>HTML 根本构造
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 我的第一个网页 </title>
</head>
<body>
<!-- body 和 /body 标签之间是写 html 标签的中央 -->
<!-- 这里写内容标签（这是正文，网页上看不到，是给咱们程序员看的）-->
<h1> 我是一级题目 </h1>
</body>
</html>- 每个网页都会有一个根本的构造标签，（就像你上学要买书包，本子，笔一样）
- html 标签 是根标签
- head 标签：是页面头部
- title 标签：页面的题目
- body 标签：页面的主体。
开发环境
前端开发神器 vscode
下载地址: https://code.visualstudio.com…
好用插件（插件不宜过多，装置的多了升高 vs code 性能）
Chinese 汉化包
open in browser 编辑页面右键浏览器关上
Matertial Icon Theme 文件图标
vs code 设置
新建文件：ctrl + n
保留文件 ctrl+s, 留神文件后缀为.html
放大放大代码字体：ctrl+ 加号键 或减号键
浏览器：
首选谷歌
chrome
下载地址：https://www.google.cn/intl/zh…
HTML 罕用标签
- 题目标签
- 正文标签
- 段落标签
- 换行标签
- 列表标签
- 图片标签与相对路径
- 音频与视频标签
- 超链接标签
题目标签
h1~h6
大小关系
h1>h2>h3>h4>h5>h6
<h1>
我是一级题目，我最大
</h1>
<h6>
我是六级标签，我最小
</h6>特点：
- 每个题目独占一行
- 题目的文字 加粗，字号加大
正文：
- 场景：咱们写代码的时候代码多了，所以留下正文阐明这段代码的作用
- 给其余开发者看
- 给本人看
语法快捷键：ctrl + /
<!-- 我是正文 -->
<!-- 我也是
正文
-->特点：
- 正文标签 只能在源码中看到
- 浏览器会疏忽正文中的内容，不会显示给用户看
段落与换行标签：
段落场景：文章内容须要
分段显示
语法：
<p> 我是一个段落 </p>特点：
- 前后换行，段落间主动空行
- 浏览器宽度不够时主动换行
换行
场景：如果心愿某段文字强制换行显示，就能够应用换行标签
语法：1. 单标签
2. 换行，不空格
列表
列表场景：列表标签次要用来自在布局显示数据
列表特点：参差、有序布局时不便
三种列表：1. 无序列表
<ul>
<li></li>...
</ul>
2. 有序列表
<ol>
<li></li>...
</ol>
3. 自定义列表
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
<dt></dt>...
<dd></dd>
<dd></dd>
</dl>
ul 中只能放 li 比方
ol 中只能放 li 比方
dl 中只能放 dt 和 dd
留神 dt 和 dd 是兄弟关系，常常一个 dt 对应多个 dd
图像标签与相对路径
图像
场景：在网页中插入指定门路的图片
语法：
<img src = "图片门路">相对路径的三种分类
同级门路 符号 ./
下一级门路 符号 ./
上一级门路 符号 ../
音频标签
<audio src="音乐地址" controls> </audio>兼容写法
<audio controls>
<source src="不同格局后缀门路">
<source src="不同格局后缀门路">
您的浏览器不反对 audio, 降级浏览器，或者点击 <a href="音频压缩包地址"> 下载音频 </a>
</audio>视频标签
语法：
<video src="门路" controls></video>兼容写法
<video>
<source src="">
<source src="">
您的浏览器不反对 audio, 降级浏览器，或者点击 <a href="音频压缩包地址"> 下载音频 </a>
</video>链接标签
<a href="跳转指标" ></a>
<!-- 在新窗口关上 -->
<a href="跳转指标" target="_blank"></a>符号实体
罕用实体符号
空格
大于号 >
小于号 <
版权 ©HTML 下半局部
元数据及作用
元数据标签：形容网页相干信息的数据，如网页编码、关键词、形容信息、等（搜索引擎优化网站优化）
设置关键字：
<meta name="keywords" content="定义搜寻关键词，有利于搜索引擎收录">
设置网页内容形容：
<meta name="descripton" content="形容网站做什么的">设置网页重定向：
<meta http-equiy="refresh" content="3，url=http://baidu.com">lang 语言品种
作用：标识 文字内容 所应用的语言
语法：
<html lang="语言代码">
...
</html>
<!-- 语言代码有 zh-CN 中文简体
ja 日文
en 英文
-->字符集
语法：
<meta charset="UTF-8">个别都用 UTF-8
表格
根本语法：
<table>
<tr>
<td> 单元格内容 </td>
<td> 单元格内容 </td>
...
</tr>
...
</table>table 标签：定义表格
tr 标签：定义表格行
td 标签：定义表格单元格
表格合并单元格
- 跨行合并（纵向合并）：rowspan = “ 要合并的单元格个数 ”
- 跨列合并（横向合并）：colspan = “ 要合并的单元格个数 ”
表格构造标签：
标签解释：
- thead 标签：定义表格头 (简单的表格头能够有多行)
- tbody 标签：定义表格主体，次要用来蕴含数据 (一个表格能够有多个表格主体)
- tfoot 标签：定义表格脚，次要用来蕴含统计数据 (用的少)
属性：
border：表格边框 cellspacing：单元格间的间距
cellpadding：单元格的内容与其边框的内边距 align：表格的对齐形式，通常是 left，center，right
bgcolor：表格的背景色彩 background：表格的背景图片
width：表格宽度 height：表格高度
border-collaspe：collaspe： 边框合并，不叠加 cellspacing：0：边框合并，但合并之后的边框宽度等于前两个边框宽度之和
caption：表格题目（写在 table 标签中最后面）
表单
<form action="提交网址">
<!-- 文字，表单控件 -->
</form>百度搜寻 w3shool 网址查看 http://www.w3s.com.cn/
