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/
程序员
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。