HTML5-常见标签

1.网页由三部分组成：

HTML:网页的具体内容和结构
CSS：网页的样式
JavaScript: 网页的交互效果

2.HTML常见标签：

2.1.标题：h1、h2、h3、h4、h5....

<h1>我是h1标签</h1>
<h2>我是h2标签</h2>
<h3>我是h3标签</h3>
<h4>我是h4标签</h4>
<h5>我是h5标签</h5>
<h6>我是h6标签</h6>

2.2.分割线标签 hr
<hr>
2.3.换行标签 br
<br>
2.4.列表标签: ul li ol

<!--无序列表-->
<ul>
    <li>我是无序列表</li>
    <li>我是无序列表</li>
    <li>我是无序列表</li>
    <li>我是无序列表</li>
    <li>我是无序列表</li>
</ul>

<!--有序列表--> 
<ol type="I"> 
    <li>我是有序列表</li> 
    <li>我是有序列表</li> 
    <li>我是有序列表</li> 
    <li>我是有序列表</li> 
    <li>我是有序列表</li> 
</ol>

2.5.容器标签：div span 容纳其他标签
<div>我是容器标签</div>
<span>我是行内容器标签</span>
2.6.超链接标签 a

// _blank表示在空白页面打开
<a  target="_blank">百度一下,你就知道</a>

href和src区别

href是引用,相当于iOS中的import,不是必需的.(比如<link>,<a>,...)
src是引入,是必需的,没有这个资源,标签就用不起来.(比如<img>,<audio>,<video>,...)

2.7.表单标签 input

<input placeholder="我是占位文字"><br><br><br><br> 
<input value="我是默认的文字"><br> 
<input type="date"><br> 
<input type="file"><br> 
<input type="color"><br> 
<input type="radio"><br> 
<input type="checkbox"><br>

屏幕快照 2017-10-04 上午7.51.47.png
2.8.段落标签 p
<p>我是段落标签</p>
2.9.图片标签

// 相对路径: 资源在当前的项目中  ./  ../ ././
// 绝对路径: 资源不在当前的项目中，在网络上: http://  https:// ftp:// 
<img src="img/share.png">
<img src="http://ages/cms/si09/index_06.jpg" alt="这是一张图片" width="20%"/>

3.HTML5新增标签

1.article 标记文章主体内容
2.header 标记文章头部内容
3.footer 标记文章结尾内容
4.section 标记文章章节内容
5.nav 菜单导航，连接导航

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8"> 
    <title>一个papi酱，老总讲了又讲，丽人丽妆咋这么急？</title>
</head>
<body> 
    <!--文章--> 
    <article> 

        <!--头部--> 
        <header> 
            <h2>一个papi酱，老总讲了又讲，丽人丽妆咋这么急？</h2> 
            <h4>分类 :互联网</h4> 
            <img src="img/share.png">
        </header> 

        <!--主要内容-->
        <img  width="80%">
       <section>
           <h3>丽人丽妆快炒过头了</h3>
           <p>看它借助PAPI酱炒作用心，除了这类人物具有爆款价值外，可能还有借机传播公司价值、后续融资、IPO的用意。当然，阻击对手的用心似乎也在流露。</p>
           <p>当初嫁接PAPI酱被质疑是个内部循环、营销噱头，罗振宇、黄韬、阿里的关系，确实容易引发外界质疑。不过，如果丽人丽妆最后真金白银地掏了，那也是不错的品牌传播案。声量上来，无所谓好坏。</p>
       </section>

       <section> 
           <h3>丽人丽妆这家公司风格，确实本不像今日</h3> 
           <p>它的商业模式有些看点，但也谈不上特别出奇。它从化妆品代运营模式走出来，走向所谓真零售，自采自销，与许多国内外化妆品品牌建立了授权合作，崇尚的是所谓“网上专柜”。</p> 
       </section> 

       <!--尾部--> 
       <footer> 
           <h3>版权声明</h3> 
            <div>本文仅代表作者观点，不代表百度立场。</div> 
            <div>本文系作者授权百度百家发表，未经许可，不得转载</div> 
       </footer> 
    </article>
</body>
</html>

2.6.meter 特定范围内数值
<meter value="30" max="100" min="0">浏览器兼容</meter>

屏幕快照 2017-11-27 上午11.00.57.png

3.7.progress 进度条
<progress value="40" max="100"></progress>

屏幕快照 2017-11-27 上午11.01.37.png

3.8.video 视频

<video src="source/BigBuck.m4v" controls="controls"></video>

3.9.audio 音频

<audio src="source/music.m4a" controls="controls"></audio>

4.HTML标签类型

块级标签: div、p、h1、h2、ul、li
- 独占一行
- 可设置宽高
行内标签: span、a、label
- 与其他行内标签共占一行
- 宽高取决于内容
行内块级标签: input、button
- 与其他行内块级标签共占一行
- 可设置宽高
4.1.修改标签类型 display
- none：隐藏标签
- block：变为块级标签
- inline：变为行内标签
- inline-block：变为行内-块级标签

// CSS文件中设置
div{
    background-color: red;
    width: 200px;
    height: 80px;
    /*隐藏标签*/
    /*display: none;*/
    /*改变标签的类型: 块级--->行内标签*/
    /*display: inline;*/
    /*改变标签的类型: 块级--->行内-块级标签*/
    display: inline-block;
    }
// HTML文件中修改
<div class="dom"  style="display: block"></div>

全部频道

HTML5-常见标签

1.网页由三部分组成：

2.HTML常见标签：

3.HTML5新增标签

4.HTML标签类型