标签约定放在内容的最前面。

        标签主要的属性有四种，分别是charset、name、http-equiv和content。下面来具体介绍一下吧~

 ①charset

•  charset  是标签的一个很重要的属性，是用来定义文档的字符编码。如果设置得不正确，浏览器可能无法正确解码，就会显示乱码。
•  “UTF-8” 是其中的一种字符编码，它被称为万国码，囊括所有国家所需字符。charset=”UTF-8”是告知浏览器此页面属于什么字符编码格式，下一步浏览器做好“翻译”工作。
• 常见的字符编码有：gb2312、gbk、unicode、utf-8。

 ②name和content

        name属性用来定义元数据的名称，与content属性包含的值相关联，主要用于描述网页，以便于搜索引擎的查找。它的格式是这样的

下面列举了几个常用的name值

Keyword（关键字）

作用：keywords可以为搜索引擎提供的关键字列表，可以提高被搜索到的几率

Description（简介）

作用：description用来告诉搜索引擎你的网站主要内容，它的内容应该简短精确。一些浏览器将其用作书签页面的默认描述。

viewport（视口标签）

作用：提供有关视口初始大小的提示，仅供移动设备使用。 

③http-equiv

http-equiv类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确的精确的显示网页内容。与之对应的属性值为content,content中的内容就是各个参数的变量值。

4. HTML常用标签

 ①标题标签

 

• 标题标签，共有六级

1. <h1>这里是一级标题h1>
2. <h2>这里是二级标题h2>
3. <h3>这里是三级标题h3>
4. <h4>这里是四级标题h4>
5. <h5>这里是五级标题h5>
6. <h6>这里是六级标题h6>

​

 ②段落标签

 

• 用于定义段落
• 浏览器会自动在每个

  元素前后添加一个空行。

1. <p>我是一个段落标签p>
2. <p>
3. 在源代码中，
4. 这一段
5. 包含很多行，
6. 但浏览器
7. 会忽略它。
8. p>

​

  ③换行标签
 

•  
  标签可以简单地开始新的一行
• 而当浏览器遇到

  标签时，通常会在相邻的段落之间插入一些垂直的间距。

• 请使用
  标签来插入换行符，而不是用它来增加段落之间的空白。

1. <p>我将在这里换行<br/>我将在这里换行p>
2. <p>我是第三行的内容p><br/>
3. <p>我是第四行的内容p>

​

 ④水平线标签

---

 

•  用于在 HTML 页面中分隔内容，或定义内容上的变化

---

 ⑤文本格式化标签 

 文字 

 这里给出加粗、倾斜、下划线、删除线的各两种表示方法

标签名	效果
b、strong	加粗
i、em	倾斜
u、ins	下划线
s、del	删除线

 列表 

1.  有序列表：
   （可以是数字或者字母的顺序）
   •  无序列表：
     • 列表中的项目可以用
     • 来设置（可嵌套）
     1. <ol>
     2. <li>HTMLli>
     3. <li>CSSli>
     4. <li>JavaScriptli>
     5. ol>
     7. <ol start="500">
     8. <li>aaali>
     9. <li>bbbli>
     10. <li>cccli>
     11. ol>
     12. <ul>
     13. <li>1.1li>
     14. <li>
     15. <ul>
     16. <li>2.1li>
     17. <li>2.2li>
     18. <li>2.3li>
     19. ul>
     20. li>
     21. <li>3.1li>
     22. ul>
     

     ​

      表格 

     •  标签定义了 HTML 表格，可以包裹多个
     • 一个 HTML 表格由一个
     元素和一个或多个 、定义表格行，可以包裹多个

     定义表格的大标题

     1. <table border="1" width="200px" height="200px">
     2. <caption>2024蓝旭前端课程安排caption>
     3. <tr>
     4. <th>课程th>
     5. <th>授课人th>
     6. tr>
     7. <tr align="center">
     8. <td>HTML+CSS入门td>
     9. <td>lzntd>
     10. tr>
     11. <tr align="center">
     12. <td>CSS进阶+设计td>
     13. <td>syctd>
     14. tr>
     15. <tr align="center">
     16. <td>JS入门td>
     17. <td>cjytd>
     18. tr>
     19. <tr align="center">
     20. <td>JS进阶+复习td>
     21. <td>cjtd>
     22. tr>
     23. <tr align="center">
     24. <td>DOM+BOMtd>
     25. <td>xdstd>
     26. tr>
     27. <tr align="center">
     28. <td>网络请求td>
     29. <td>dptd>
     30. tr>
     31. table>

      表单 

      a. 标签定义输入字段，其元素可以通过去设置type属性值显示不同样式

     type属性值	显示效果
