大家好，欢迎来到IT知识分享网。

HTML系列：

• 人人都懂的HTML基础知识-HTML教程
• HTML元素大全(1)
• HTML元素大全(2)-表单

CSS系列：

• CSS基础知识筑基
• 常用CSS样式属性
• CSS选择器大全48式
• CSS布局秘籍(1)-任督二脉BFC/IFC
• CSS布局秘籍(2)-6脉神剑
• CSS动画-transition/animation
• CSS处理器-Less/Scss

01、基础元素

<h1/2/3/4/5/6>标题

从大h1到小h6，块元素，有6级标题。是一种标题类语义标签，内置了字体、边距样式。

• 合理使用h标签，主要用于标题，不要为了加粗效果而随意使用。
• h1用于最重要的标题内容，会被搜索引擎使用，用得太多影响SEO效果。

<h1 align="center">标题标签h1/2/3/4/5/6：一级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

<p>段落元素

段落元素<p>内容</p>（paragraph/ˈpærəɡrɑːf/ 段落、分段）块元素，表示一个内容段落，前后自动换行，段落之间会有间隙（默认margin上、下=1em），比<br>的行间距更大。

<p align="left">段落文字1</p>
<p align="center">段落文字2<br/>012</p>
普通文字1，用br换行<br>普通文字1

<br>换行

换行元素（Break）：<br>，单标签，默认行间距。HTML中不识别输入的回车换行，需用<br>标签换行。

<hr>水平线

水平线元素：<hr>，单标签，有颜色color、长度width、粗细size、对齐align等属性，CSS中可用border设置样式。

<br>
<hr width="80%" color="green" align="left" size=1 />
<hr width="80%" color="green"  />
<hr width="300px" color="red" size="3" />

<ul-li/ol-li>列表标签

列表都是块元素，li中可以放任何东西，常用来组织列表相关内容，如商品列表、树形结构、导航等。

• 无序列表<ul><li></li></ul>：unordered list，li为列表项，属性type可定义符号样式，默认disc（实心圆）。
• 有序列表<ol><li></li></ol>：ordered list，li为列表项，属性type可定义排序样式，默认1（数字）。

<ul type="disc">            		<!-- type可定义符号样式，默认disc=实心圆，可自定义样式取代-->
  <li type="square">l1    			<!--square=方块-->
    <ul><li>l1的嵌套子节点</li></ul>
  </li>            
  <li type="circle">l2</li>			<!--circle=空心圆-->
  <li>l3</li>
</ul>
<ol type="1">           <!-- type可定义排序样式，默认1=数字-->
  <li type="a">l1</li> 	<!-- a=小写字母排序-->
  <li type="A">l2</li> 	<!-- A=大写字母排序-->
  <li type="i">l3</li> 	<!-- i=小写阿拉伯字母排序-->
  <li type="I">l4</li> 	<!-- I=大写阿拉伯字母排序-->
  <li>l5</li>
</ol>

• 无序标签、有序标签可以多层（相互）嵌套。
• 列表项中的内容可以是文本，也可以是其他标签，如图片img、a标签。
• 使用场景：新闻列表，导航按钮。
• list-style-type：在css中设置列表符号样式，如ul li{list-style-type:disc} ``ol li{}，枚举值-菜鸟教程。
  • disc、circle…：实心、空心符号
  • decimal…：数字

⌨️快捷键（VSCode）：标签名*数量>子标签名*数量，快速输入多组父子标签，加大括号则为标签中内容。ul>li*3：快速输入ul标签+3组子li标签。

<dl/dt/dd>语义化描述列表

作用同<ul/li>类似，通常用于展示词汇表或者元数据 (键 – 值对列表)，块元素。JD首页的分类导航就是用的<dl/dt/dd>结构。

<dl>
  <dt>人物简介：</dt>
  <dd>一代诗仙</dd>
  <dt>代表作：</dt>
  <dd>仰天大笑出门去，下楼排队做核酸</dd>
</dl>

<blockquote>/<q>引用元素

语义化引用元素，代表其中的文字是引用内容。

⚠️注意：默认样式不同浏览器不同，所以最好通过css统一样式。

<style>
  blockquote {
    font-size: 1rem;
    color: #999;
    border-left: .2rem solid #dfe2e5;
    margin: 1rem 0;
    padding: .25rem 0 .25rem 1rem;
  }
</style>
<div>
  <blockquote>
    块引用blockquote文本<q>行内引用q</q>
  </blockquote>
  <q>行内引用q</q>
</div>

<span/font/b/i/u/del>文本元素

针对文本内容的常规元素。除了pre是块元素，其他都是行内元素。文本标签一般会嵌套在<p>标签中使用，实现不同语义/效果。

块元素

<span style="color:blue">span内容</span>
<font size="4" color="red" face="楷体">font标签内容</font>
<pre style="color:yellowgreen;font-family:'楷体'; font-size: 18px;">pre字体内容   ，
  支持回车和空   格</pre>
<b>粗体b</b> &nbsp;
<strong>粗体strong</strong>&nbsp;
<i>斜体i</i>&nbsp;
<em>em标签</em>&nbsp;
<u>下划线u</u>&nbsp;
<del>删除线del</del>&nbsp;
<sub>下标sub</sub>&nbsp;
<sup>上标sup</sup>

<abbr/address/code…>语义元素

表示特点语义的元素，默认提供了一些样式（吃藕丑）。

