HTML & CSS 简介

最新推荐文章于 2024-06-25 22:00:00 发布

戒烟失败的老可爱

最新推荐文章于 2024-06-25 22:00:00 发布

阅读量182

点赞数

分类专栏： HTML 文章标签： html css visual studio code html5

本文链接：https://blog.csdn.net/qq_40749255/article/details/119421928

版权

HTML 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

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：标题

h1_{h6：表示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的一些特定字符

语法规则

&单词;
&#数字;

小于字符

&lt;

大于字符

&gt;

空格

&nbsp;

版权符号

&copy;

&符号

&amp;

结论

本次记录了HTML的实际意义以及HTML页面中的一些基本标签的含义进行解释说明，并对一些常用的元素进行了简单解释（仅用作说明HTML的本质以及一些常见注意点）。
再次强调，HTML决定页面中都有什么，而CSS决定页面中的东西都是什么样子。
即HTML是素颜，CSS是美颜效果。
上述说明根据W3C的相关说明进行解释，在日常编程的过程中应尽量遵循该规则

戒烟失败的老可爱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML & CSS 简介

HTML & CSS 简介（本文主要说明HTML，CSS后续更新）本文章用作笔记方便后期查找，想学习的同学也可以一起讨论。文章目录HTML & CSS 简介HTML简介CSS简介版本和兼容性HTML中的元素（标签、标记）语义化文本元素h：标题p：段落span:【无语义】a:超链接pre:预格式化文本元素code：代码区域HTML实体实体字符（HTML Entity）语法规则小于字符大于字符空格版权符号&符号结论HTML简介HTML是一隔超文本标记语言（Hyper Tex
复制链接

扫一扫