011 HTML+CSS(Class121-)

[A] link 标签拓展

  1. 引入外部 CSS 样式文件(前面已学过)

      <link  rel = "stylesheet"  type = "text/css"  href = "theme.css">  引入外部一个名叫 theme.css 的css文件

  2. 给网页名添加一个小图标

      <link  rel = "icon"  type = "/image/x-icon"  href = "http://www.mobiletrain.org/favicon.ico">    常见固定写法

          href中添加图标地址

  3. <link  rel = "dns-prefetch"  href = "//static.360.buying.com">    通过dns预解析网站内容,加快访问速度

[B] meta 拓展学习

  meta:添加辅助信息

  【用处】:

    辅助信息

    1. 添加描述,这个描述信息不会显示在桌面上,但会告诉计算机或者网页,便于做优化

      <meta name = "description"  content = "大连美团网精选大连美食餐厅,下载美团 app,超级喝完玩乐一折起。">

    2. 添加关键词,便于浏览器进行搜索

      <meta  name = "keywords"  content  = "大连美食, 大连酒店, 大连团购">

    3. < meta  name = "renderer"  content = "webkit">    用于支持不同内核的浏览器

    功能性信息

    4. <meta http-equiv = "X-UA-Compatible"  content = "ie = edge">    当浏览器为IE浏览器时,使用IE的*版本渲染

    5. <meta  http-equiv = "refresh"  content = "3"  url = " ">        三秒钟后刷新页面,当url中有链接内容时,跳转到指定的页面

    6. <meta  http-equiv = "empires"  content = "Web, 20 Jun 2020 22:30:00 GMT">    在指定时间进行页面缓存

 

[C] HTML5 语义化标签

    <header>        <hgroup>

            <h1>主标题</h1>
            <h2>副标题</h2>
        </hgroup>
        <nav>
            <ul>
                <li>首页</li>
                <li>论坛</li>
                <li>关于</li>
            </ul>
        </nav>
    </header>
  <main>
    主体内容
  </main> <footer> 版权归作者所有 </footer>

  语义化标签可以帮助更科学的划分页面的内容

  1. header: 页眉

  2. footer:页脚

  3. main:主体

  4. hgroup:标题组合

  5. nav:导航

  【注】header,footer,main在一个网页中智能出现一次

  

  划分区域的新标签

  6. article:独立的内容

  7. aside:辅助信息的内容

  8. section: 区域,可以嵌入在articel和aside中使用

  9. figure: 描述视频或图像额

  10. figcaption:描述图像或视频的标题部分,和figure一起使用,可以实现视频网站中各个视图片和文字的介绍内容

                        <figure>
                            <img src="./img/3.png" alt="">
                            <figcaption>
                                新水果篮子<br>
                                十二生肖美少女
                            </figcaption>
                        </figure>

  

  11. datalist: 选项列表

            <section>
                <input type="text" list="elem">
                <datalist id="elem">
                    <option value="as"></option>
                    <option value="dsas"></option>
                    <option value="afscs"></option>
                    <option value="adsvs"></option>
                    <option value="dfas"></option>
                    <option value="affxs"></option>
                </datalist>
            </section>

  12. details / summary: 文档细节 / 文档标题 

            <section>
                <details open>
                    <summary>HTML5</summary>
                    <p>这是超文本交际语言,请认真学习</p>
                </details>
            </section>

  

  13. progress / meter: 定义进度条 / 定义度量范围

            <section>
                <progress min="0" max="10" value="8"></progress>
                <meter min="0" max="100" value="80" low="20" high="60"></meter>
            </section>

  14. time:定义日和时间,对显示效果没有任何影响

  15. mark: 带有记号的文本,将需要标记的文字进行突出显示

            <section>
                <p>今天是<time title="2-14">情人节</time>,街上人很多</p>
                <p>今天是<mark>情人节</mark>,街上人很多</p>
            </section>

  

[D] 表格拓展学习

  1. 隐藏空单元  empty-cells:hidden 

    给 table 添加 empty-cells:hidden 属性即可隐藏空单元格

  2. 添加单线   border-collapse:collapse 

    给 table 添加 border-collapse:collapse 属性即可给单元格添加单线

  3. 斜线分类  border / rotate

    // 待议

 

[E] 表单拓展之美化控件

  1. 通过调用设计好的控件,替换默认的控件即可实现梅花控件的效果

  2. 通过将设置好的控件放在默认的控件下面,并将默认的控件设置为透明,即可简单粗暴的实现

  

 

上一篇:table标签自适应及常用相关配置


下一篇:自定义table的样式