<div >
  <p>我们使用 <abbr title="超文本标记语言（Hyper text Markup Language）">HTML（abbr缩写）</abbr> 来组织网页文档。</p>
  <p>欢迎光临怡红院！联系方式（address）：<address>长安南路 &nbsp;&nbsp;<a href="">发送邮件</a></address></p>
  <code>code代码</code>&nbsp;&nbsp;
  <var>var变量</var>&nbsp;&nbsp;
  <kbd>键盘kbd </kbd><kbd>Fn</kbd>+<kbd>R</kbd>&nbsp;&nbsp;
  <samp>计算机输出samp</samp>&nbsp;&nbsp;
  <time datetime="2016-01-20">2016 年 1 月 20 日</time>
</div>

<div>及语义<header/footer…>

<div>是一个容器元素，是一个“纯粹的”、“无任何语义的”容器块元素，用来把不同的内容分区管理。本身无任何表现效果，配合css使用。
在HTML5中增加了和div相同作用的语义化块布局元素标签，这些元素定义了一个大概的语义范围，并没有一个严格的界限，同样也么有任何样式。语义块元素可读性更好，也更有利于SEO。

⚠️注意：语义化块元素在_一些古老_的浏览器存在兼容性问题，如IE8。

<h2>div布局</h2>
<div style="height: 280px;">
    <div class="header">div class="header" </div>
    <div class="nav">div class="nav"</div>
    <div style="height: calc(100% - 140px);">
        <div class="left">div class="left"</div>
        <div class="right">div class="right"</div>
    </div>
    <div class="footer">div class="footer"</div>
</div>
<h2>语义布局</h2>
<div style="height: 280px;">
    <header class="header">header class="header" </header>
    <nav class="nav">div class="nav"</nav>
    <main style="height: calc(100% - 140px);">
        <aside class="left">aside class="left"</aside>
        <article class="right">article class="right"</article>
    </main>
    <footer class="footer">footer class="footer"</footer>
</div>
<!--样式-->
<style>
    .header,
    .footer {
        background-color: antiquewhite;
        height: 40px;
        text-align: center;
        line-height: 40px;
        float: none;
    }

    .nav {
        background-color: aquamarine;
        height: 40px;
        line-height: 40px;
        text-align: center;
    }

    .left {
        background-color: rgb(201, 223, 215);
        float: left;
        width: 150px;
        height: 100%;
        text-align: center;
    }

    .right {
        background-color: rgb(238, 252, 206);
        float: left;
        height: 100%;
        width: calc(100% - 150px);
        text-align: center;
    }
</style>

<a>超链接

元素是最常用的超链接标签，主要属性是href这是网络互联的重要特性。行内元素，不会换行。双标签：标签内可以放其他内容，如文字、图片。

⚠️当不希望a标签执行跳转，用来执行其onclick事件时，需设置href="javascript:void(0)"，申明不执行跳转。

<a href="http://www.baidu.com" target="_self" title="鼠标悬停提示的内容">显示的内容=a标签=百度</a>
<a href="../ftest/html.md">相对地址</a>

<!-- 页面内#锚点跳转 -->
<a href="#">默认#-跳转到头部</a>
<a href="#m1">a标签的name属性作为锚点</a>   <!--a name="m1"-->
<a href="#hp">任意元素的id属性作为锚点</a>

<a href="javascript:void(0)">不执行a标签跳转</a>

当a标签设置了href属性后，就是一个可以点击操作的超链接了，鼠标样式为小手形状（pointer），同时有三种显示模式（默认样式），都可以通过css样式（伪元素选择器）调整。

• 未点击时，显示为蓝色字体+下划线
• 点击访问过，显示为紫色字体+下划线
• 鼠标点击链接时，显示为红色字体+下划线

<a>元素标签的样式应该遵循上面的基本逻辑，基本原则就是让人容易分辨出这是一个超链接。

02、<table>表格

<table>

表格元素结构/顺序
<table>
<caption>
<colgroup>
<thead>
<tbody>/<tr>
<tfoot>

<table border="2" width="500px" bgcolor="#F5F5F5" align="center"
    style="border-collapse:collapse;font-size: large;">
    <colgroup>
        <col>
        <col width="30%" style="background-color: azure;">
        <col class="col" span="2">
    </colgroup>
    <thead height="40px">
        <tr>
            <th width="30%">name</th>
            <th>age</th>
            <th colspan="2">birthday</th>
        </tr>
    </thead>
    <tr align="center">  <!--数据行-->
        <td align="right" bgcolor="lightblue" rowspan="2">zhangsan</td>
        <td>22</td>
        <td colspan="2">2000-12-12</td>
    </tr>
    <tr align="left">  <!--数据行-->
        <td align="center">23</td>
        <td>2000-12-12</td>
        <td>多了一格</td>
    </tr>
</table>
<style>
    .col{
        border: 2px solid red;
        width: 200px;
    }
</style>

<img src="../res/sk (13).png" width="50px" title="鼠标悬停显示文字" border=3 ></img>
<img src="" alt="图片不存在" />
<img src="../res/sk (19).png" align="left" width="50px" height="40px" />
<a href="http://www.baidu.com"><img src="../res/sk (2).png" height="60px" /></a>

<img src="../static/images/128.png"
     srcset="../static/images/128.png 350w,
             ../static/images/256.png 750w,
             ../static/images/512.png 900w,
             ../static/images/1024.png 1000w"

     sizes="(max-width: 320px) 100px,
            (max-width: 450px) 200px,
            (max-width: 700px) 300px,
            (max-width: 800px) 400px,
            (max-width: 900px) 500px,
            1024px">
<img srcset="/res/head-48.gif 300w, /res/qq.png 600w"
                    sizes="(min-width: 500px) 600px,300px" src="/res/head-48.gif" alt="">

<picture>
    <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
    <source media="(min-width: 800px)" srcset="elva-800w.jpg">
    <img src="elva-800w.jpg" alt="">
</picture>
<picture>
    <source srcset="/res/qq-128.png" media="(min-width: 500px)">
    <img src="/res/head-48.gif" alt="">
</picture>