1、如何学习
1）心态平和
2）多练习
2、主流浏览器及内核
浏览器（内核最重要）
1）shell:外壳
2）core：内核（JS执行引擎、渲染引擎）
内核：
1）IE trident
2）Chrome webkit/blink
3）Firefox Gecko
4）Opera presto/blink
5）Safari webkit
3、常见术语
Web:互联网
W3c：万维网联盟，非营利性的组织：w3.org:为互联网提供各种标准
XML：extension markup language可扩展的标记语言，用于定义文档结构
HTML：是w3c组织定义的语言标准；HTML是用于描述页面结构的语言
结构：有什么东西，该东西表示什么含义
HTML: Hyper Text Markup Language;超文本标记语言
MDN：Mozilla Development Network,Mozilla开发社区
https://developer.mozilla.org(可以查询HTML和CSS的功能应用)
CSS：CSS是用于描述页面展示的语言；CSS决定了页面长什么样子
HTML：Hyper Text Markup Language 超文本标记语言：定义网页有什么
CSS：Cascading Style Sheets 层叠样式表：定义网页中的东西长什么样子
md中写文档添加图片：复制图片，在vscode中按住alt+ctrl+v即可自动生成图片代码
扩展名决定了文件被什么应用程序打开
Emment插件：自动生成HTML代码片段
1、打出感叹号！+Tab键即可生成标准的HTML文档
2、直接输入html:5+Tab键即可生成标准的HTML文档
注释：注释为代码的阅读者提供帮助，注释不参与运行；可以用注释来改bug，调试
格式如下：<!-- 注释 -->
快捷方式：键盘Ctrl+/键
元素=起始标记+结束标记+元素内容+元素属性
元素不能相互嵌套
没有结束标记的是空元素
父元素、子元素、祖先元素、兄弟元素
属性=属性名+属性值
属性分类：
1、局部属性：某些元素特有的属性
2、全局属性：所有元素通用
4、HTML元素结构分解
<!DOCTYPE html>:文档声明，告诉浏览器，当前文档使用的HTML标准是HTML5；不写文档声明，将导致浏览器进入怪异渲染模式
<html lang="en">
</html>
这个是根元素，一个页面最多只能一个，并且该元素是所有其他元素的父元素或者祖先元素（html5版本中没有强制要去书写该元素）
lang属性：language，全局属性，表示改元素内部使用的文字是使用哪一种自然语言书写而成的
汉语：lang=“zh-CN”(一般不常用)
常用：lang="cmn-hans"
<head></head>：文档头，文档头内部的内容，不会显示到页面上
<meta>:空元素，文档的元数据：附加信息
Charset:指定网页内容编码
计算机中，低压电（0~2V）0，高压电（2~5V）1，2进制
计算机中，只能存储数字，文字和数字进行对应
字符编码表：GB2312，UTF-8：Unicode编码的一个版本（万国码）
<title></title>：网页标题
<body></body>:文档体，页面上左右要参与显示的元素都要放置在文档体中
5、语义化
1）每一个HTML元素都有具体的含义
a元素：超链接
p元素：段落
H1元素：一级标题
2）所有元素与展示效果无关
因为浏览器带有默认的CSS样式，所以每个元素有一些默认样式
元素展示到页面上的效果，应该由CSS决定
选择什么元素，取决于内容的含义，而不是显示出的效果
3）为什么需要语义化?
一、为了搜索引擎优化（seo）（每隔一段时间，搜索引擎会从整个互联网中抓取页面源代码）
搜索引擎：百度，谷歌，必应
二、为了让浏览器理解网页
阅读模式、语音模式
6、文本元素（核心的）HTML5元素周期表
1）h（h1~h6）不同的标题
快速生成多个同样的元素，可以用 元素*数字>{填写内容}
即可快速生成多个同样的元素并填写大括号里面的内容
H$*6>{$级标题}：可以生成6个不同的标题，$是占位符，会进行递加
2）p元素：paragraphs
Lorem:乱数假文，没有任何实际含义的文字，可以随意生成一段文字进行测试
例如：p*6>lorem
3）span:无语义，仅用于设置样式
某些元素在显示时会独占一行（块级元素），而某些不会（行级元素）；到了HTML5，已经弃用这种说法
4）pre：预格式化文本元素，在pre元素中的内容不会出现空白折叠，会按照源代码格式展示；
该元素通常用于在网页中显示一些代码，pre元素功能的本质是他有一个默认的CSS属性
空白折叠：在源代码中的连续空白字符（空格、换行、制表），在页面显示时，会被折叠为一个空格
5）显示代码时，通常外面套code元素，code元素表示代码区域
6）a：超链接
href属性：hyper reference:通常表示跳转地址
1、跳转到某个普通地址
2、跳转到某个锚点
3、功能链接：点击后，触发某个功能：
-执行某个JS代码，javascript:
-发送邮件：mailto:要求计算机上安装有邮件发送软件
-拨号：tel:要求用户计算机上安装有拨号软件，或者在移动端
target属性：表示跳转窗口位置
1、_self:在当前页面窗口打开
2、_blank:在新窗口页面打开
title属性：指点击对应链接的标题提示
路径/地址：
站内资源：当前网站的资源
（相对路径）
站外资源：非当前网站的资源（绝对路劲）
绝对路径书写格式：（url地址）
协议名：//主机名：端口号/路径地址（协议相同可以省略）
http协议默认端口号是80；https协议默认端口号是443
相对路径：
以./开头，./表示当前资源所在的目录
可以书写../表示返回上一级目录
相对路径中：./可以省略
7）图片元素：img元素，image，空元素
src属性：source
alt属性：当图片资源失效时，将使用该属性的文字替代图片
和a元素的联用（把img嵌套在a元素里面即可）
和map元素联用：
-name：命名：
1、第一个字母小写，第二个字母大写，驼峰命名法
2、单词之间用段斜杠相连
-map的子元素：area
衡量坐标时，为了避免衡量误差，需要使用专业的衡量工具（ps、pxcook）
-和figure元素联用
指代、定义，通常用于把图片、图片标题、描述包裹起来
子元素：figcaption
8）多媒体元素
Video视频（通常用的mp4或webm格式）controls：控制控件的显示，只能取值为controls
audio：音频（mps、和视频完全一致）
某些属性只有两种状态（布尔属性）：1、不写2、取值为属性名
布尔属性，在HTML5中，可以不用书写属性值
Autoplay:布尔属性，自动播放
muted：布尔属性，静音播放
loop：布尔属性，循环播放
兼容性：
1、旧版本不支持这两个元素；
2、不同的浏览器支持的音频格式可能不一致（两个格式都写进去）
9）列表元素
有序列表：
ol:ordered list(父元素)
li:list item（子元素）
type属性：前面序号的属性
reversed属性：倒着排序
无序列表
ul:unordered list
无序列表常用于制作菜单或新闻列表
定义列表：通常用于一些术语的定义
dl:definition list
dt:defintion title
dd:defintion description
10）容器元素：该元素代表一块区域，内部用于放置其他元素
div元素：没有语义
11）语义化容器元素：
header:通常用于表示页头，也可以用于表示文章的头部
footer：通常用于表示页脚，也可以用于文章的尾部
article:通常用于表示整篇文章
section：通常表示文章的章节
aside：通常表示附加信息
nav:导航元素
12）元素包含关系：
以前：块级元素独占一行，块级元素可以包含行级元素，行级元素不可以包含块级元素，a元素除外
现在：元素的包含关系由元素的内容类别决定
例如：查看h1元素中是否可以包含p元素(去mdn网站去查看，不可以包含p)
TIPS
1、容器元素中可以包含任何元素
2、a元素中几乎可以包含任何元素
3、某些元素有固定的子元素（ul>li,ol>li,dl>dt+dd）
4、标题元素和段落元素不能相互嵌套，并且不能包含容器元素
小技巧
1、a[href="#chapter$"]*6>{章节$}
2、id属性：全局属性，
3、生成多个章节的文本可以：
（（h2 [id="chapter$"]>{章节$}）+p>lorem)*6
4、lorem后面可以加数字表示随机生成段落的单词数
5、<a herf="#">回到顶部</a>
6、快速生成元素，例如：h2+tap键即可生成
7、按住Tab键，加缩进
8、按住shift+tab键，减缩进
9、按住ctrl+shift+回车键，重新在前面生成一行
10、按住Ctrl+回车键，重新在后面生成一行
11、按住Ctrl键+d键，依次选中相同元素
HTML实体：实体字符，HTML Entity
实体字符通常用于在页面中显示一些特殊符号
1、&单词；
2、&#数字；
常见的例子:
小于符号：<
大于符号：>
空格符号： :non-breaking space
版权符号：©：©
&符号：&
扫一扫
348
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
