html+css学习第二节

HTML＋css学习第二节

• 一、嵌套列表
• • 1.初识
  • 2.定义列表中的嵌套
• 二、表格标签
• • 1.表格标签
  • 2.语义化标签
• 三、表格属性
• • 1.表格属性
  • 2.示例
• 四、表单标签
• • 1.表单标签
  • 2.表单标签
• 五、表格表单的组合
• • 1.作用
  • 2.示例
• 六、``与``
• • 1. ``(块）：
  • 2.``(内联）：
• 七、css基础语法
• • 1.格式
  • 2.css注释
• 八、CSS样式的引入方式
• • 1. 内联（行内、行间）样式
  • 2.内部样式
  • 3.区别
  • 4.外部样式
• 九、css中的颜色表示法
• • 1.单词表示法
  • 2.十六进制表示法
  • 3.RGB三原色表示法
• 十、css的背景样式
• • 1.背景样式
  • 2.平铺情况
  • 3.背景位置
  • 4.背景图随滚动条移动的方式
  • 5.示例
• 十一、css边框样式
• • 1.单线
  • 2.虚线
  • 3.单边框设置
  • 4.制作边框三角形
• 十二、css文字样式
• • 1.字体类型
  • 2.衬线体与非衬线体
  • 3.字体大小
  • 4.字体粗细
  • 5.字体样式
  • 6.字体颜色
• 十三、css段落样式
• • 1.文本装饰
  • 2.文本大小写
  • 3.文本缩进
  • 4.文本对齐方式
  • 5.定义行高
  • 6.定义字间距、定义词间距
  • 7.强制折行
  • 8.例题
• 十四、css复合样式
• • 1.一个css属性只控制一种样式，叫做单一样式。
  • 2.一个css属性控制多种样式，叫做复合样式。
• 十五、css选择器
• • 1.ID选择器
  • 2.class选择器

一、嵌套列表

1.初识

列表之前可以互相嵌套形成多个层级列表。

2.定义列表中的嵌套

二、表格标签

1.表格标签

:表格的最外层容器
:定义表格行
、、

注：使代码更符合规范，其中只能出现一次，、可出现多次，网页无变化。

三、表格属性

1.表格属性

border:表格边框
cellpadding:单元格内的空间
cellspacing:单元格之前的空间
rowspan:合并行
colspan:合并列
align:左右对齐方式 (left,center,right)
valign:上下对齐方式 (top,middle,bottom)

2.示例

四、表单标签

1.表单标签

注：(单标签)有一个type属性，决定是什么控件。

2.表单标签

</code>:多行文本框<br /> <code><select></code>、<code><option></code>:下拉菜单<br /> <code><label></code>:辅助表单<br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/74ac4c7f1165425a82909c18cf4ed65a.png#pic_center" alt="表单标签代码" /><br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/bc6076606012441183a5815ce3c2748f.png#pic_center" alt="网页显示" /><br /> 注：表单标签的一些其他属性，如：checked，disabled，name，for…</p> <h2><a id="_49"></a>五、表格表单的组合</h2> <h3><a id="1_50"></a>1.作用</h3> <p>表格表单之间可以相互组合形成数据展示效果。</p> <h3><a id="2_52"></a>2.示例</h3> <p><img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/c1eaa6adbfb24ac789e6ab163d671e52.png#pic_center" alt="表格与表单组合代码" /><br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/43c56c0a1c914d3fa0d92c2633752e18.png#pic_center" alt="网页显示" /></p> <h2><a id="divspan_55"></a>六、<code></code>与<code><span></code></h2> <h3><a id="1_div_56"></a>1. <code></code>(块）：</h3> <p>div全称division，“分割、分区”的意思，<code></code>标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在</p> 标签中， <code></code>中还可以嵌套多层 ,用来网页分割成独立的，不同的部分，来实现网页的规划和布局。 <br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/8833ac2764a948e186d3f2222d01ff5f.png" alt="块" /> <p></p> <h3><a id="2span_59"></a>2.<code><span></code>(内联）：</h3> <p>用来修饰文字的，<code></code>和<code><span></code>都是没有任何默认样式的，需要配合css才行。<img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/9d2517718a394df2b314393568bedcf4.png" alt="div代码" /><img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/062e1257bc8c4d8e87789f71234307a3.png" alt="网页显示" /><br /> 加入样式后：<br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/20cd408360fc444685093f755459993c.png" alt="加入颜色后" /></p> <p><img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/a2700a3536514b2f846d4492dfd8b385.png" alt="加入颜色后的网页显示" /></p> <h2><a id="css_65"></a>七、css基础语法</h2> <h3><a id="1_66"></a>1.格式</h3> <p>选择器{属性1：值1；属性2：值2}<br /> 单位：<br /> px→像素（pixel）、%→百分比<br /> 基本样式：<br /> width、height、background-color（背景色）<br /> 长度单位：<br /> 1.px→像素<br /> 2.%→百分比<br /> 外容器→600px 当前容器 50%→300px<br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/88304f895edd4f1d99b7c2203e969894.png" alt="基础代码" /></p> <p><img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/619614326ba94b3b9a559f00b3b97d27.png" alt="网页显示" /><br /> 1.width：100%<br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/308fcde77c9e4a1ab8cc4d7fb65b88a8.png" alt="100%代码" /></p> <p><img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/ddee73e47b954d4c8e42ba1195609073.png" alt="100%网页显示" /><br /> 2.加入<code><span></code><br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/e6fd3db4e25944ee810ccab4ac7aa2d0.png" alt="加入span" /></p> <p><img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/a376b560c5da401b982228cb35dc779f.png" alt="加入span" /><br /> 正确加入span背景色：<br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/28b56dcebdfc440e9af291483ff2d2e5.png" alt="span背景色" /></p> <p><img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/f5d4d3fe3246453d838c7a1301bbe020.png" alt="加入span背景色" /></p> <h3><a id="2css_93"></a>2.css注释</h3> <p>/* css注释的内容 */<br /> 快捷键：shift+ait+a<br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/b7f3a5e15cee4c4d80f440d184dcc5a9.png" alt="css注释" /></p> <h2><a id="CSS_98"></a>八、CSS样式的引入方式</h2> <h3><a id="1__99"></a>1. 内联（行内、行间）样式</h3> <p>在html标签上添加<strong>style属性</strong>来实现的<br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/497a33b642da4ac7af224fe78795c3d9.png" alt="内联代码" /></p> <p><img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/8847607f3fcb49278c9feedc898dc0e4.png" alt="内联网页显示" /></p> <h3><a id="2_104"></a>2.内部样式</h3> <p>在<code>**<style></code>标签**内添加的样式<br /> 注：内部样式的优点，可以复用代码。<br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/555617fe050048a48af49664d88ebaf0.png" alt="内部样式代码" /></p> <h3><a id="3_108"></a>3.区别</h3> <p>内部样式的代码可以复用，符合w3c的标准，尽量让结构和样式分开处理。<img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/c236ce3d6ed14c22ab5f07a1ff515693.png" alt="内部样式复写代码" /></p> <p><img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/62d5ef22a51149cf94ade8cd981fe7bd.png" alt="内联复写代码" /></p> <p><img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/12ed2c41de4540679559a4c16a9dd267.png" alt="网页显示" /></p> <h3><a id="4_116"></a>4.外部样式</h3> <p>1.方式一<br /> 引入一个单独的css文件，name.css<br /> <code><link></code>标签：引入外部资源<br /> rel属性：指定资源与页面的关系<br /> herf属性：指定资源的地址<br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/a8b769368065485da8c8a788050ef606.png" alt="属性值" /><img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/e72bfec9f25a4e3ba2472ec23810a74d.png" alt="外部样式代码" /><br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/f8537fb4e1f94529a0ec05bcdbf6944e.png" alt="外部资源代码" /><img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/b0767ebd0f3f4c2ba89e25c6010440c3.png" alt="引入后的网页显示" /><br /> 2.方式二<br /> 通过@import引入外部资源<br /> 注：这种方式有很多问题，不建议使用。<img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/7229211d3aa34561b8a1b119a928fa6d.png" alt="方式二代码" /><br /> link与@import的区别</p> <h2><a id="css_129"></a>九、css中的颜色表示法</h2> <h3><a id="1_130"></a>1.单词表示法</h3> <p>red blue green yellow …<br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/d5d9a99ad9ec419b89d348a69d782a43.png" alt="颜色名称大全" /></p> <h3><a id="2_134"></a>2.十六进制表示法</h3> <p>1 2 3 4 5 6 7 8 9 a b c d e f<br /> #000000 最小值 <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/74fc7a78befe4850bd7616c1be68d365.png" alt="#000000表示的颜色" /></p> <p>#ffffff 最大值<br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/c8891307819f4bd6ba9421981cf9f168.png" alt="#ffffff表示的颜色" /></p> <h3><a id="3RGB_142"></a>3.RGB三原色表示法</h3> <p>rab（255,255,255）<br /> 取值范围：0~255<br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/c38048937615498e9f4a0a9d15f11660.png" alt="RGB颜色表示代码" /><br /> 提取颜色下载地址</p> <p>提取颜色的工具：photoshop工具</p> <h2><a id="css_150"></a>十、css的背景样式</h2> <h3><a id="1_151"></a>1.背景样式</h3> <p>background-color:背景颜色<br /> background-image：背景图片<br /> background-repeat：背景图片的平铺方式<br /> repeat-x x轴平铺<br /> repeat-y y轴平铺<br /> repeat（x，y 都进行平铺，默认值）<br /> background-position:背景图片的位置<br /> background-attachment：背景图随滚动条的移动方式<br /> url（背景地址）</p> <p><img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/f7e44018265743efa38a81747ba0fefa.png" alt="背景样式代码" /><br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/c69967b4a7714031bfaf9f52220f7d75.png" alt="网页显示" /><br /> 默认：水平垂直都铺满</p> <h3><a id="2_165"></a>2.平铺情况</h3> <p><img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/afaedb219b2c41d097cc50dabe1a77b5.png" alt="水平铺代码" /><img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/626ab656e705491c80597d97aa315eea.png" alt="网页显示" /><img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/ea7dbbec9edc49e8afbb86c3b3b6bf53.png" alt="垂直铺代码" /></p> <p><img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/ca2ffc68fe15440a8cc05a5ecc9563bd.png" alt="网页显示" /><br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/a0019df7121b4421b4507ffd2edf833f.png" alt="不平铺代码" /><br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/4489368aab3e4d718675e007c4ba530f.png" alt="网页显示" /></p> <h3><a id="3_172"></a>3.背景位置</h3> <p>background-position：背景位置<br /> x y : number （px %） | 单词<br /> x ：left center right<br /> y : top center bottom<br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/17dd383ac5e84d33a2ecbe4319670423.png" alt="背景位置" /><br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/11cdea405f394dbaa4ff4e038f70777b.png" alt="背景位置" /><br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/a1cb4b71ec2144c09178a0d295b5869e.png" alt="背景位置" /><br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/5182d014145c4a9789e89d28b45bae92.png" alt="网页显示" /></p> <h3><a id="4_181"></a>4.背景图随滚动条移动的方式</h3> <p>scroll : 默认值<br /> fixed ：固定<br /> 1.默认值<br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/8384fa1791444ee5937360b4c801e883.png" alt="滚动条代码" /></p> <p><img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/fad3b744ff6d42658f6d9fcacb4f3435.png" alt="滚动条网页显示" /><br /> 2.固定值<br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/41f6d42c28b84615a7f967f8c90d1856.png" alt="图片固定的代码" /></p> <p><img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/835ea564f5f0402a97457b64f74f6dde.png" alt="固定图片网页显示" /><br /> 注：<strong>scroll 背景位置是按照当前元素进行偏移的</strong><br /> <strong>fixed 背景图是按照浏览器进行偏移的</strong></p> <h3><a id="5_197"></a>5.示例</h3> <p><img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/b630089a55c34c639a0c4830fded5e1c.png" alt="代码" /></p> <h2><a id="css_199"></a>十一、css边框样式</h2> <p>border-style : 边框的样式<br /> border-width ：边框的大小<br /> border-color ： 边框的颜色<br /> 注：针对某一条边进行单独设置</p> <p>solid：实线<br /> dashed：虚线<br /> dotted：点线<br /> border-width ：边框大小 px …<br /> border-color ：边框颜色 red #f00 …</p> <h3><a id="1_210"></a>1.单线</h3> <p><img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/84ec405775da460d9d6ec88146dab7a5.png" alt="实线边框代码" /></p> <h3><a id="2_212"></a>2.虚线</h3> <p><img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/45dc62aab3144c0399c8b540ea4cc44d.png" alt="虚线边框代码" /></p> <h3><a id="3_214"></a>3.单边框设置</h3> <p>边框也可以进行单独设置：border-left-style:中间是方向 left right<br /> bottom top<br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/6683ef2438d448409853ce0311fbb85e.png" alt="单边框" /><img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/2e0627b3deed4d8b87e7c6a116b1238e.png" alt="单边框设置的网页显示" /></p> <h3><a id="4_218"></a>4.制作边框三角形</h3> <p>1.背景图为白色<br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/969ec6409e8341bfa1e8e2a6ce472511.png" alt="边框三角形代码" /></p> <p><img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/471fd47082e046819096dc25f9c7445d.png" alt="边框三角形网页" /><br /> 2.制作通法<br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/fd4329e258154667b3e2c0eda702e92c.png" alt="制作边框三角形代码" /></p> <p><img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/8907f34cd2e141b691f181bbae2744bd.png" alt="制作边框三角形网页显示" /></p> <h2><a id="css_229"></a>十二、css文字样式</h2> <h3><a id="1_230"></a>1.字体类型</h3> <p>font-family :字体类型<br /> 英文字体：Arial （微软雅黑）’ Times New roman’（宋体）<br /> 中文字体：微软雅黑（‘Microsoft YaHei’）， 宋体（SimSun）<br /> <strong>注：font-family 的英文字体只支持英文，不支持中文，但中文均可识别</strong></p> <p><img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/917494b3c59c4d799e052753b137c575.png" alt="文字样式代码" /><img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/2af4c04147dd476ebad57c12d8c84fbb.png" alt="网页显示" /></p> <h3><a id="2_237"></a>2.衬线体与非衬线体</h3> <p>衬线体：有棱角<br /> 非衬线体：扁平化、简约、直观<br /> <strong>注意事项：<br /> 1.多个字体类型的设置目的<br /> 2.引号的添加的目的</strong></p> <h3><a id="3_244"></a>3.字体大小</h3> <p>font-size ： 字体大小<br /> 默认大小 ： 16px<br /> 写法 ： number（px）| 单词 （small large … 不推荐使用）<br /> 注：字体大小一般为偶数<br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/e8104c458d8642c2849a8c5f0a066dc5.png" alt="字体大小属性" /></p> <h3><a id="4_250"></a>4.字体粗细</h3> <p>font-weight : 字体粗细<br /> 两种模式： 正常（normal） 加粗（bold）<br /> 写法： 单词（normal、bold） | number（100 200 …900 100<sub>500都是正常的，600</sub>900都是加粗的）</p> <h3><a id="5_254"></a>5.字体样式</h3> <p>font-style：字体样式<br /> 模式： 正常（normal） 斜体（italic）<br /> 写法：单词 （normal、italic）<br /> <strong>注：oblique也是表示斜体，用的比较少，一般了解即可。</strong><br /> 区别：1.italic 带倾斜属性的可以设置<br /> 2.oblique没有倾斜属性的字体也可以设置倾斜操作</p> <h3><a id="6_262"></a>6.字体颜色</h3> <p>font-color：字体颜色</p> <h2><a id="css_266"></a>十三、css段落样式</h2> <h3><a id="1_267"></a>1.文本装饰</h3> <p>text-decoration : 文本装饰<br /> 1.取值</p> <p><img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/fbf140bdc37b44f69199f4ab7f302b4f.png" alt="文本装饰" /><br /> 2.引入多个</p> <p><img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/e089bbedd78a4f2c83353f11514a96a2.png" alt="三线" /><br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/906bb985487f494b9bfd6251048ca8db.png" alt="三线" /></p> <p><strong>注：添加多个文本修饰，利用空格隔开。</strong><br /> 下划线： underline<br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/f8b44bc64b554dc99aadf0506d2875c6.png" alt="下划线" /><br /> 删除线 ：line-through<br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/bed7ccbc69dc48bba23eacbc0846d60a.png" alt="删除线" /><br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/699483e28e5640cfa814f2476b74d3d2.png" alt="删除线" /><br /> 上划线 ：overline</p> <p><img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/00b9ec612e8e43658d7a44b91fb2411d.png" alt="上划线" /><br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/f1b817117d794cecb1682769c1148155.png" alt="上划线" /></p> <p>不添加任何装饰： none</p> <h3><a id="2_292"></a>2.文本大小写</h3> <p>text-transform :文本大小写（针对英文段落）<br /> 取值<br /> 小写：lowercase<br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/5023000c8e5c42a4bd33aa6f28e40ce6.png" alt="小写" /></p> <p><img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/8e4fb995042946119bf2d1a4d5745ef9.png" alt="小写网页" /></p> <p>大写：uppercase<br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/cee67100ef3b4a9c9cf46556f76c4ce9.png" alt="大写" /></p> <p><img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/a59dd8f6a8194648924a8f4220676f19.png" alt="大写网页" /><br /> 首字母大写： capitalize<br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/a26b7b0596964d85acca840a9edc4eed.png" alt="首字母大写" /></p> <p><img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/55a7091878334ac29007513f974f6e1a.png" alt="首字母大写网页显示" /></p> <h3><a id="3_310"></a>3.文本缩进</h3> <p>text-indent ： 文本缩进<br /> 1.首行缩进<br /> 2.em单位</p> <h3><a id="4_315"></a>4.文本对齐方式</h3> <p>text-align ：文本对齐方式<br /> 取值<br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/05f1320489fa407396d9abc1b1d1538b.png" alt="取值" /></p> <p><img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/d884b5c2570f4f7eb0e4cac3611c4ef1.png" alt="对齐" /></p> <p>左对齐： left<br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/89c2d7a6de0340ce9f83fbc17ec45be8.png" alt="左对齐代码" /><br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/8935eabd0e694db0a6b6e56b05d10427.png" alt="左对齐" /><br /> 右对齐：right<br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/4609f8080d694eca8fb3289347992640.png" alt="右对齐" /><img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/269742345cab4328bce561147b71826b.png" alt="右对齐" /><br /> 居中对齐：center<br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/c5faa0001c194562a937ee4896b593d6.png" alt="居中对齐" /><br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/97573ee37bbb49a89f4483e4e291aada.png" alt="居中对齐" /></p> <p>两端点对齐：justify<br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/89da47ed017c4d9ca071b229182551c4.png" alt="两端点对齐" /><br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/d8e9d90ade9b476f860a515f816d32f0.png" alt="两端点对齐" /></p> <h3><a id="5_335"></a>5.定义行高</h3> <p>line-height : 定义行高<br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/916dab4e9ffe4e1f9707a05aafc6a579.png" alt="行高理解" /></p> <p>定义：一行文字的高度，上边距和下边距的等价关系。<br /> 默认值：不固定，根据当前字体的大小不断变化。<br /> |<img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/4daacba691fe41bd906db5aaaba38b92.png" alt="行高代码" /></p> <p>取值：1.number（px）| scale（比例值，跟文字大小）</p> <p><img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/91c36c3b30ae4e44bcc84cdb5d1490d9.png" alt="行高数字" /><img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/27d3303286e2453781e764235c9ecaf4.png" alt="行高" /></p> <h3><a id="6_347"></a>6.定义字间距、定义词间距</h3> <ol><li> <p>letter-spacing :定义字间距<br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/6b3fbd31d30841669ca4f085336e0cfc.png" alt="字间距" /><br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/2bbba07545374ba384aec00878b59ae4.png" alt="字间距" /></p> </li><li> <p>word-spacing : 定义词间距（<strong>针对英文</strong>）<br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/3cdac6c6c3514754afa5f3450e060621.png" alt="词间距" /></p> </li></ol> <p><img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/311723eaa3c34ac79e854a4d757e867f.png" alt="词间距" /></p> <h3><a id="7_357"></a>7.强制折行</h3> <p>强制折行：（针对英文）<br /> 1.word-break : break-all ; (非常强烈的折行)<br /> 2.word-wrap ： break-word ；（不是那么强烈的折行，会产生一些空白区域）<br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/91a91c7b487f476e88315b7c6f29734f.png" alt="折行表示" /><br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/a9d198942f694f5abd2a311948d50dae.png" alt="折行" /></p> <h3><a id="8_364"></a>8.例题</h3> <p><img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/6ed2156b0f594059b8b4a3839ce8f7ed.png" alt="个人简介代码" /></p> <p><img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/035121f8046f4404adfe86df2d21218f.png" alt="个人简介" /></p> <h2><a id="css_369"></a>十四、css复合样式</h2> <h3><a id="1css_370"></a>1.一个css属性只控制一种样式，叫做单一样式。</h3> <h3><a id="2css_371"></a>2.一个css属性控制多种样式，叫做复合样式。</h3> <p>复合样式<br /> 复合的写法是通过空格的方式实现的。复合写法有的是不需要关心顺序，例如background、border；有的是需要关心顺序，例如 font 。<br /> background : red url () repeat 0 0 ;<br /> border ： 1px red solid ;<br /> font ：<br /> <strong>注：最少要有两个值 size family</strong><br /> weight style size family 正确<br /> style weight size family 正确<br /> weight style size/line-height family 正确<br /> <strong>注：尽量不要混写，如果非要混写，那么一定要先写复合样式再写单一样式，这样才不会被覆盖掉。</strong></p> <p><img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/7d23632643614e1caa9c91d9334a8146.png" alt="复合代码" /><br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/a24a938de3354434ba61e822ef80b575.png" alt="复合代码网页显示" /></p> <h2><a id="css_386"></a>十五、css选择器</h2> <h3><a id="1ID_387"></a>1.ID选择器</h3> <p>css：#elem{}<br /> html：id=“elem”<br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/059310073a4a4bc89a1a1d8f3c8f2352.png" alt="css选择器" /></p> <p><strong>注：<br /> 1.在一个页面中，ID值是唯一的。<br /> 2.命名规范，字母_-数字（命名的第一位不能是数字）。<br /> 3.命名方式，驼峰式、下划线式、短线式。</strong><br /> 驼峰写法：searchButton(小驼峰) SearchButton （大驼峰） searchSmallButton<br /> 短线写法：search-small-button<br /> 下划线写法：search_small_button<br /> css命名规范</p> <h3><a id="2class_400"></a>2.class选择器</h3> <p>css：.elem{}<br /> html：class = “elem”<img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/5311b6723ef749b8a35e56557733a3fe.png" alt="class选择器" />![网<br /> 注：<br /> 1.class选择器是可以复用的。<img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/fb8cdc0ca9b94cada7d20c8aa2552e81.png" alt="复用情况" /></p> <p><img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/6484a6b0fb88442fa23c1c296d40f7a3.png" alt="复用" /></p> <p>2.可以添加多个class样式。<img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/329fd8da0afd4608af2619c63baf63ac.png" alt="引入多个class" /></p> <p>3.多个样式的时候，样式的优先级根据css决定，而不是class属性中的顺序。<br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/bfcb9b83b5ab48b897caa7b2494e3dde.png" alt="" /><br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/329ae7f43f1f407996773540bdfd9516.png" alt="在这里插入图片描述" /></p> <p>4.标签+类的写法</p> <p><img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/ccfcaffb953d40f1a970bfd5c064e0c1.png" alt="标签+类的代码" /></p> <pre><code></code></pre> </p> <p><br /><pre><code style="font-size:16px;">本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击<a href="https://shimo.im/forms/N2A1gvJRpPh7K9qD/fill" target="_blank" rel="nofollow">【内容举报】</a>进行投诉反馈！</code></pre></p> <!-- E 正文 --> <link href="https://qiniu.techgrow.cn/readmore/dist/readmore.css" type="text/css" rel="stylesheet"> <script src="https://qiniu.techgrow.cn/readmore/dist/readmore.js" type="text/javascript"></script> <script> var regex = /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i var isMobile = navigator.userAgent.match(regex); if (!isMobile) { try { var plugin = new ReadmorePlugin(); plugin.init({ id: "readmore-container", blogId: "55721-7689706765131-406", name: "财经早读", keyword: "666", qrcode: "https://www.imspm.com/assets/img/caijingzaodu.jpg", type: "website", height: "auto", expires: "7", interval: "60", random: "1" }) } catch (e) { console.warn("readmore plugin occurred error: " + e.name + " | " + e.message); } } </script> </div> <!-- S 付费阅读 --> <!-- E 付费阅读 --> <!-- S 点赞 --> <div class="article-donate"> <a href="javascript:" class="btn btn-primary btn-like btn-lg social-share-icon icon-heart addbookbark" data-type="archives" data-aid="741403" data-action="/addons/cms/ajax/collection.html">收藏</a> </div> <!-- E 点赞 --> <div class="entry-meta"> <ul> <!-- S 归档 --> <li>标签：<a href="/dev.html" class="tag" rel="tag" target="_blank">技术</a></li> <!-- S 归档 --> </ul> <ul class="article-prevnext"> <!-- S 上一篇下一篇 --> <li> <span>上一篇 ></span> <a href="/dev/741402.html" target="_blank">python转二进制高位补0_转换为二进制并在Python中保持前导零</a> </li> <li> <span>下一篇 ></span> <a href="/dev/741404.html" target="_blank">二维激光雷达常用公式介绍</a> </li> <!-- E 上一篇下一篇 --> </ul> </div> <div class="related-article"> <div class="row" style="margin: 0 -15px;"> <!-- S 相关文章 --> <div class="col-xs-12"> <h3 style="font-size: 1.1em;">相关文章</h5> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747938.html" target="_blank">Duilib中list控件支持ctrl和shif多行选中的实现</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747937.html" target="_blank">[ICML2015]Batch Normalization:Accelerating Deep Network Training by Reducing Internal Covariate Shif</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747936.html" target="_blank">win10系统 微软输入法 于eclipse ctrl+shif+f冲突间接处理办法</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747935.html" target="_blank">Codeforces Round #259 (Div. 2) B. Little Pony and Sort by Shif</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747934.html" target="_blank">读LDD3，内存映射与DMA--PAGE_SHIF…</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747933.html" target="_blank">VMware虚拟机安装XP【要先分区，再设置BOOT 启动CD，shif+上移】</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747932.html" target="_blank">更换iBus五笔的左与右Shif</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747931.html" target="_blank">sublime ctrl+shif+f 没用解决办法</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747930.html" target="_blank">idea 对 ctrl + z 的撤销 是 ctrl + shif + z</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747929.html" target="_blank">计算机最早的设计师应用于,计算机应用基础选择题doc.doc</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747928.html" target="_blank">win10自带截图神器：Win+Shift+S</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747927.html" target="_blank">Python基础之文件目录操作</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747926.html" target="_blank">python简述目录_Python基础之文件目录操作(示例代码)</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747925.html" target="_blank">tp5 如何做数据采集</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747924.html" target="_blank">任务2-7(服务器字体+阿里巴巴矢量库)</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747923.html" target="_blank">html标签（1)：h1~h6,p,br,pre,hr</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747922.html" target="_blank">TI 电量计介绍与芯片选型指南</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747921.html" target="_blank">几款TI电源芯片简介</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747920.html" target="_blank">TI DSP芯片C2000系列读取FLASH数据</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747919.html" target="_blank">德州仪器(Ti)平台嵌入式开发基础</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747918.html" target="_blank">TI三相电机智能栅极驱动芯片特点分类</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747917.html" target="_blank">省选模拟（12.08） T3 圈圈圈圈圈圈圈圈</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747916.html" target="_blank">Hadoop生态圈技术栈（上）</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747915.html" target="_blank">大数据开发基础入门与项目实战（三）Hadoop核心及生态圈技术栈之6.Impala交互式查询</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747914.html" target="_blank">小猿圈之Linux下Mysql 操作命令</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747913.html" target="_blank">大数据Hadoop生态圈常用面试题</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747912.html" target="_blank">大数据开发基础入门与项目实战（三）Hadoop核心及生态圈技术栈之4.Hive DDL、DQL和数据操作</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747911.html" target="_blank">备战Noip2018模拟赛11（B组）T3 Monogatari 物语</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747910.html" target="_blank">【智能优化算法-圆圈搜索算法】基于圆圈搜索算法Circle Search Algorithm求解单目标优化问题附matlab代码</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747909.html" target="_blank">NYOJ 78 圈水池</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747908.html" target="_blank">递归问题 跑道 汽车 绕圈问题 Python实现</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747907.html" target="_blank">Hadoop生态圈（三）：MapReduce</a></p> </div> <!-- E 相关文章 --> </div> </div> <div class="clearfix"></div> </div> </div> </main> <aside class="col-xs-12 col-md-4"> <!--@formatter:off--> <!--@formatter:on--> <!-- S 内容推荐 --> <div class="panel panel-default hot-article"> <div class="panel-heading"> <h3 class="panel-title">内容推荐</h3> </div> <div class="panel-body"> <div class="media media-number"> <div class="media-left"> <span class="num tag">1</span> </div> <div class="media-body"> <a class="link-dark" href="/jiaohutiyan/753475.html" title="大厂出品！保姆级教程帮你掌握「用户体验要素」" target="_blank">大厂出品！保姆级教程帮你掌握「用户体验要素」</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">2</span> </div> <div class="media-body"> <a class="link-dark" href="/jiaohutiyan/753348.html" title="大厂实战案例！设计师如何助力京东快递业务增长？" target="_blank">大厂实战案例！设计师如何助力京东快递业务增长？</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">3</span> </div> <div class="media-body"> <a class="link-dark" href="/jiaohutiyan/753116.html" title="总监干货！5个常见的UI设计规范创建误区" target="_blank">总监干货！5个常见的UI设计规范创建误区</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">4</span> </div> <div class="media-body"> <a class="link-dark" href="/kaifagongju/752540.html" title="数据库管理利器——Navicat Premium v17.0.4学习版(Windows+MacOS+Linux)" target="_blank">数据库管理利器——Navicat Premium v17.0.4学习版(Windows+MacOS+Linux)</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">5</span> </div> <div class="media-body"> <a class="link-dark" href="/jiaohutiyan/750353.html" title="进阶必学！快速掌握10种国际主流设计模型" target="_blank">进阶必学！快速掌握10种国际主流设计模型</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">6</span> </div> <div class="media-body"> <a class="link-dark" href="/jiaohutiyan/750352.html" title="春节期间，10个大厂的产品细节走心设计" target="_blank">春节期间，10个大厂的产品细节走心设计</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">7</span> </div> <div class="media-body"> <a class="link-dark" href="/jiaohutiyan/747940.html" title="如何帮助用户度过新人期？来看雪球APP的实战总结！" target="_blank">如何帮助用户度过新人期？来看雪球APP的实战总结！</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">8</span> </div> <div class="media-body"> <a class="link-dark" href="/ruanjianzixun/42357.html" title="Sketch 95.3最新版下载 (Sketch矢量绘图应用软件)" target="_blank">Sketch 95.3最新版下载 (Sketch矢量绘图应用软件)</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">9</span> </div> <div class="media-body"> <a class="link-dark" href="/ruanjianzixun/42356.html" title="Axure RP 9 最新正式版安装软件与汉化语言包下载(2023年3月30日更新)" target="_blank">Axure RP 9 最新正式版安装软件与汉化语言包下载(2023年3月30日更新)</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">10</span> </div> <div class="media-body"> <a class="link-dark" href="/chanpinsheji/42343.html" title="嘘！SaaS产品的差异化设计细节，一般人我不告诉他" target="_blank">嘘！SaaS产品的差异化设计细节，一般人我不告诉他</a> </div> </div> </div> </div> <!-- E 内容推荐 --> <div class="panel panel-blockimg"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6421005227861480" crossorigin="anonymous"></script> <!-- 右侧正方形 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6421005227861480" data-ad-slot="1989994359" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="panel panel-default lasest-update"> <!-- S 最近更新 --> <div class="panel-heading"> <h3 class="panel-title">最新更新</h3> </div> <div class="panel-body"> <ul class="list-unstyled"> <li> <span><a href="/chanpinjingli.html" target="_blank">[产品经理]</a></span> <a class="link-dark" href="/chanpinjingli/758173.html" title="3分钟绘制流程图！这个AI+绘图工具的神仙组合，学完老板直呼内行" target="_blank">3分钟绘制流程图！这个AI+绘图工具的神仙组合，学完老板直呼内行</a> </li> <li> <span><a href="/chanpinjingli.html" target="_blank">[产品经理]</a></span> <a class="link-dark" href="/chanpinjingli/758172.html" title="商业潜规则：打败你的不是AI，而是人性" target="_blank">商业潜规则：打败你的不是AI，而是人性</a> </li> <li> <span><a href="/chanpinsheji.html" target="_blank">[产品设计]</a></span> <a class="link-dark" href="/chanpinsheji/758171.html" title="DeepSeek+智能派单系统的实践分享" target="_blank">DeepSeek+智能派单系统的实践分享</a> </li> <li> <span><a href="/chanpinjingli.html" target="_blank">[产品经理]</a></span> <a class="link-dark" href="/chanpinjingli/758170.html" title="一文读懂本年实际损益借(贷)方发生额" target="_blank">一文读懂本年实际损益借(贷)方发生额</a> </li> <li> <span><a href="/chuangyexueyuan.html" target="_blank">[创业学院]</a></span> <a class="link-dark" href="/chuangyexueyuan/758169.html" title="大客户 vs 中小企业：需求竟天差地别？以企业培训数字化为例" target="_blank">大客户 vs 中小企业：需求竟天差地别？以企业培训数字化为例</a> </li> <li> <span><a href="/chanpinjingli.html" target="_blank">[产品经理]</a></span> <a class="link-dark" href="/chanpinjingli/758168.html" title="不要将员工的“猴子”背到自己身上：职场管理中的权责划分" target="_blank">不要将员工的“猴子”背到自己身上：职场管理中的权责划分</a> </li> <li> <span><a href="/chanpinjingli.html" target="_blank">[产品经理]</a></span> <a class="link-dark" href="/chanpinjingli/758167.html" title="人工智能的三层架构：从应用层到基础服务层，解密智能革命" target="_blank">人工智能的三层架构：从应用层到基础服务层，解密智能革命</a> </li> <li> <span><a href="/chanpinsheji.html" target="_blank">[产品设计]</a></span> <a class="link-dark" href="/chanpinsheji/758166.html" title="一文讲清楚iOS的SKAN4.0" target="_blank">一文讲清楚iOS的SKAN4.0</a> </li> </ul> </div> <!-- E 最近更新 --> </div> <!-- S 热门标签 --> <div class="panel panel-default hot-tags"> <div class="panel-heading"> <h3 class="panel-title">热门标签</h3> </div> <div class="panel-body"> <div class="tags"> <a href="/channel/数量.html" class="tag" target="_blank"> <span>数量</span></a> <a href="/channel/AI技术趋势.html" class="tag" target="_blank"> <span>AI技术趋势</span></a> <a href="/channel/用户角色.html" class="tag" target="_blank"> <span>用户角色</span></a> <a href="/channel/心智游移.html" class="tag" target="_blank"> <span>心智游移</span></a> <a href="/channel/自然生态系统.html" class="tag" target="_blank"> <span>自然生态系统</span></a> <a href="/channel/会员权益.html" class="tag" target="_blank"> <span>会员权益</span></a> <a href="/channel/AirDrop.html" class="tag" target="_blank"> <span>AirDrop</span></a> <a href="/channel/hashmap.html" class="tag" target="_blank"> <span>hashmap</span></a> <a href="/channel/小龙虾.html" class="tag" target="_blank"> <span>小龙虾</span></a> <a href="/channel/焦虑.html" class="tag" target="_blank"> <span>焦虑</span></a> <a href="/channel/危机处理.html" class="tag" target="_blank"> <span>危机处理</span></a> <a href="/channel/发展.html" class="tag" target="_blank"> <span>发展</span></a> <a href="/channel/微信群折叠.html" class="tag" target="_blank"> <span>微信群折叠</span></a> <a href="/channel/toast.html" class="tag" target="_blank"> <span>toast</span></a> <a href="/channel/测评新算法.html" class="tag" target="_blank"> <span>测评新算法</span></a> <a href="/channel/改版.html" class="tag" target="_blank"> <span>改版</span></a> <a href="/channel/wireshark.html" class="tag" target="_blank"> <span>wireshark</span></a> <a href="/channel/投放方式.html" class="tag" target="_blank"> <span>投放方式</span></a> <a href="/channel/音频播放动效.html" class="tag" target="_blank"> <span>音频播放动效</span></a> <a href="/channel/timer.html" class="tag" target="_blank"> <span>timer</span></a> <a href="/channel/女性商业.html" class="tag" target="_blank"> <span>女性商业</span></a> <a href="/channel/古典自媒体.html" class="tag" target="_blank"> <span>古典自媒体</span></a> <a href="/channel/海外博主.html" class="tag" target="_blank"> <span>海外博主</span></a> <a href="/channel/repeater.html" class="tag" target="_blank"> <span>repeater</span></a> <a href="/channel/转账.html" class="tag" target="_blank"> <span>转账</span></a> <a href="/channel/万能钥匙.html" class="tag" target="_blank"> <span>万能钥匙</span></a> <a href="/channel/秋招.html" class="tag" target="_blank"> <span>秋招</span></a> <a href="/channel/快服务.html" class="tag" target="_blank"> <span>快服务</span></a> <a href="/channel/个人演讲.html" class="tag" target="_blank"> <span>个人演讲</span></a> <a href="/channel/客户共识.html" class="tag" target="_blank"> <span>客户共识</span></a> </div> </div> </div> <!-- E 热门标签 --> </aside> </div> </div> </main> <footer> <div id="footer"> <div class="container"> <div class="row footer-inner"> <div class="col-xs-12"> <div class="footer-logo pull-left mr-4"> <a href="/"><i class="fa fa-bookmark"></i></a> </div> <div class="pull-left"> Copyright © 2025 All rights reserved. 超级产品经理 <a href="https://beian.miit.gov.cn" target="_blank" rel="noopener">浙ICP备14026978号-4</a> <ul class="list-unstyled list-inline mt-2"> <li><a href="/p/aboutus.html" target="_blank">关于网站</a></li> <li><a href="/contactus.html" rel="nofollow" target="_blank">联系我们</a></li> </ul> </div> </div> </div> </div> </div> </footer> <div id="floatbtn"> <!-- S 浮动按钮 --> <a class="hover" href="/index/cms.archives/post.html" target="_blank"> <i class="iconfont icon-pencil"></i> <em>立即<br>投稿</em> </a> <div class="floatbtn-item floatbtn-share"> <i class="iconfont icon-share"></i> <div class="floatbtn-wrapper" style="height:50px;top:0"> <div class="social-share" data-initialized="true" data-mode="prepend"> <a href="#" class="social-share-icon icon-weibo" target="_blank"></a> <a href="#" class="social-share-icon icon-qq" target="_blank"></a> <a href="#" class="social-share-icon icon-qzone" target="_blank"></a> <a href="#" class="social-share-icon icon-wechat"></a> </div> </div> </div> <a href="javascript:;"> <i class="iconfont icon-qrcode"></i> <div class="floatbtn-wrapper"> <div class="qrcode"><img src="https://www.imspm.com/assets/img/gongzhonghao.jpg"></div> <p>微信公众账号</p> <p>微信扫一扫加关注</p> </div> </a> <a id="back-to-top" class="hover" href="javascript:;"> <i class="iconfont icon-backtotop"></i> <em>返回<br>顶部</em> </a> <!-- E 浮动按钮 --> </div> <script type="text/javascript" src="/assets/libs/jquery/dist/jquery.min.js?v=1.0.10"></script> <script type="text/javascript" src="/assets/libs/bootstrap/dist/js/bootstrap.min.js?v=1.0.10"></script> <script type="text/javascript" src="/assets/libs/fastadmin-layer/dist/layer.js?v=1.0.10"></script> <script type="text/javascript" src="/assets/libs/art-template/dist/template-native.js?v=1.0.10"></script> <script type="text/javascript" src="/assets/addons/cms/js/jquery.autocomplete.js?v=1.0.10"></script> <script type="text/javascript" src="/assets/addons/cms/js/swiper.min.js?v=1.0.10"></script> <script type="text/javascript" src="/assets/addons/cms/js/share.min.js?v=1.0.10"></script> <script type="text/javascript" src="/assets/addons/cms/js/cms.js?v=1.0.10"></script> <script type="text/javascript" src="/assets/addons/cms/js/common.js?v=1.0.10"></script> </body> </html>

:定义表头	:定义表格单元 :定义表格标题 注：标签之间存在嵌套关系，要符合嵌套规范。 2.语义化标签