HTML、CSS-CSDN博客

本文链接：https://blog.csdn.net/Galaxy_KVK/article/details/116176484

本文介绍了HTML、CSS的基础知识，包括HTML的结构层、表现层和行为层，以及CSS的选择器和引入方式。强调了W3C标准和HTTP协议的重要性，推荐了前端开发工具如Vscode、HBuilder和Sublime Text，并详细讲解了HTML文档结构和常用标签。同时，讨论了CSS的语法结构和选择符优先级，以及不同引入方式的优先级规则。此外，还提及了CSS命名规范。

摘要由CSDN通过智能技术生成

1.HTML+CSS+JAVAscript

结构层：html5—XHTML HTML4.0版本超文本标记语言
表现层：css3.0 -css2.0版本层叠样式表
行为层：javascript 脚本语言用于定义整个网站的行为
W3C -----万维网联盟定义一系列的标准 ----Web标准
符合HTTP协议面向连接符合Web通信的标准
我们所有的web项目都要尊崇W3C所提供的标准和HTTP协议。

2.超文本标记语言

英文：Hyper Text Markup Language
区分：
HTML ----超文本标记语言---展示数据
XML ---- 可扩展标记语言 ----存储数据配置文件 json
内容：
HTML ----固定标签 h1 body
XML ---- 没有固定标签任何标签都可以。标签---Tag
关于HTML+CSS 部分的知识内容大家可以到W3C的网站去学习

3.前端工具

推荐大家使用的前端工具
Vscode hbuilder sublime_text 等等

在sublime中，使用！+Tab键可以自动生成以下模板

注意文件类型的切换

HTML文档结构

<!DOCTYPE html> 文档类型 html ----MIME类型
<html lang="en"> language=“en” zh-cn 属性节点
<head>
   <meta charset="UTF-8"> 源编码字符集----utf-8
   <title>Document</title> 标题
</head>
<body>
   正文
</body>
</html>

Html的格式由两个种类的标签构成，例如：

双标签<html> </html>

单标签<hr> 、 <br/>换行

Tag -----标签
Meta -----源 metadata 源数据
<html> 元素节点
Lang=“utf-8” 属性节点
<body>文本</body> 文本节点

乱码一般出现原因：字符集不统一
当我们在国内打开的浏览器的默认的编码格式都是GBK
需要把原有的GBK的格式修改成全球统一的格式 ---UTF-8

基本常用标签

标题标签
<hn> n = 1-6 表示的是网页或者文章的标题字体大小从大到小默认加粗
<hr> 标尺线
<p> 行的控制
align 属性节点 3个值 left center right
<div> 区域划分

颜色： rgb(255,255,255) 0-255 r-red g-green b- blue
#000000~#ffffff 以十六进制的方式去表示颜色
使用颜色的单词英文 pink orange yellow black white gold

Body 属性
text 用于表示正文的文本颜色
bgcolor 用于表示背景颜色
background 用于表示文档的背景图像一般不会使用图片作为页面的背景

至于其他标签不再赘述，大家可以在W3CSCHOOL网站查阅（包括色值）

https://www.w3school.com.cn/cssref/index.asp

4.CSS

层叠样式表
英文名称：Cascading Style Sheets

CSS的语法结构

<h1 style ="color:blue" >Document</h1>

在标签内写style=“属性：属性值”

选择符{ 属性：属性值 }

选择符

1.标签选择符：以标签命名的选择符

p{ color : blue; }

2.id选择符：通常描述一个标签具有唯一的样式，标识为#

#first {color : blue; }

<p  id="first"> 内容 </p>

3.class选择符通常用于修饰一组或者一系列具有相同样式的标签，标识为 .(英文句号)

 .blue{
	  	color:blue;
 }


<p class="blue">内容一</p>
<p class="blue">内容二</p>
<p class="blue">内容三</p>
<p class="blue">内容四</p>
<p class="blue">内容五</p>

4. 通配符选择器
*{ color:red;}
的对页面中所有的标签都起作用
什么时候使用通配符选择器
一般情况下在css页面刚开始的时候描述通用属性

*{
        	pading:0;
        	margin:0;
  }

5. 包含选择符
语法e1 e2{属性：值} e1 是e2的父节点标签
标识：空格
包含关系

 ul #header
{
        	pading:0;
        	margin:0;
        	list-style: none;
 }

6.选择符分组
标识：逗号
用它可以替代通配符选择符

body,h1,div,ul,li
{
	    	pading:0;
        	margin:0;
        	list-style: none;
}

7.标签指定式选择符
标签指定式选择符：如果既想使用id或class，也想同时使用标签选择符

h1#content{}

8．组合选择选择符前面的1-7种组合性使用

CSS引入方式

1.行内样式---在标签中写入style属性

<h1 style="color:blue">内容</h1>

2.内嵌样式---在<head> </head>内书写

<style type="text/css">
	  p{
	  	color:blue;
	  }

	  #first{
	  	color:gray;
	  }

	  .blue{
	  	color:pink;
	  }

</style>

3.外链样式---新建一个CSS文件链入HTML文件中

<link rel="stylesheet" type="text/css" href="./css/1.css">

4.导入样式---内嵌与外链的混合

选择符的优先级？和导入方式的优先级？
同时存在这几种情况下那么应该优先显示谁所修饰的目标？

行内样式>内嵌样式>外链样式>导入样式
四种导入方式：

他们的优先级不是固定的，以哪种方式举例修饰的目标最近，那么谁的优先级就越高 --- 就近原则

CSS命名

关于css命名法，和其他的程序命名差不多，主要有三种：驼峰，帕斯卡，匈牙利法

驼峰命名法：除第一个单词首字母小写外，其余所有单词首字母都大写#headerBlock
帕斯卡命名法：与驼峰相似，区别都是所有单词首字母都大写#HeaderBlock
匈牙利命名法：是需要在名称前面加上一个或多个小写字母作为前缀#head_block

暂时写到这里，HTML与CSS内容不少，CSDN有不少基础教学，这里仅仅列举了一些细节，对你有帮助的话，不妨点个赞，谢谢。