text	文本框，输入单行可直接查看的文本
password	密码框，输入不可直接查看的密码
radio	单选框，用于在多项元素中选择一项
checkbox	多选框，用于选择多项元素
file	文件选择，用于上传本地文件
submit	提交按钮
reset	重置按钮
button	普通按钮，默认无功能

     b. 标签为 input 、select、textarea等元素定义标注，它的for属性应当与相关元素的 id 属性相同。

     1. <p>我要学...p>
     2. <input type="checkbox" id="html"/>
     3. <label for="html">HTMLlabel>
     4. <input type="checkbox" id="css"/>
     5. <label for="css">CSSlabel>
     6. <input type="checkbox" id="js"/>
     7. <label for="js">JavaScriptlabel>

      

     c. 标签</strong>定义多行文本输入控件。</p> <p>d .<strong><button>标签</strong>定义可点击的按钮。</p> <ul><li><button> 控件 与 <input type="button"> 相比，提供了更为强大的功能和更丰富的内容。</li><li><button> 与 </button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容（以及像 <i>、<b>、<strong>、<br>、<img> 等标签）。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。</li></ul><p>e. <strong><select> 标签</strong>配合<strong><option>标签</strong>可以创建下拉列表及其可用选项。</p> <ul><li>常用于表单中，在需要提交表单时，需要 name 属性引用表单数据（如果省略 name 属性，下拉列表中的数据将不会被提交）。</li><li>需要使用 id 属性将下拉列表与标签（label）相关联。</li></ul><ol><li> <span><<span>select</span>></span></li><li> <span><<span>option</span>></span>我是下拉列表第1个选项<span></<span>option</span>></span></li><li> <span><<span>option</span>></span>我是下拉列表第2个选项<span></<span>option</span>></span></li><li> <span><<span>option</span>></span>我是下拉列表第3个选项<span></<span>option</span>></span></li><li> <span></<span>select</span>></span></li></ol> <p><img alt="" height="124" src="/d/file/p/20240401/b7cd320c35fbf7ce8a20513bc5f76ecb.png" width="299"></p> <p></p> <p>f. <strong>标签</strong>用于为接收用户输入创建 HTML 表单。</p> <p> 注意：form表单的action属性！</p> <ul><li>form标签的action属性是一个表单当中必须的属性，action属性规定当提交表单时，向何处发送表单数据。</li><li>action属性的值是表单提交给的url，如果我们没有设置action属性，那么默认的表单还是提交给当前页面。</li></ul><p> <span><strong> ⑥媒体标签 </strong></span></p> <p> <span> 图片 </span></p> <ul><li><strong><img>标签</strong>用于在 HTML 页面中嵌入图像。</li><li>从技术上讲，实际上并没有将图像插入到网页中，而是将图像链接到了网页。<img> 标签创建了一个容器，用于引用图像。</li></ul><p> img有两个必须的属性</p> <table cellpadding="1" cellspacing="1"><tbody><tr><td><strong>src</strong></td><td>想引用的图像的地址（网上的图片路径or本地的图片路径）</td></tr><tr><td><strong>alt</strong></td><td>如果由于某种原因无法显示图像，则指定图像的替代文本</td></tr></tbody></table> <ol><li> <span><<span>img</span> <span>src</span>=<span>"bears.jpg"</span> <span>alt</span>=<span>"we bare bears"</span> /></span></li><li> <span><<span>img</span> <span>src</span>=<span>"http://spider.ws.126.net/194ab048eac55aec9952499378437b23.jpeg"</span> <span>alt</span>=<span>"小猪佩奇"</span> /></span></li></ol> <p><span> 音频 </span></p> <ul><li><strong>标签</strong>可以用于在页面中插入音频</li><li>音频标签支持的三种格式：MP3，Wav，Ogg</li></ul> <span><<span>audio</span> <span>src</span>=<span>"音频地址"</span> <span>controls</span>></span><span></<span>audio</span>></span> <table cellpadding="1" cellspacing="1"><tbody><tr><td><strong>属性</strong></td><td><strong>功能</strong></td></tr><tr><td>src</td><td>音频路径</td></tr><tr><td>controls</td><td>显示播放音频的控件</td></tr><tr><td>autoplay</td><td>自动播放（部分浏览器不支持）</td></tr><tr><td>loop</td><td>循环播放</td></tr></tbody></table> <p><span> 视频 </span></p> <ul><li><strong><video>标签</strong>可以用于在页面中插入视频</li><li>视频标签支持的三种格式：MP4，WebM，Ogg</li></ul> <span><<span>video</span> <span>src</span>=<span>"视频地址"</span> <span>controls</span>></span><span></<span>video</span>></span> <table cellpadding="1" cellspacing="1"><tbody><tr><td><strong>属性</strong></td><td><strong>功能</strong></td></tr><tr><td>src</td><td>视频路径</td></tr><tr><td>controls</td><td>显示播放视频的控件</td></tr><tr><td>autoplay</td><td>自动播放（谷歌浏览器中静音播放需要配合muted）</td></tr><tr><td>loop</td><td>循环播放</td></tr></tbody></table> <p>  <span><strong> ⑦超链接标签 </strong></span></p> <ul><li>  标签定义超链接，用于从一个页面链接到另一个页面。</li><li><span> </span><span> 元素最重要的属性是 href 属性，它指示链接的目的地（可以是外部链接or内部链接）。</span></li><li> 空链接：href=“#”</li></ul><ol><li> <span><<span>a</span> <span>href</span>=<span>"http://www.baidu.com"</span>></span>戳我跳转！！！<span></<span>a</span>></span></li><li> <span><<span>a</span> <span>href</span>=<span>"http://www.bilibili.com"</span>></span></li><li> <span><<span>img</span> <span>src</span>=<span>"bears.jpg"</span> <span>alt</span>=<span>"we bare bears"</span> <span>style</span>=<span>"width: 200px; height: 100px;"</span> <span>title</span>=<span>"去b站观看吧~"</span> /></span></li><li> <span></<span>a</span>></span></li><li> <span><<span>a</span> <span>href</span>=<span>"./turnTo.html"</span>></span>去另一个页面看看吧~<span></<span>a</span>></span></li></ol> <blockquote contentScore="38"> <p><strong> target：链接窗口的打开方式</strong></p> <ul><li>_blank：新窗口打开。</li><li>_parent：在父窗口中打开链接。</li><li>_self：默认，当前页面跳转。</li><li>_top：在当前窗体打开链接，并替换当前的整个窗体(框架页)。</li></ul></blockquote> <p><span><strong> ⑧div标签和span标签 </strong></span></p> <p> <span> div </span></p> <ul><li> div是division的简写，division意为分割、区域、分组。</li><li>标签定义 HTML 文档中的分割或部分，可以把文档分割为独立的、不同的部分。</li><li>标签可以包含段落，表格等内容，用于放置不同的内容。</li><li>一般我们在网页通过div来布局定位网页中的每个区块。</li></ul><p> <span> span </span></p> <ul><li><span>标签是一个行内容器，用于标记文本的一部分，或文档的一部分。</li></ul><ol><li> <span><<span>div</span>></span></li><li> <span><<span>p</span>></span>div是division的简写，division意为分割、区域、分组。<span></<span>p</span>></span></li><li> <span></<span>div</span>></span></li><li> <span><<span>div</span>></span></li><li> <span><<span>p</span>></span>div是块级元素，在浏览器显示时通常会以新行开始。<span></<span>p</span>></span></li><li> <span></<span>div</span>></span></li><li> <span><<span>span</span>></span>span是行内元素，一行可以有多个<span></<span>span</span>></span></li><li> <span><<span>span</span>></span>span是行内元素，一行可以有多个<span></<span>span</span>></span></li></ol> <p><img alt="" height="100" src="/d/file/p/20240401/dbd0af80f81185c2936faaaa3a1f1cfb.png" width="505"></p> <p><span> 二者的共性 </span></p> <ul><li> 二者都是<strong>无语义的布局标签</strong> <img alt="" src="/d/file/p/20240401/09a72e25e89ce8328078018904d6e9cc.png"></li></ul><p><span> 二者的区别 </span></p> <ol><li>div是<strong>块级元素</strong>。</li><li>span 是<strong>内联元素。</strong></li></ol><table cellpadding="1" cellspacing="1"><tbody><tr><td><strong>块级元素</strong></td><td><strong>行内元素</strong></td></tr><tr><td>总是在新一行开始，独占一行</td><td>相邻的元素排在一行，直到一行排不下才会换行</td></tr><tr><td>高度、行高、内外边距均可设置</td><td>高度、行高、内外边距不可改变</td></tr><tr><td>默认情况下，其宽度自动填满其父元素宽度</td><td>其宽度由元素的内容撑开，不可改变</td></tr><tr><td>可以容纳内联元素和其他块元素</td><td>只能容纳内联元素和其他块元素</td></tr><tr><td>div、ul、li、table、p、h1等</td><td>span、a、em、i、img、td、button等</td></tr></tbody></table> <h3> 5. HTML特殊字符编码</h3> <table cellpadding="1" cellspacing="1"><tbody><tr><td><strong>编码</strong></td><td><strong>显示效果 </strong></td><td><strong>描述</strong></td></tr><tr><td>< </td><td>< </td><td>小于号或显示标记</td></tr><tr><td>> </td><td>></td><td>大于号或显示标记</td></tr><tr><td>&</td><td>& </td><td>可用于显示其它特殊字符</td></tr><tr><td>"</td><td> “ </td><td>引号</td></tr><tr><td>® </td><td>®</td><td>已注册</td></tr><tr><td>©</td><td>© </td><td>版权</td></tr><tr><td>™ </td><td>™</td><td>商标</td></tr><tr><td>  </td><td>  </td><td>半个空白位</td></tr><tr><td>   </td><td>    </td><td>一个空白位</td></tr><tr><td>  </td><td>    </td><td>不断行的空白</td></tr></tbody></table> <h3> 6. HTML注释怎么写</h3> <span><!-- 我是注释部分 --></span> <ul><li>注释快捷键：<strong>Ctrl + /</strong></li></ul><h2> 三、CSS基础</h2> <h3>1. 什么是CSS</h3> <ul><li>CSS 指的是层叠样式表 / 级联样式表 (<strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets)</li><li>CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素</li><li>CSS 节省了大量工作，它可以同时控制多张网页的布局</li><li>CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</li></ul><h3>2.为什么我们需要CSS</h3> <p>        从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。<br>         随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。</p> <h3>3.CSS发展史</h3> <p>CSS发展至今，已经出现了4个版本</p> <p><strong>1. CSS1.0</strong></p> <p>19912月W3C发布了第一个有关样式的标准CSS1.0。这个版本中，已经包含了的相关font的相关属性、颜色与背景的相关属性、文字的相关属性、box的相关属性等。</p> <p><strong>2. CSS2.0</strong></p> <p>1985年5月，CSS2.0正式推出。这个版本推荐的是内容和表现效果分离的方式，并开始使用样式表结构。</p> <p><strong>3. CSS2.1</strong></p> <p>2004年2月，CSS2.1正式推出。它在CSS2.0的基础上略微做了改动，删除了许多不被浏览器支持的属性。</p> <p><strong>4. CSS3</strong></p> <p>早在2001年，W3C就着手开始准备开发CSS第三版规范。虽然完整的、规范权威的CSS3标准还没有尘埃落定，但是各主流浏览器已经开始支持其中的绝大部分特性。</p> <h3>4. CSS引用方式</h3> <h4>①内嵌式</h4> <ul><li>内嵌式即为在head标签中设置style标签，并在style标签中设置内容</li></ul><ol><li><span><!DOCTYPE <span>html</span>></span></li><li><span><<span>html</span> <span>lang</span>=<span>"en"</span>></span></li><li><span><<span>head</span>></span></li><li> <span><<span>meta</span> <span>charset</span>=<span>"UTF-8"</span>></span></li><li> <span><<span>meta</span> <span>name</span>=<span>"viewport"</span> <span>content</span>=<span>"width=device-width, initial-scale=1.0"</span>></span></li><li> <span><<span>title</span>></span>基础CSS学习<span></<span>title</span>></span></li><li> <span><<span>style</span>></span><span></span></li><li> <span>h1</span>{</li><li> <span>color</span>: blue;</li><li> }</li><li> <span></<span>style</span>></span></li><li><span></<span>head</span>></span></li><li><span><<span>body</span>></span></li><li> <span><<span>h1</span>></span>今天开始我要学习CSS！<span></<span>h1</span>></span></li><li><span></<span>body</span>></span></li><li><span></<span>html</span>></span></li></ol><span data-report-view='{"spm":"1001.2101.3001.7365"}'><img src="/d/file/p/20240401/9e1637fd78485a22cf93ee4ea0be31b9.png" alt="" title=""></span> <h4>②外联式</h4> <ul><li>外联式即为将CSS样式写在一个单独的css文件里，并在head标签中以<link rel="stylesheet" href="https://blog.csdn.net/m0_74242351/article/details/路径">的方式引入它，使CSS文件对本网页的样式有效。</li></ul><p><img alt="" height="150" src="/d/file/p/20240401/e995d1b9042a0c798296253a89b9f20f.png" width="380"></p> <ol><li><span><!DOCTYPE <span>html</span>></span></li><li><span><<span>html</span> <span>lang</span>=<span>"en"</span>></span></li><li><span><<span>head</span>></span></li><li> <span><<span>meta</span> <span>charset</span>=<span>"UTF-8"</span>></span></li><li> <span><<span>meta</span> <span>name</span>=<span>"viewport"</span> <span>content</span>=<span>"width=device-width, initial-scale=1.0"</span>></span></li><li> <span><<span>title</span>></span>基础CSS学习<span></<span>title</span>></span></li><li> <span><<span>link</span> <span>rel</span>=<span>"stylesheet"</span> <span>href</span>=<span>"./myCSS.css"</span> /></span></li><li><span></<span>head</span>></span></li><li><span><<span>body</span>></span></li><li> <span><<span>h1</span>></span>今天开始我要学习CSS！<span></<span>h1</span>></span></li><li><span></<span>body</span>></span></li><li><span></<span>html</span>></span></li></ol> <h4>③行内式</h4> <ul><li> 行内式即为将CSS样式写在标签的style属性中</li></ul> <span><<span>h1</span> <span>style</span>=<span>"color: blueviolet;"</span>></span>今天开始我要学习CSS！<span></<span>h1</span>></span> <p><span>  注意：</span></p> <ul><li>多重样式可以重叠，覆盖。</li><li>这三种的优先级为——<strong>行内样式 </strong>> <strong>内嵌样式 </strong>> <strong>外部样式</strong><span>（就近原则）</span></li></ul><p> <img alt="" height="417" src="/d/file/p/20240401/7ef3f380119519efb25c342d0b393a44.jpeg" width="1200"></p> <h3> 5. CSS选择器</h3> <h4>①标签选择器</h4> <ul><li>使用HTML标签名称分类，为页面的某一中标签指定统一的CSS样式</li><li>快速统一设置一样的样式，不能差异化</li></ul><ol><li>h1{</li><li> color: blue;</li><li> font-family: <span>'Courier New'</span>, Courier, monospace;</li><li> }</li></ol> <h4>②类选择器</h4> <ul><li>想要单独选择某一些标签并为其设置属性</li><li>结构需要class属性来调用class类</li><li>在HTML标签中加入<strong>class=“自定义名称”</strong>设置类名</li><li>在CSS中用<strong>"."+自定义类名</strong>来设置这一类的css样式</li><li>可以设置多类名，用空格隔开</li></ul><ol><li><!-- HTML部分 --></li><li><div class=<span>"bg"</span>></li></ol> <ol><li><span>/* CSS部分 */</span></li><li>.bg{</li><li> width: <span>400</span>px;</li><li> height: <span>200</span>px;</li><li> background-color: aliceblue; </li><li> }</li></ol> <h4> ③id选择器</h4> <ul><li>为标有特殊id的HTML元素添加样式</li><li>在HTML标签中加入<strong>class=“自定义id名”</strong>设置id选择器</li><li>在CSS中用<strong>"#"+自定义类名</strong>来设置它对应的css样式</li><li>id属性只能在每个HTML文档中出现一次，不可重复使用！</li></ul><ol><li><!-- HTML部分 --></li><li><p id=<span>"text"</span>>hahaha</p></li></ol> <ol><li><span>/* CSS部分 */</span></li><li>#text{</li><li> width: <span>400</span>px;</li><li> height: <span>200</span>px;</li><li> background-color: aliceblue; </li><li> }</li></ol> <h4>④通配符选择器</h4> <ul><li>使用<strong>"*"</strong>来设置css样式，表示选取页面所有元素</li><li>通常用于清除页面默认样式</li></ul><ol><li>* {</li><li> margin: <span>0</span>;</li><li> padding: <span>0</span>; </li><li> }</li></ol> <p>ps：一些稍微进阶一些的关系选择器会在下节课为大家讲解哦~</p> <h3> 6. CSS三大特性</h3> <h4>①层叠性</h4> <p>        相同选择器给设置相同的样式，此时一个相同的样式就会覆盖（层叠）另一个冲突的样式，层叠性主要解决样式冲突问题。</p> <ol><li> <span><<span>style</span>></span><span></span></li><li> <span>h1</span>{</li><li> <span>color</span>: blue;</li><li> }</li><li> <span>h1</span>{</li><li> <span>color</span>: red;</li><li> <span>/* 显示的字体颜色为红色 */</span></li><li> }</li><li> <span></<span>style</span>></span></li></ol> <h4>②继承性</h4> <ul><li>子标签会继承父标签的某些此样式，如文本的颜色和字号，简单理解：子承父业。</li><li>恰当的使用继承可以简化代码，降低CSS的复杂性。</li><li>子元素可以继承父元素的样式（text-,font-,line- 这些元素开头的可以继承，以及color属性）。</li></ul><ol><li><div class=<span>"father"</span>></li><li> <p>son of div</p></li><li></li></ol> <ol><li>.father{</li><li> color: blueviolet;</li><li>}</li></ol> <p><img alt="" height="45" src="/d/file/p/20240401/0f75422259f120a23cd58744943c27db.png" width="137"></p> <blockquote contentScore="568"> <p><strong>字体相关属性</strong>：font、font-size、font-style、font-weight、font-family、line-height等。</p> <p><strong>文本相关属性</strong>：color、text-align、text-indent、text-transform、text-decoration、letter-spacing、word-spacing等。</p> <p><strong>列表相关属性</strong>：list-style、list-style-type、list-style-position等。</p> <p><strong>边框相关属性</strong>：border、border-color、border-style、border-width等。</p> <p><strong>背景相关属性</strong>：background、background-color、background-image等。</p> <p><strong>表格相关属性</strong>：border-collapse、border-spacing、caption-side等。</p> <p><strong>其他属性</strong>：visibility、cursor等。</p> </blockquote> <h4>③优先级</h4> <ul><li>当同一个元素指定多个选择器就会由优先级产生。</li><li>选择器相同，则执行层叠性；选择器不同，则根据选择器权重执行。</li></ul><blockquote contentScore="175"> <p>！important > 内联样式 （标签中的style）> ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 > 通配选择器 </p> </blockquote> <table cellpadding="1" cellspacing="1"><tbody><tr><td><strong>选择器</strong></td><td><strong>选择器权重</strong></td></tr><tr><td>继承或者*</td><td>0,0,0,0</td></tr><tr><td>标签选择器</td><td contentScore="0"> <p>0,0,0,1</p> </td></tr><tr><td>类选择器，伪类选择器</td><td>0,0,1,0</td></tr><tr><td>Id选择器</td><td contentScore="0"> <p>0,1,0,0</p> </td></tr><tr><td>行内选择器 style=“ ”</td><td>1,0,0,0</td></tr><tr><td>!important重要性</td><td>无穷大</td></tr></tbody></table> <p>注：</p> <ol><li>权重是由四组数字组成，但不会有进位。</li><li>可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器。</li><li>等级判断，从左向右，如果某一位数值相同，则判断下一位数值。</li><li>这里的0,1采用的进制并不是简单的十进制，也不是二进制。可以简单记忆法：通配符和继承权重为0，标签选择器为1，类(伪类)选择器10，id选择器为100，行类样式为1000，！important 无穷大。</li><li>继承的权重为0，如果该元素没有直接选中，不管父元素权重多高,子元素得到的权重都是0。</li></ol><p><strong> 权重叠加</strong>：如果是复合选择器，则会有权重叠加，需要计算权重多高。</p> <h3> 7. CSS常用属性</h3> <h4>①字体属性</h4> <p> <span> 字体大小 font-size </span></p> <ul><li contentScore="0"> 可以设置“数值+px”或者直接选择以下几种 <p><img alt="" height="200" src="/d/file/p/20240401/5bc84a2ae7827ce4cd8eb1ac70af1172.png" width="473"></p> </li></ul><p><span> 字体粗细 font-weight </span></p> <table cellpadding="1" cellspacing="1"><tbody><tr><td><strong>值</strong></td><td><strong>效果</strong></td></tr><tr><td>bold</td><td>粗体字符，效果相当于700</td></tr><tr><td>bolder</td><td>更粗的字符</td></tr><tr><td>lighter</td><td>更细的字符</td></tr><tr><td>normal</td><td>默认粗细，效果相当于400</td></tr><tr><td>100 ~ 900</td><td>设置数字，由细到粗</td></tr></tbody></table> <p><span> 字体样式 font-style </span></p> <table cellpadding="1" cellspacing="1"><tbody><tr><td><strong>值</strong></td><td><strong>效果</strong></td></tr><tr><td>normal</td><td>默认值</td></tr><tr><td>italic</td><td>斜体字</td></tr></tbody></table> <p><span> 字体类型 font-family </span></p> <p><img alt="" height="67" src="/d/file/p/20240401/43da8bd4dfa6a06ab97da46c1ef320a8.png" width="858"></p> <ul><li> 将每个值用逗号分开</li><li>若字体名称中有空格，则必须将名称加上引号</li><li>多个字体的目的是给浏览器提供选择，如果某电脑缺少字体A，则会去使用字体B，以此类推，如果都没有则浏览器会找字体替代。</li></ul><p><span> 设置所有字体相关属性 font </span></p> <ul><li> 这是一个复合属性，可以设置上述所有字体属性</li><li>如果给同一个标签设置了相同的属性，样式会层叠</li></ul>font: <span>100</span> italic <span>32</span>px <span>'幼圆'</span>; <h4>②文本属性</h4> <p><span> 颜色 color </span></p> <blockquote contentScore="38"> <p>  color的设置方式有以下几种</p> <ol><li>使用<strong>代表颜色的单词</strong>，如red，blue等</li><li>使用1<strong>6进制颜色</strong>表示，#后面带着六个16进制数，两两一组，如#557722 = #572</li><li>使用<strong>rgb()函数</strong>，形如rgb（red,green,blue），取值0-255</li><li>使用<strong>rgba()函数</strong>，形如rgb（red,green,blue,alpha），其中alpha表示透明度，0为透明</li></ol></blockquote> <p><span> 文本对齐 text-align </span></p> <ul><li>用于设置文本的水平对齐方式</li><li>如果文本方向是从左到右，则默认为左对齐；如果文本方向是从右到左，则默认是右对齐</li></ul><table cellpadding="1" cellspacing="1"><tbody><tr><td><strong>值</strong></td><td><strong>效果</strong></td></tr><tr><td>left</td><td>左对齐</td></tr><tr><td>right</td><td>右对齐</td></tr><tr><td>center</td><td>居中</td></tr></tbody></table> <p><span> 文本装饰 text-decoration </span></p> <ul><li> 用于设置或删除文本装饰</li></ul><table cellpadding="1" cellspacing="1"><tbody><tr><td><strong>值</strong></td><td><strong>效果</strong></td></tr><tr><td>underline</td><td>下划线</td></tr><tr><td>line-through</td><td>删除线</td></tr><tr><td>overline</td><td>上划线</td></tr><tr><td>none</td><td>无文本装饰（常用于去掉a标签下划线）</td></tr></tbody></table> <p><span> 文本缩进 text-indent </span></p> <ul><li> 用于实现文本首行缩进</li><li> 用法：数字+px / 数字+em（1em = 当前标签的font-size的大小）</li></ul><p><span> 文本间距 letter-spacing </span></p> <ul><li> 用于实现文本中字符之间的间距的改变</li><li> 用法：数字+px （正数增加间距，负数缩减间距）</li></ul><p><span> 行高 line-height </span></p> <ul><li>用于控制一行的上下行间距</li><li> 用法：数字+px / 数字+em</li><li>可以用于让单行文本垂直居中，可以取消上下间距</li></ul><h4>③背景属性</h4> <p><span> 背景颜色 background-color </span></p> <ul><li>指定元素的背景色，表示方法同设置字体的color</li></ul><p><span> 背景图片 background-image </span></p> <ul><li> 指定用作元素背景的图像。</li><li>图片怎么引入？ => 使用<strong>url( )</strong>函数</li><li>默认情况下，图像会重复，以覆盖整个元素</li></ul>background-image: url(./bears.jpg); <p> <span> 背景平铺 background-repeat </span></p> <table cellpadding="1" cellspacing="1"><tbody><tr><td><strong>值</strong></td><td><strong>效果</strong></td></tr><tr><td>repeat</td><td>水平方向和垂直方向都平铺（默认）</td></tr><tr><td>no-repeat</td><td>不重复</td></tr><tr><td>repeat-x</td><td>沿着水平方向平铺</td></tr><tr><td>repeat-y</td><td>沿着垂直方向平铺</td></tr></tbody></table> <p>  <span> 背景位置 background-position </span></p> <p><img alt="" height="819" src="/d/file/p/20240401/190435daa4d6e947888ed48b1b8388db.png" width="920"></p> <ul><li>可以理解为图片的裁剪</li><li>如果只指定了一个值，另一个默认为居中对齐 </li></ul><p><span> 设置所有背景相关属性 background </span></p> <ul><li> 复合属性，可以设置上述所有背景属性</li></ul><h4>④列表属性</h4> <p><span> 列表项标记的类型 list-style-type </span></p> <blockquote contentScore="780"> <p>list-style-type：使用CSS，可以列出进一步的样式，并可用图像作列表项标记。<br>         - none：无标记。（去除标记）<br>         - disc：默认。标记是实心圆。<br>         - circle：标记是空心圆。<br>         - square：标记是实心方块。<br>         - decimal：标记是数字。<br>         - decimal-leading-zero：0开头的数字标记。(01, 02, 03, 等。)<br>         - lower-roman：小写罗马数字(i, ii, iii, iv, v, 等。)<br>         - upper-roman：大写罗马数字(I, II, III, IV, V, 等。)<br>         - lower-alpha：小写英文字母The marker is lower-alpha (a, b, c, d, e,等。)<br>         - upper-alpha：大写英文字母The marker is upper-alpha (A, B, C, D, E,等。)</p> </blockquote> <p><span> 列表项图标 list-style-image </span></p> <blockquote contentScore="127"> <p>list-style-image：url(图片地址) 自己指定图标，这种不能控制图标的大小，如果图标过大，无法控制</p> </blockquote> <h4> ⑤边框属性</h4> <p> <span> 边框类型 border-style （必需！）</span></p> <ul><li> 可以设置1~4个值，对应上、右、下、左边框<img alt="" height="428" src="/d/file/p/20240401/5359bb53e857b65f7657e0e11da6fcb0.png" width="690"></li></ul><ol><li>p {</li><li> border-style: solid dotted dashed double;</li><li>}</li></ol> <p> <span> 边框宽度 border-width </span></p> <ul><li>指定四个边框的宽度</li><li>可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick</li></ul><p> <span> 边框颜色 border-color </span></p> <ul><li>方法同设置color</li></ul><p> <span> 边框 border </span></p> <ul><li>复合属性 可以设置以上三种</li></ul><ol><li>p {</li><li> border: <span>5</span>px solid red;</li><li>}</li></ol> <p> <span> 边框各边 border-top / left / bottom / right </span></p> <ol><li>p {</li><li> border-top-style: solid;</li><li> border-right-style: dotted;</li><li> border-bottom-style: dashed;</li><li> border-left-style: double;</li><li>}</li></ol> <p> <span> 边框圆角 border-radius </span></p> <ul><li> 可以用数值+px或者设置百分比的方式设置圆角</li><li>如何设置一个圆？=> 宽高相等的div设置border-radius: 50%； </li></ul> </div> <div class="pagebar"> </div> <div class="tags_share"> <div class="artice_tags"> <span>标签:</span> </div> </div> <div class="avow"> <div class="avowtitle">声明</div> <!-- 声明 --> <p>1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。</p> <p>在线投稿：<a href='https://www.pyhost.cn/e/DoInfo/AddInfo.php?classid=2&mid=1&ecmscheck=1' target='_blank'>投稿</a> 站长QQ：1888636</p> <!-- @声明 --> </div> <div class="pcd_ad"><script src="/skin/js/thea7.js"></script></div> <div class="mbd_ad"><table width="100%" height="90" style="background-color:#ccc;"> <tr align="center"> <td style="text-align: center;color: #666;">后台-插件-广告管理-内容页尾部广告（手机）</td> </tr> </table></div> <div class="related"> <div class="md_tit"> <span>相关文章</span> </div> <ul> <li><a href="/tutorial/5402.html" title="08 | Swoole与Go系列教程之Channel通道的应用"> <div class="img"><img src="" onerror="this.onerror=null; this.src='/skin/images/def.jpeg'" alt="08 | Swoole与Go系列教程之Channel通道的应用"></div> <p>08 | Swoole与Go系列教程之Channel通道的应用</p> </a> </li> <li><a href="/tutorial/5403.html" title="thinkphp融合workerman的两种简单方式，直接在workerman里面用tp的orm功能"> <div class="img"><img src="" onerror="this.onerror=null; this.src='/skin/images/def.jpeg'" alt="thinkphp融合workerman的两种简单方式，直接在workerman里面用tp的orm功能"></div> <p>thinkphp融合workerman的两种简单方式，直接在workerman里面用tp的orm功能</p> </a> </li> <li><a href="/tutorial/5397.html" title="[240607] Jina AI 发布多模态嵌入模型 | PHP 曝新漏洞 | TypeScript 5.5 RC 发布公告"> <div class="img"><img src="" onerror="this.onerror=null; this.src='/skin/images/def.jpeg'" alt="[240607] Jina AI 发布多模态嵌入模型 | PHP 曝新漏洞 | TypeScript 5.5 RC 发布公告"></div> <p>[240607] Jina AI 发布多模态嵌入模型 | PHP 曝新漏洞 | TypeScript 5.5 RC 发布公告</p> </a> </li> <li><a href="/tutorial/5396.html" title="Typecho：简约而强大的开源PHP博客平台"> <div class="img"><img src="" onerror="this.onerror=null; this.src='/skin/images/def.jpeg'" alt="Typecho：简约而强大的开源PHP博客平台"></div> <p>Typecho：简约而强大的开源PHP博客平台</p> </a> </li> <li><a href="/tutorial/5387.html" title="昔日辉煌不再，PHP老矣，尚能饭否？"> <div class="img"><img src="" onerror="this.onerror=null; this.src='/skin/images/def.jpeg'" alt="昔日辉煌不再，PHP老矣，尚能饭否？"></div> <p>昔日辉煌不再，PHP老矣，尚能饭否？</p> </a> </li> <li><a href="/tutorial/5384.html" title="PHP APCu缓存使用与避坑"> <div class="img"><img src="" onerror="this.onerror=null; this.src='/skin/images/def.jpeg'" alt="PHP APCu缓存使用与避坑"></div> <p>PHP APCu缓存使用与避坑</p> </a> </li> <li><a href="/tutorial/5381.html" title="谁说PHP不能异步和并行运行？"> <div class="img"><img src="" onerror="this.onerror=null; this.src='/skin/images/def.jpeg'" alt="谁说PHP不能异步和并行运行？"></div> <p>谁说PHP不能异步和并行运行？</p> </a> </li> <li><a href="/tutorial/5377.html" title="一个用rust写的类似于Skywalking/CAT的迷你trace PHP扩展"> <div class="img"><img src="" onerror="this.onerror=null; this.src='/skin/images/def.jpeg'" alt="一个用rust写的类似于Skywalking/CAT的迷你trace PHP扩展"></div> <p>一个用rust写的类似于Skywalking/CAT的迷你trace PHP扩展</p> </a> </li> </ul> </div> </div> </div> <div class="main_right" id="main_right"> <div class="widget widget_gzwmdiy"> <div class="md_tit"><span>关注我们</span></div> <div class="widget_gz_body"> <p>扫一扫关注我们，了解最新精彩内容</p> <div class="qr_img"> <img src="/d/file/p/20231220/8ad98652841054fbbc542cb0219b1219.png" alt=""> </div> </div> </div> <div class="widget widget_searchpanel"> <div class="md_tit"><span>搜索</span></div> <div class="widget_div"> <form onsubmit="return checkSearchForm()" method="post" name="searchform" action="/e/search/index.php" > <input type="text" name="keyboard" placeholder="输入关键词"/> <button type="submit" class="submit" value="搜索"><i class="fa fa-search"></i></button> <input type="hidden" value="title" name="show"> <input type="hidden" value="1" name="tempid"> <input type="hidden" value="news" name="tbname"> <input name="mid" value="1" type="hidden"> <input name="dopost" value="search" type="hidden"> </form> </div> </div> <div class="widget widget_cead"> <script src="/skin/js/thea3.js"></script> </div> <div class="widget widget_paihang"> <div class="md_tit"><span>排行榜</span></div> <script>$( function () {$( '.paihang' ).tabslet();} );</script> <div class="paihang"> <ul class="tit"> <li><a href="#hot_1">热门文章</a></li> <li><a href="#hot_2">随机文章</a></li> </ul> <div id="hot_1" class="ph_list"> <ul> <li><a href="/tutorial/1009.html" target="_blank">好奇喵 | Tor浏览器——如何拥有一颗洋葱并使用</a></li> <li><a href="/tutorial/2921.html" target="_blank">Ubuntu 20.04 RTX 4090显卡 深度学习环境配置（Nvidia显卡驱动、CUDA11.6.0、cuDNN8.5）</a></li> <li><a href="/tutorial/1594.html" target="_blank">VPN的介绍及自建点对点的OpenVPN和使用方法：保姆级详细教程，(windou客户端版)后附脚本</a></li> <li><a href="/tutorial/126.html" target="_blank">phpy ：PHP 与 Python 互调用库，为 PHP 引入 Python 生态，PHP 也可以写 AI 了</a></li> <li><a href="/tutorial/120.html" target="_blank">Linux内核开启BBRv3加速让VPS更低延迟提升性能</a></li> <li><a href="/tutorial/1819.html" target="_blank">【R语言】——基因GO/KEGG富集分析!超级简单的保姆级教程！</a></li> <li><a href="/tutorial/2192.html" target="_blank">Python 可视化 web 神器：streamlit、Gradio、dash、nicegui；低代码 Python Web 框架：PyWebIO</a></li> <li><a href="/tutorial/164.html" target="_blank">如何快速定位当前数据库消耗 CPU 最高的sql 语句？</a></li> <li><a href="/tutorial/4398.html" target="_blank">Element Plus 虚拟化表格组件的使用(排序、筛选、自定义单元格渲染) - 个人使用总结</a></li> </ul> </div> <div id="hot_2" class="ph_list"> <ul> <li><a href="/tutorial/2345.html" target="_blank">Python Web开发（详细教程）</a></li> <li><a href="/tutorial/4826.html" target="_blank">谷歌Chrome小恐龙代码(自动跳,高跳,无敌,加速)</a></li> <li><a href="/tutorial/2326.html" target="_blank">Python辽宁沈阳二手房源爬虫数据可视化分析大屏全屏系统 开题报告</a></li> <li><a href="/tutorial/2679.html" target="_blank">285.【华为OD机试真题】二叉树计算（DFS遍历—Java&Python&C++&JS实现）</a></li> <li><a href="/tutorial/1230.html" target="_blank">PHP Pear 安装和配置教程</a></li> <li><a href="/tutorial/2331.html" target="_blank">Python小灰灰</a></li> <li><a href="/tutorial/3502.html" target="_blank">利用Python+selenium技术，实现浏览器基本操作详解，代码有详细注释</a></li> <li><a href="/tutorial/3852.html" target="_blank">CSS实现三角形的四种方法</a></li> <li><a href="/tutorial/1139.html" target="_blank">解决PHP Warning: putenv() has been disabled for security reasons in phar:</a></li> </ul> </div> </div> </div> <div class="widget widget_cead"> <script src="/skin/js/thea4.js"></script> </div> <div class="widget widget_previous"> <div class="md_tit"><span>最近发表</span></div> <ul> <li><a title="08 | Swoole与Go系列教程之Channel通道的应用" href="/tutorial/5402.html">08 | Swoole与Go系列教程之Channel通道的应用</a></li> <li><a title="thinkphp融合workerman的两种简单方式，直接在workerman里面用tp的orm功能" href="/tutorial/5403.html">thinkphp融合workerman的两种简单方式，直接在workerman里面用tp的orm功能</a></li> <li><a title="[240607] Jina AI 发布多模态嵌入模型 | PHP 曝新漏洞 | TypeScript 5.5 RC 发布公告" href="/tutorial/5397.html">[240607] Jina AI 发布多模态嵌入模型 | PHP 曝新漏洞 | TypeScript 5.5 RC 发布公告</a></li> <li><a title="Typecho：简约而强大的开源PHP博客平台" href="/tutorial/5396.html">Typecho：简约而强大的开源PHP博客平台</a></li> <li><a title="昔日辉煌不再，PHP老矣，尚能饭否？" href="/tutorial/5387.html">昔日辉煌不再，PHP老矣，尚能饭否？</a></li> <li><a title="PHP APCu缓存使用与避坑" href="/tutorial/5384.html">PHP APCu缓存使用与避坑</a></li> <li><a title="谁说PHP不能异步和并行运行？" href="/tutorial/5381.html">谁说PHP不能异步和并行运行？</a></li> <li><a title="一个用rust写的类似于Skywalking/CAT的迷你trace PHP扩展" href="/tutorial/5377.html">一个用rust写的类似于Skywalking/CAT的迷你trace PHP扩展</a></li> <li><a title="Typecho博客搭建教程" href="/tutorial/5374.html">Typecho博客搭建教程</a></li> </ul> </div> <div class="widget widget_cead"> <script src="/skin/js/thea5.js"></script> </div> <div class="widget widget_tags"> <div class="md_tit"><span>标签列表</span></div> <ul> <li><a target="_blank" href="/tags-优惠促销-0.html">优惠促销</a></li> <li><a target="_blank" href="/tags-香港VPS-0.html">香港VPS</a></li> <li><a target="_blank" href="/tags-美国VPS-0.html">美国VPS</a></li> <li><a target="_blank" href="/tags-洛杉矶-0.html">洛杉矶</a></li> <li><a target="_blank" href="/tags-洛杉矶VPS-0.html">洛杉矶VPS</a></li> <li><a target="_blank" href="/tags-新加坡vps-0.html">新加坡vps</a></li> <li><a target="_blank" href="/tags-优惠码-0.html">优惠码</a></li> <li><a target="_blank" href="/tags-服务器-0.html">服务器</a></li> <li><a target="_blank" href="/tags-美国CN2VPS-0.html">美国CN2VPS</a></li> <li><a target="_blank" href="/tags-便宜美国vps-0.html">便宜美国vps</a></li> <li><a target="_blank" href="/tags-美国vps推荐-0.html">美国vps推荐</a></li> <li><a target="_blank" href="/tags-日本vps-0.html">日本vps</a></li> <li><a target="_blank" href="/tags-美国便宜VPS-0.html">美国便宜VPS</a></li> <li><a target="_blank" href="/tags-独立服务器-0.html">独立服务器</a></li> <li><a target="_blank" href="/tags-VPS-0.html">VPS</a></li> <li><a target="_blank" href="/tags-香港vps推荐-0.html">香港vps推荐</a></li> <li><a target="_blank" href="/tags-美国vpscn2-0.html">美国vpscn2</a></li> <li><a target="_blank" href="/tags-香港cn2vps-0.html">香港cn2vps</a></li> <li><a target="_blank" href="/tags-美国cmin2vps-0.html">美国cmin2vps</a></li> <li><a target="_blank" href="/tags-美国as9929vps-0.html">美国as9929vps</a></li> </ul> </div> </div> </div> <!-- # main_body --> </div> </div> <div id="footer"> <div class="footer container"> <div class="fr"><a href="/contact/" target="_blank">申请友情链接</a></div> <div class="fl"> <p>Copyright (c) 2023 主机评测 All rights reserved. <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">浙ICP备2022012306号-1</a> </p> </div> </div> </div> <div class="m_search"><i class="fa fa-search"></i></div> <div class="m_search_box"> <span><i class="fa fa-remove"></i></span> <form onsubmit="return checkSearchForm()" method="post" name="searchform" action="/e/search/index.php" > <input type="text" name="keyboard" placeholder="输入关键词"/> <button type="submit" class="submit" value="搜索"><i class="fa fa-search"></i></button> <input type="hidden" name="show" value="title,newstext"> <input type="hidden" name="tempid" value="1"> <input type="hidden" value="news" name="tbname"> <input name="mid" value="1" type="hidden"> <input name="dopost" value="search" type="hidden"> </form> </div> <div id="goTop" class="goTop"><i class="fa fa-angle-up"></i></div> <script src="/skin/js/common.min.js" type="text/javascript"></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?f87360bc08657de9dda1d3005636bdbe"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>

     和	元素组成
     	定义表格单元格，可以包裹要展示的内容	定义表格标题