非常初级的小项目怎么做：

因为版心、通栏、页头、页脚是通用的，小标题的样式也是重复的。这些部分的css可以放入common.css。

banner栏一般是一个列表，有n个项，每项底图用行内样式添加，里面各有一个链接。列表的初始为不可见且z-index低，active时是可见的而且提高z-index。
然后搞n个圆按钮对应每个图，active时是实心的，cursor是手指。各种细节不必细说。
以上元素注意定位和优先层级。

 

wbr；对于长单词在空间不够用的时候可以从这里断开。

这两个应该也几乎用不上了，<embed src=‘’> ；<object>下级<param value=''>

audio和video标签都用src引入资源，属性有controls, loop, autoplay, muted静音；
如果想引入多个源防止格式不兼容，可以包裹source标签，再在里面用src。

 

文字注解

bdo：可以重新写里面的文字排布规则

<bdo dir="rtl"></bdo><span>床前明月光，</span></bdo>
<bdo dir="rtl"></bdo><span>疑是地上霜。</span></bdo>

以上代码配合以下css使用

    p:first-child{
　　 direction: rtl;　　从右到左
    unicode-bidi: bidi-override;
    }

怎样写拼音

    <ruby>
        寒<rt>hán</rt>
    </ruby>

 

meta和link扩展

    <!-- 缓存，在日期之后重新去服务器获取资源 -->
    <meta http-equiv="expires" content="Wed,20 Jan 2021 22:33:00 GMT">
    <!-- ie浏览器使用更高的版本渲染 -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 刷新跳转 -->
    <meta http-equiv="refresh" content="3,url='http://www.baidu.com' " >
    
    <!-- 添加地址栏前和浏览器标签页的小图标  -->
    <link rel="icon" type="/images/x-icon" href="http://www.mobiletrain.org/favicon.ico">
    <!-- 进行预dns解析 -->
    <link rel="dns-prefetch" href="//static.360buyigg.com">

 

语义化

h1和header只能出现一次

article独立模块；section用于分区块；

            <input type="text" list="elem">
            <datalist id="elem">　　下拉列表
                 <option value="a"></option>
                 <option value="ab"></option>
                 <option value="abc"></option>
                 <option value="abcd"></option>
             </datalist>

            <details open>
               <summary>HTML</summary>
               <p>超文本标记语言</p>　　折叠起来
            </details>

 <progress min="0" max="10" value="7"></progress> 颜色不变
 <meter min="0" max="100" value="85" low="10" high="60"></meter> 变色

          <p>今天是<time title="2-14">春节</time>，都回家过年了</p> 悬停
          <p>今天是<mark>春节</mark></p> 高亮

<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）

             <figure>
                  <img src="./img/youku.jpg" alt="">
                  <figcaption>新水果篮子❤高甜❤高甜</figcaption>
             </figure>