HTML标签-->HTML5新增

qsdnet我想学编程

2019-12-05

HTML的Form新增属性

<form method="post" name="myForm">
    <p>
        邮箱：<input type="email"/>
    </p>
    <p>
        搜索：<input type="search"/>
    </p>
    <p>
        范围（滑块）：<input type="range" min="0" max="100" value="20" step="10"/>
    </p>
    <p>
        数字：<input type="number" min="5" max="100" step="10"/>
    </p>
    <p>
        网址：<input type="url"/>
    </p>
    <p>
        颜色：<input type="color"/>
    </p>
    <p>
        电话：<input type="tel"/>
    </p>
    <p>
        日期：<input type="date"/>
    </p>
    <p>
        月：<input type="month"/>
    </p>
    <p>
        周：<input type="week"/>
    </p>
    <p>
        <input type="submit"/>
    </p>
</form>

HTML新增标签

<figure>
    <img src="" alt=""/>
    <figcaption>描述</figcaption>
</figure>


<!--细节-->
<details>
    <summary>标题</summary>
</details>


<!--标记-->
<mark>黄背景颜色</mark>

<!--刻度-->
<meter value="" min="" max="" low="" high="">您的浏览器不支持meter标签</meter>

<!--进度条-->
<progress max="" value="">您的浏览器不支持progress标签</progress>

HTML5新增结构标签

<header>头部</header>
<nav>导航</nav>
<footer>页脚</footer>
<article>文章</article>
<section>章节</section>
<aside>侧边栏</aside>

视频和音频

<video src="路径" autoplay controls loop poster="" width="" height="" muted preload="auto">
    您的浏览器不支持video标签
</video>

<audio src="路径" autoplay controls loop>
    您的浏览器不支持audio标签
</audio>

<video autoplay>
    <source src=""/>
    <source src=""/>
    您的浏览器不支持video标签
</video>


<embed src="" width="" height=""/>

CSS

层叠样式表，级联样式表，简称样式表
文件后缀  .css

作用：
实现了内容与表现的分离
提高了代码的重用性和可维护性

一个css文件可以被对个HTML文件引入
一个HTML文件可以引入多个css文件

引入css

1）行内样式（内联样式）  只对当前元素起作用
<div style="color: red;"></div>

2）内部样式     只对当前页面起作用
<head>
    <style>
        /*css样式*/
        选择器{
            属性:属性值;
            属性:属性值;
            属性:属性值;
        }
    </style>
</head>

3）外部样式   提高了代码的重用性和可维护性，实现了内容与结构完全分离
<head>
    <link rel="stylesheet" href=".css"/>
</head>


4）导入式
<head>
    <style>
        @import "";
    </style>
</head>

@import和link的区别：
先加载HTML，再加载css样式，link一边加载HTML，一边加载css
有兼容性，IE5以上支持，link没有兼容性
只能引入css文件，link还可以引入其他内容
会增多http请求

基本选择器

7.基本选择器
1）全局选择器，通用选择器    *
选中网页所有内容

2）元素选择器   div   a   img   b   p  span  ul   li   table   input
选中所有指定的元素

3）类选择器
<div class="className"></div>
.className{}

class名字可以重复，class名字可以起多个，用空格隔开

4）ID选择器
<div id="idName"></div>

#idName{}

id名字唯一

选择器优先级：行内样式>ID选择器>类选择器>元素选择器>全局选择器
权重：         1000      100      10          1
优先级相同，后面的代码生效

5）合并选择器
选择器1,选择器2,...{}

提取共同样式

html5 input