HTML标签-->HTML5新增

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的区别:
1.@import先加载HTML,再加载css样式,link一边加载HTML,一边加载css
2.@import有兼容性,IE5以上支持,link没有兼容性
3.@import只能引入css文件,link还可以引入其他内容
4.@import会增多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,...{}

提取共同样式
原文链接:https://www.cnblogs.com/Testking/p/11990839.html
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • HTML5 标签comment 注释标签用于在源文档中插入注释。注释内容不会被浏览器显示。为代码编写注释的好处是...
    才気莮孒阅读 9,566评论 1 25
  • HTML5< !--...--> 标签 comment 注释标签用于在源文档中插入注释。注释内容不会被浏览器显示。...
    野小宝阅读 5,129评论 0 10
  • 学习HTML的最佳网站没有之一http://www.w3school.com.cn/html/ 关于HTML/HT...
    Amyyy_阅读 6,648评论 0 16
  • 序言 整理谷歌的小弟的笔记,版权归原作者所有,本文仅作整理,原文链接:http://blog.csdn.net/l...
    在代码下成长阅读 4,908评论 1 5
  • 问答题1 /72浏览器页面有哪三层构成,分别是什么,作用是什么?参考答案构成:结构层、表示层、行为层分别是:HTM...
    _Yfling阅读 4,979评论 0 23

友情链接更多精彩内容