Html5一些归纳后期继续填加

柔情只为你懂 2021-09-18 12:10 219阅读 0赞

## 先从html5+css3开始归纳吧 ##

Html5的新特性归纳

1.  自封闭标签（单标签）不写关闭符号也是合法的。（可以使用） 如:<img src="images/0.jpg" alt="">
2.  所有的type属性不写也是合法的。（可以使用） <style></style><link href=””><script></script>
3.  属性值不写双引号也是合法的。（别使用） <img src=images/12.jpg alt=图片加载失败>
4.  标签大小写都合法。（别使用）

**              H5控件篇**

**                             div可以拆分为更多的标签**

**                                                   <section></section>,<nav></nav>,<header>,<footer>,<aside>**

这些标签都和div一样，是容器级标签，可以互相嵌套，放什么都行，放自己也行。都是block-level，标准流中是块级元素。

figure元素和figcaption元素

figure元素是元素组合，带有可选标题。figure元素用来表示网页上一块独立的内容，将它从删除后不会对网页上的其他的内容造成任何影响。figure元素所表示可以是图片、代码统计或者示例，也可以用于视频插件、音频插件。figure元素支持accesskey、class、contenteditable、contentmene、date-\*、draggable等html5全局属性，figure元素支持onafterprint、onbeforeprint、onbeforeunload、onerror、onload等事件属性。

figcaption元素

figcaption元素表示figure元素的标题，它从属于figure元素，在figure元素内部书写，在figure元素的从属元素的前面或者后面。建议一个figure元素放置一个figcaption元素，可以放多个其他的元素。

mark元素

mark元素用于突出或者高亮显示，对于用户有重要参考作用的一段文字，使用mark元素通常是为了引起读者注意，因为标出来的文字与用户的当前操作有关，通常该元素对于当前用户具有很好的

自动感应标签:**datalist**

可以代码javascript部分功能（画布局部区域展开或收缩的方法），不建议使用这个功能，因为部分浏览器不支持details元素。sunmary元素从属于details元素，鼠标点击sunmary元素中的内容文字时，details元素中的元素会展开或者收缩。如果details元素内没有sunmary元素，浏览器会提供文字供点击，浏览器为提供一个诸如上下箭头之类的图标，标示区域可以被搜索或者展开。details元素可以设置open属性，打开details元素所表示的局部区域处于展开状态。details元素内不仅可以放置文字，也可以放置表单、插件或对于一个统计图提供的详细数据表格。

<p>
    2	你学会技能：<input type="text" list="ganying">
    3	<datalist id="ganying">
    4		<option value="html">网页制作</option>
    5		<option value="css">样式设置</option>
    6		<option value="javascript">用户交互</option>
    7	</datalist>
    </p>

time标签，时间语义化标签。是行内元素。

details和summary。有总结含义的标签。

## **              表单** ##

**form文本框 有提示框的作用**

1<form action="" id="biaodan"></form>
    <input type="text" value="用户名" form="biaodan">

**          ** ![20190315194830844.png][]

**label标签改变  一般用在登录界面**

1<label>
    2	请输入用户名：<input type="text">
    </label>

**placeholder属性**   起到占位符的作用 可以在input表单中使用

**autofocus属性 主动获取焦点属性 一进入网站就就会获取的焦点**

**required属性  必填属性、**

**输入控件**

input标签更改type属性值表示不同的表单元素

电子邮箱：email

电话：tel

搜索框：search

网址:url

数字：number  min:最小值  max:最大值

拖拽条：range  min:最小值  max:最大值

日期：date

颜色：color

<form action="1.php" method="get">
    		<label>
    			请输入用户名：<input type="text" value="默认文本" autofocus>
    		</label>
    
    		<p>
    			你学会技能：<input type="text" list="ganying">
    			<datalist id="ganying">
    				<option value="html">网页制作</option>
    				<option value="css">样式设置</option>
    				<option value="javascript">用户交互</option>
    			</datalist>
    		</p>
    		<p>
    			请输入昵称：<input type="text" placeholder="占位符" required>
    		</p>
    		<p>
    			电话：<input type="tel">
    		</p>
    		<p>
    			电子邮箱：<input type="email">
    		</p>
    		<p>
    			网址：<input type="url">
    		</p>
    		<p>
    			搜索框：<input type="search">
    		</p>
    		<p>
    			数字：<input type="number" min="1" max="50" value="25">
    		</p>
    		<p>
    			拖拽条：<input type="range" min="100" max="200" value="150">
    		</p>
    		<p>
    			日期：<input type="date">
    		</p>
    		<p>
    			颜色：<input type="color">
    		</p>
    
    
    
    		<input type="submit" value="立即提交">
    	</form>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70][]

## **Html5插入音频** ##

**                    通过viode标签  source插入路径**

src:插入视频路径

controls:控制条

autoplay:自动播放

loop:循环播放

**                    **

1<video controls>
    2	<source src="video/2.mp4">
    </video>

[20190315194830844.png]: /images/20210812/10e34480c6af4584a0cba6346e513480.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70]: /images/20210812/24603b3d36cf4c50ba2d2d3221adb93b.png