html是什么？
标签（重点内容）
语法
该笔记为千锋教育的笔记 稍作修改
网站的建站流程
网页的结构
结构（上中下结构 左中右结构） html-----
样式 （文字变成红色 蓝色） css--------
行为 js-------
WEB标准
WEB标准是网页制作的标准，它不是一个标准，
它是根据网页的不同组成部分生成的一系列标准。
这些标准大部分由W3C起草发布，也有部分标准由ECMA起草发布
（1）W3C( World Wide Web Consortium )万维网联盟，创建于1994年
是Web技术领域最具权威和影响力的国际中立性技术标准机构；
是专门负责网络标准制定的非赢利组织。制定了结构标准和样式标准；
（2）ECMA：欧洲电脑网商联合会（厂商协会），制定了行为标准；
计算机语言
HTML
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
www万维网的描述性语言。
XHTML指可扩展超文本标记语言（标识语言）
（EXtensible HyperText Markup Language）
是一种置标语言，表现方式与超文本标记语言（HTML）类似，
不过语法上更加严格。
HTML5指的是HTML的第五次重大修改（第5个版本）
HTML发展
编辑器
VS code下载地址：
https://code.visualstudio.com/
如何安装插件？
学习编辑器基本使用？
设置：文件-> 首选项 -> 设置,搜索word
( 大小、是否换行 word wrap )
可以设置编辑器的字体大小，
一行写不下了是否自动换行
常用快捷键
cmd + s : 保存
cmd + a : 全选
cmd + x、cmd + c、cmd + v : 剪切、复制、粘贴
cmd + z、cmd + y : 撤销、前进
shift + end : 从头选中一行
shift + home : 从尾部选中一行
shift + alt + ↓ : 快速复制一行
alt + ↑或↓ : 快速移动一行
tab : 向后缩进
tab + shift : 向前缩进
多光标 : alt + 鼠标左键
ctrl + d : 选则相同元素的下一个
文件的命名规范
- 小写英文字母、数字、下划线的组合，
- 其中不得包含汉字、空格和特殊字符；
- 必须以英文字母开头。
HTML开始
1：HTML架构
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
有三种： Strict（严格型)、
Trasitional（过渡型）、
Frameset（框架型）
2：HTML5基本结构
! + tab键 : 快速的创建html的初始代码
文档声明 : 告诉浏览器这是一个html文件 html文件的最外层标签：包裹着所有html标签代码 lang="en"表示是一个英文网站 lang="zh-CN"表示一个中文网站 元信息：是编写网页中的一些辅助信息 charset="UTF-8"国际编码，让网页不出现乱码的情况3:HTML语言
-
HTML语言组成
-
标签
-
写在尖角号<>里的第一个单词，叫做标记，也叫做标签，也称作元素；
-
-
属性
-
用来修饰标签，设置标签的一些功能 标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在双引号内 一个标记可以有多个属性，属性和属性之间用空格隔开，属性不分先后顺序
-
-
-
HTML语法
- 常规标记(双标记)：
<标记名称 属性1名=“属性1值” 属性2名=“属性2值” ………… ></标记名> - 空标记（单标记）：<标记名 属性1名=“属性1值” />
- 常规标记(双标记)：
-
创建标签的快捷键：单词 + tab键 -> <单词>
常用标签
1 ： 文本标题标签
文本标题共有6个（h1-h6）
<h1>一级标题</h1>(唯一性,放网站LOGO)
<h2>二级标题</h2>
...
<h6>六级标题</h6>
一个.html文件中只能出现一次h1标签。
2:字体倾斜&加粗标记
文本倾斜:
<i></i>
<em></em>
文本加粗：
<b></b>
<strong></strong>
3：下划线
<u></u> 下划线
<del></del> 删除文本（删除线效果）
<ins></ins> 插入文本
注：一般情况下，删除文本都是和插入文本配合使用的。
<del>原价100</del> <ins>现在特价</ins>
4 : 换行&水平线
<br>
<hr>
单标签
5：上标&下标
<sup></sup>
<sub></sub>
例如：a <sup>2</sup> 表示a的平方
6 : 段落标记
<p></p>
7 : 字符 （ 小段文本 ）
<span></span>
8 : 常用转义字符
| 特殊字符 | 含义 | 特殊字符代码 |
|---|---|---|
| 空格符 | | |
| © | 版权 | © |
| ® | 注册商标 | ® |
| < | 小于号 | < |
| > | 大于号 | > |
| & | and符 | & |
| ¥ | 人民币 | ¥ |
| ° | 摄氏度 | ° |
8 ：列表
（1） 无序列表
<ul>
<li>列表项内容</li>
<li>列表项内容</li>
<li>列表项内容</li>
........
</ul>
（2）有序列表
<ol>
<li>列表项内容</li>
<li>列表项内容</li>
<li>列表项内容</li>
........
</ol>
type:规定列表中的列表项目的项目符号的类型
语法：<ol type=“a"></ol>
1 数字顺序的有序列表（默认值）（1, 2, 3, 4）。
a 字母顺序的有序列表，小写（a, b, c, d）。
A 字母顺序的有序列表，大写（A,B,C,D)
i 罗马数字，小写（i, ii, iii, iv）。
I 罗马数字，大写（i, ii, iii, iv）。
start 属性规定有序列表的开始点。(start的属性值必须是数字)
语法：
（3）自定义列表
<dl>
<dt>标题</dt>
<dd>对标题进行描述的内容</dd>
</dl>
9 : 超链接
a -> 双标签
<a href="链接地址" target="链接打开的方式" title="文本提示"></a>
属性：
href='url'
target="_blank"表示的是新窗口打开（打开新的标签页） "_self" 默认的，表示的是当前的窗口打开
title = '文本提示'
拓展：
rel = 'nofollow'; 告诉搜索引擎不要此网页上的链接或不 要追踪此特定链接
10 : base标签
base -> 单标签 ：作用就是改变链接的默认行为的,写到head中
<base target="_blank">
<!-- 在head中添加该语句，则所有a标签的打开方式均为 在新窗口打开 -->
11 : 锚点
在页内进行跳转，和目录的功能有点像
两种做法
1. #号(a标签中的href) + id属性
2. #号(a标签中的href) + name属性
（注意name属性加给的是 新加的没有内容的a标签）
可以用锚点做返回顶部
<!-- 做法一：#号 + id属性 -->
<a href="#html">html</a>
<h2 id="html">html</h2>
<!-- a标签中href#后面的要与要跳转到的内容的id值相同 -->
<!-- 做法二：#号 + name属性 -->
<a href="#html">html</a>
<a name="html"></a>
<h2>html</h2>
<!-- 在要跳转到的内容的最前面加一个空的a标签，利用name属性做一个映射 -->
12 : 图片
<img> -> 单标签
属性：
src = "引入图片的地址(url)";
alt = "当图片出现问题的时候，可以显示一段友好的提示文字。"
title = "文本提示"
width = ""
height = ""
border = ""
图片 title 和 alt区别：
alt:
1、alt属性是考虑到不支持图像显示或者图像显示被关闭的浏览器的用户，以及视觉障碍的用户和使用屏幕阅读器的用户。当图片不显示的时候，图片的替换文字。
2、alt属性值得长度必须少于100个英文字符
3、alt属性是img标签的必须属性，如果没有特别意义的图片，可以写alt=""
4、alt属性是搜索引擎判断图片与文字是否相关的重要依据，alt属性添加到img主要的目的才是为了SEO
title:
1、title属性并不是必须的。
2、title属性规定元素的额外信息，有视觉效果，当鼠标放到文字或是图片上时有文字显示。
3、title属性并不作为搜索引擎抓取图片的参考，更多倾向于用户体验的考虑。
13 : 相对路径
.在路径中表示当前路径
…在路径中表示上一级路径
1)当前文件 与 目标文件 在同一目录下，直接书写
目标文件的文件名+扩展名；
(同级)
2)当前文件 与 目标文件所处的文件夹 在同一目录下,写法如下：
文件夹名/目标文件全称+扩展名；
(上级找下级)
3)当当前文件所处的文件夹和目标文件在同一目录下，写法如下：
../目标文件文件名+扩展名；
(下级找上级)
14 ： DIV
盒子；容器
15 : HTML注释
<!-- 注释 -->
快捷添加注释与删除注释：
1. ctrl + /
2. shift + alt + a
表格
1 : 表格基本结构
<table>
<caption>表格标题</caption>
<tr>
<th>第一行第一列表头</th>
<th>第一行第二列表头</th>
<th>第一行第三列表头</th>
</tr>
<tr>
<td>第二行第一列单元格</td>
<td>第二行第二列单元格</td>
<td>第二行第三列单元格</td>
</tr>
</table>
<!--
table 为表格
caption 表格标题
tr 行
th 表头
td 列（每一个单元格）
-->
语义化标签：tHead(第一行标题)、tBody(其他行内容)、tFood(尾部)
没有任何效果，只是让表格更规范
注：在一个table中，tBody是可以出现多次的，但是tHead、tFood只能出现一次。
2：表格的html属性
1）width="表格的宽度"
2）height="表格的高度"
3）border="表格的边框"
4）bordercolor="边框色"
5）cellspacing="单元格与单元格之间的空间"
6）cellpadding=“单元格与内容之间的空间(内填充)"
7）align="表格水平对齐方式"
取值：left 左边、right 右边、center 居中、
valign=“表格垂直对齐方式”
取值：top 上边\bottom 下边\middle 居中
8）合并单元格属性：(td)
合并列： colspan=“所要合并的单元格的列数"
合并行： rowspan=“要合并单元格的行数”
合并行，删除其他行的该列
合并列，删除该行的其他列
745
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
