HTML CSS学习2
文章目录
- 资料来源
- 注释
- 元素
- 元素的定义
- 元素的嵌套
- 标准的文档结构
- 文档声明
- 根元素
- 文档头
- 文档体
- 语义化
- 文本元素
- h元素
- p元素
- span元素
- pre元素
- a元素
- 1.不同页面跳转
- 2.同一页面的锚点
- 3.功能性链接
- a元素其他属性介绍
- HTML实体
资料来源
https://baike.baidu.com/item/%E6%96%87%E6%A1%A3%E4%BD%93/7975589?fr=aladdin
https://baike.baidu.com/item/UTF-8/481798?fr=aladdin
https://www.bilibili.com/video/av57100756?from=search&seid=308650809797541443
注释
注释的书写方法：
在书写时不需要刻意的去书写这个格式，将要注释的内容选中 按 Ctrl+/
此注释可用于多行注释。
如果需要在一行没有字的地方加注释，也可以通过此快捷键直接加入注释格式。
元素
元素的定义
元 素 = 起 始 标 记 （ b e g i n t a g ） + 结 束 标 记 （ e n d t a g ） + 元 素 内 容 + 元 素 属 性 元素=起始标记（begin tag）+结束标记（end tag）+元素内容+元素属性 元素=起始标记（begintag）+结束标记（endtag）+元素内容+元素属性
元 素 属 性 = 属 性 名 + 属 性 值 元素属性=属性名+属性值 元素属性=属性名+属性值
注意，元素都是小写的。
百度
如上例，为起始标签，为结束标签，元素属性为 href=“http://baidu.com”，元素内容通常为显示的值。上述代码为在网页的显示结果为：
属性的分类
全局属性和局部属性
- 局部属性：某些元素特有的属性。正如
百度，其中href表示超链接的地址，就是该元素的特有属性。 - 全局属性：所有元素通用的属性，在所有的元素内通用的元素。如title属性，就可以在所有的元素中使用。
空元素：没有结束标记的元素
空元素的两种写法
1."UTF-8">
2."UTF-8" />
现在写第一种写法就可，但是为了保险，避免在使用某些浏览器显示时出错，所以要养成代码写第二种的方法。
元素的嵌套
元素不能互相嵌套
即以上的书写方法是错误的
父元素、子元素、祖先元素、后代元素、兄弟元素（拥有同一个父元素的元素）。
标准的文档结构
Emmet插件：自动生成HTML 代码片段
方法一： html:5
方法二：<!DOCTYPE html>
方法三：！
回车后生成如下代码
"en">
"UTF-8">
"viewport" content="width=device-width, initial-scale=1.0">
"X-UA-Compatible" content="ie=edge">
Document
此处写代码
文 档 结 构 ： 文 档 头 + 文 档 体 文档结构：文档头+文档体 文档结构：文档头+文档体
每一个文档的书写格式都是一样的
文档声明
文档声明，告诉浏览器，告诉文档使用的HTML标准是HTML5。
为了避免出错，很多浏览器都支持多种标准，HTML4、HTML5等，所以防止显示出错，开始要加上文档声明。不写文档声明，浏览器将进入怪异渲染模式。
根元素
定义：
一个页面只能有一个元素，是左右的元素的父元素或者祖先元素。HTML5中不强制要求写此元素，但是在XHTML中需要，为了兼容以前的标准，所以要最好加上。
lang属性是全局属性，表示该元素中的文字是使用哪一种自然语言描述而成的。
中文是 zh-CN ,但是这种写法有点过时了，一般情况下写cmn-hans。
文档头
不会显示在页面上。
"UTF-8">
"viewport" content="width=device-width, initial-scale=1.0">
"X-UA-Compatible" content="ie=edge">
Document
其中，指文档的元数据，即附加信息，跟显示无关，告诉浏览器的信息。
属性
charset：指定网页内容编码。
UTF-8:
UTF-8（8位元，Universal Character Set/Unicode Transformation Format）是针对Unicode的一种可变长度字符编码。它可以用来表示Unicode标准中的任何字符，而且其编码中的第一个字节仍与ASCII相容，使得原来处理ASCII字符的软件无须或只进行少部份修改后，便可继续使用。因此，它逐渐成为电子邮件、网页及其他存储或传送文字的应用中，优先采用的编码。
文档体
在HTML语言中， 和之间的内容是整个页面的主体部分，也是该文件的重点所在，即文档体。 标记一般不省略，标签之间的文本是正文，是在浏览器要显示的页面内。HTML超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。
语义化
定义：每个HTML元素都有具体的含义（此处指99%以上的元素，为了兼容以前的版本，有一部分元素没有含义）。如a元素为超链接，p元素为段落，h1元素为一级标题，且所有元素于展示效果无关（由CSS决定）,浏览器带有默认的CSS代码。
选择元素根据元素的内容的含义，而不是因为它们的格式。
意义：
- 搜索引擎优化（SEO）。
&emso;每隔一段时间，搜索引擎会从整个互联网中，抓取页面源代码。 - 浏览器理解网页
阅读模式、语音模式等。
使网页更好的满足各种需求。
文本元素
HTML5支持的所有元素http://www.xuanfengge.com/funny/html5/element/
以下着重介绍常用的元素：
h元素
- 标题元素，标题从一级标题到六级标题。 且并不是一级标题比二级三级的大和和元素的样式无关。
知识补充
- ctrl+enter 跳转到下一行
- ctrlr+shift +ente 当前行前面加一行
h相关快捷操作：
1. h1*n 一次可以生成n个h1元素
2. {}指普通文本 可以生成多个内容相同的
如 h1{输入内容}*3
显示效果
输入内容
输入内容
输入内容
3. h1{这是$级标题}*3
内容显示：
这是1级标题
这是2级标题
这是3级标题
p元素
定义：段落。两个段落间隔一行。
p*3
显示效果
lorem 元素
可以自动输入一段乱码
如Lorem ipsum dolor sit amet consectetur, adipisicing elit. Alias tempora consectetur nostrum explicabo, >sequi dignissimos tempore praesentium officiis quibusdam! Blanditiis placeat veritatis quisquam rerum >repudiandae tempore! Repudiandae quia minus illo.
在lorem后面加数字代表着自动显示几个单词。如lorem1 即只生成一个单词。
span元素
定义： 容器 ，没有语义的元素，仅用于设置样式。使用时不会换行。
补充知识
在前面h和p元素,某些元素在显示时会独占一行（块级元素），而有些元素不会（行级元素）,但是在HTML5中已经停用块级元素和行级元素的说法。将块级元素中假如display:inline属性，就可以让块级元素独占一行，而在行级元素中加入display:block属性，即可让行级元素独占一行。
代码示例：
"color:red">红"color:green">绿
显示效果：
pre元素
定义：预格式化文本元素。
空白折叠：在源代码中的连续空白字符（空格，换行，折叠），在页面显示时会被折叠为一个空格。
空白折叠意义：将源代码的书写和页面的显示区分开。
而在pre中不会出现空白折叠，在其内部会根据源代码格式显示用于在网页上显示源代码，其实用其他元素也可实现，在属性中加style="white-space:pre"即可。由于它有一个css属性 。
在用pre显示代码的情况下，还需要假如code元素，以便于更好的语义化。也可以直接在code中加入属性
快捷键补充
缩进 tab键
缩减 shift+tab键
a元素
作用： 1.不同页面的跳转 2.同一页面的锚点 3.功能性链接
三种作用的使用示例
1.不同页面跳转
2.同一页面的锚点
实验方法：开头处加上，a*6[href="#章节$"]>{章节$} ，产生六个章节链接相当于目录。再使用((h1[id="章节$"]>{章节$})+p>lorem1000)*6 在后面加上六个字数为1000的段落，并且给每个段落的表头起名为章节1，章节2…
起名即给h1加上id属性
id属性：全局属性 ，表示元素在文档中的唯一编号
技巧补充:
隔行同列选择, 滚轮按住选择。
锚链接和超链接本质上一样，地址都发生变化，但是锚链接不会刷新页面。
如果回到顶部的话直接加# 就默认回到顶部，这个是浏览器的规则
如果锚链接在同一个页面中不会刷新，如果在不同的页面也会刷新
3.功能性链接
定义：顾名思义，就是点击后，触发某个功能。
功能举例：
- 执行JS代码
"Javascript:alert('你好')"> 你好
功能：弹出你好
- 发送邮件
"mailto:[email protected]"> 你好
href="mailto:邮箱地址"
前提：
要求用户计算机上安装邮件发送软件，如exchange
- 拨号
"tel:电话号码"> 你好
前提：用户计算机上有拨号软件，或者使用的是移动端访问
a元素其他属性介绍
- target属性
表示跳转窗口位置
有两种取值
_self:在当前的窗口中打开
_blank:在新窗口中打开 - title属性
也可以使用_tiltle属性，即当鼠标放上就可以显示的文字
HTML实体
在书写代码的时候，有一些符号有特殊的含义，实体字符通常用于在页面中显示一些特殊的符号。
有两种方法
- &单词；
- &#数字；
以下为常用的举例：
<; 小于符号
>; 大于符号
; 空格
©; 版权符号
剩余符号查询的网站:
https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references