HTML & CSS 简介
(本文主要说明HTML,CSS后续更新)
本文章用作笔记方便后期查找,想学习的同学也可以一起讨论。
文章目录
HTML简介
-
HTML是一隔超文本标记语言(Hyper Text Markup Language)
-
HTML和CSS的所有规范都可以在W3C中找到相应说明(建议去MDN查看中文解释)
-
所谓标记就是类似以下这种标签
<h1></h1>
CSS简介
- CSS是W3C定义的语言标准:CSS用于描述页面展示的语言(CSS决定了页面长什么样子)
【HTML表示素颜,CSS表示美颜】
-
补充知识点:
IE: Trident
Firfox: Gecko
Chrome: Webkit / Blink
Safari: Webkit
Opera: Presto / Blink
版本和兼容性
现在使用的是HTML5以及CSS3
HTML5可以在浏览器中支持
CSS3:目前没有制定完成,所以兼容性不强
XHTML: 可以认为是HTML的一种。该标准完全符合XML标准
HTML中的元素(标签、标记)
- 元素 = 起始标记(begin tag) + 结束标记(end tag) + 元素内容 + 元素属性
<a href = "http://www.baidu.com">百度一下</a>
- 元素属性 = 属性名 + 属性值
元素的属性是用来描述描述元素额外的信息
-
属性的分类
局部属性:某些元素特有的属性
全局属性:所有元素通用的属性
-
空元素:没有结束标记的元素(自闭元素)
<img src="">
-
元素的嵌套:元素不能相互嵌套(即只能包含与被包含的关系,不能产生交集不等于任何一个元素的情况)
-
文档说明:告诉浏览器当前文档使用的HTML标准为HTML5
如果没有写文档说明,则浏览器会自动选择一个标准来执行文件(进入怪异渲染模式)
<!DOCTYPE html>
- 根元素: 表示整个页面中只能有一个
<html></html>
-
head元素:
文档头:内容不会再显示到页面上
1)mete: 表示文档的源数据(附加信息)
2)charset:字符编码集
3)name = “viewport” : 表示适配手机端的标签
<!--头元素-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
语义化
-
每一个HTML元素都有具体的含义
-
所有元素与展示效果无关:
元素展示到页面中的效果,应该有CSS决定的。
浏览器具有默认的CSS效果,所以页面展示出来的样子属于浏览器默认
重要:显示什么元素,取决于内容的含义,而不是显示出的效果
-
原因:
1)为了搜索引擎的优化,每隔一段时间,搜索引擎会从整个互联网中,抓取页面源代码
2)为了让浏览器理解网页
文本元素
h:标题
h1h6:表示1级标题6级标题
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
以此类推
p:段落
正文段落
<p>这是一个段落</p>
span:【无语义】
没有具体语义,仅用于设置样式。
<span></span>
a:超链接
<a href="#">这是一个超链接</a>
【注】:以前——某些元素在显示时会独占一行(块级元素),而某些元素不会(行级元素)
到了HTML5,已经弃用这种说法。
HTML仅显示元素,不显示样式
pre:预格式化文本元素
空白折叠:在源代码中的连续空白字符(空格、换行、指标),在页面显示时会被折叠为一个空格
在pre元素内的格式,会全部显示在页面上(即源代码格式与页面格式一样)
一般用于在页面上显示一些代码
pre元素功能的本质:它有一个默认的CSS属性
<pre style="">
格式将全部显示到页面上
</pre>
code:代码区域
在页面显示代码的时候,通常在外面套上一个code元素,code表示为代码区域
<code>
var i = 1;
if(i){
consol.log(i);
}
</code>
HTML实体
实体字符(HTML Entity)
在页面中显示HTML的一些特定字符
语法规则
- &单词;
- &#数字;
小于字符
<
大于字符
>
空格
版权符号
©
&符号
&
结论
本次记录了HTML的实际意义以及HTML页面中的一些基本标签的含义进行解释说明,并对一些常用的元素进行了简单解释(仅用作说明HTML的本质以及一些常见注意点)。
再次强调,HTML决定页面中都有什么,而CSS决定页面中的东西都是什么样子。
即HTML是素颜,CSS是美颜效果。
上述说明根据W3C的相关说明进行解释,在日常编程的过程中应尽量遵循该规则