HTML5新增标签
<body> <!-- 旧标签的实现方式--> <div id="header"></div> <div id="nav"></div> <div id="article"> <div id="section"></div> </div> <div id="silder"></div> <div id="footer"></div> <!-- 新标签的实现方式--> <header></header> <nav></nav> <article> <section></section> </article> <aside></aside> <footer></footer> </body>
<header></header>头部
<nav></nav>导航
<section></section>定义文档中的节，比如章节、页眉、页脚
<aside></aside>侧边栏
<footer></footer>尾部
<article></article>代表一个独立的、完整的相关内容块，例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等。
CSS简介
CSS概念
CSS（Cascading Style Sheets）层叠样式表，又叫级联样式表，简称样式表。
CSS文件后缀名为.css。
CSS用于HTML文档中元素样式的定义。
CSS的作用
使用css的目的就是让网页具有美观一致的页面。
语法
CSS规则由两个主要的部分构成：选择器，以及一条或多条声明。
选择器通常是你需要改变样式的HTML元素。
每条声明由一个属性和一个值组成。
属性（property）是你希望设置的样式属性（style attribute）。每个属性都有一个值。属性和值被冒号分开。
<style> h1{ color:blue; font-size:9px; } </style>
CSS的引入方式
内联样式（行内样式）
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style属性可以包含任何CSS属性。
缺乏整体性和规划性，不利于维护，维护成本高。
<p style="background:orange; font-size:24px;">CSS</p>
内部样式
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用标签在文档头部定义内部样式表。
单个页面内的CSS代码具有统一性和规划性，便于维护，但是在多个页面之间容易混乱。
<head> <style> h1{ color:blue; font-size:9px; } </style> </head>
外部样式（推荐）
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件夹来改变整个站点的外观。每个页面使用标签链接到样式表。标签在文档的头部。
<link rel="stylesheet" href="xxx.css" type="text/css" />
选择器
CSS语法规则由两个主要的部分构成：选择器，以及一条或多条声明（样式）。
全局选择器
可以与任何元素匹配，优先级最低，一般做样式初始化。
<style> *{ margin:0; padding:0; } </style>
元素选择器
HTML文档中的元素，p、b、div、a、img等。
也可以叫标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”。
<style> p{ font-size:9px; } </style>
注意：
1.所有的标签，都可以是选择器。比如说ul、li、dt、dl、input、div等等。
2.无论这个标签藏的多深，一定能够被选择上。
3.选择的所有，而不是一个。
类选择器
规定用圆点 . 来定义，针对你想要的所有标签使用。优点是十分灵活。
<head> <style> .oneclass{ width:800px; } </style> </head> <body> <h2 class="oneclass">hello</h2> </body>
class属性的特点
- 类选择器可以被多种标签使用。
- 类名不能以数字开头。
- 同一个标签可以使用多个类选择器。用空格隔开。
<body> <h2 class="classone classtwo">hello</h2> <!--正确--> <h2 class="classone" class="classtwo">hello</h2> <!--错误--> </body>
ID选择器
针对某一个特定的标签来使用，只能使用一次。css中的ID选择器以#来定义。
注意：
1.ID是唯一的。
2.ID不能以数字开头。
<body> <p id="text">hello1</p> <p id="text">hello2</p> <!-- 在ID选择器中这样是不规范的，尽管能够实现效果--> <p class="classone">Hello1</p> <!-- 在类选择器中是可以的--> <p class="classone">Hello2</p> </body>
合并选择器
语法：选择器1，选择器2，...{}
作用：提取共同的样式，减少重复代码。
<style> h1{ color:blue; font-size:9px; } p{ color:blue; font-size:9px; } <!-- 相当于上面两个选择器--> h1,p{ color:blue; font-size:9px; } </style>
选择器的优先级
CSS中，权重用数字衡量：
- 元素选择器的权重为：1
- 类选择器的权重为：10
- id选择器的权重为：100
- 内联样式的权重为：1000
Web网页制作-知识点（3）——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二：https://developer.aliyun.com/article/1530974
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)
![[HTML、CSS]细节与使用经验](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635950/20241110/4a6bb78b9c294263bd2e005a5c2642e0.gif?x-oss-process=image/resize,h_160,m_lfit)