HTML内容总结

时间 2020-01-09

标签 html 内容总结栏目 HTML 繁體版

原文原文链接

HTML

HTML基础

HTML（hypertext Markup Language）超文本标记语言
负责网页的三要素中的结构
html使用标签的形式来标识网页中的不一样组成部分
一个最基本的HTML页面

<!DOcTYPE html>
<!--DOCTYPE（document type）： 文档类型
版本声明，声明版本是html5。
给浏览器声明，告诉浏览器应该按照html5的规范来解析当前的文档。
若不声明，那么按照什么规范解析，就看浏览器心情，可能会致使浏览器进入怪异模式，从而致使页面没法正常显示
<!DOCTYPE html> 不是html标签，他只是一条浏览器的指令，在全部版本中，这条指令对大小写都不敏感-->
<html lang="en">
<!--lang是语言  en是英语  告诉浏览器本网页是英文网页  ch是中文-->
<!--lang是html的属性   en是lang属性的值-->

<!--HTML 标记标签一般被称为 HTML 标签 (HTML tag)-->
<!--html标签是网页结构的最外层 里边包含两个标签  body 和 head -->
<head>
    <!--head表明网页的头部，不会显示网页中，只要包含网页的元信息，标题，引入外部文件等等-->
    <meta charset="UTF-8">
    <!--meta标签是控制网页的元信息
    元信息就是信息的信息（关于当前网页的信息）
    charset表明字符编码，utf-8是万国码-->
    <title>html的编码结构</title>
    <!--title是网页的标题-->
</head>
<body>
    <!--在html中，全部咱们可以看到的内容所有书写在body中-->
</body>
</html>

HTML标签

块标签

独占一行换行显示
能够设置宽高
块标签能够嵌套块标签和行标签（p标签、h标签都只能嵌套行标签）

div标签

没有任何具体的含义，主要用于网页的布局

经过一个一个的div将页面划分为不一样的部分，以后在针对部分进行开发

标题标签（h标签）

在HTML中，一共有六级标签（h1-h6），在显示效果上h1最大，h6最小，默认加粗而且有一点间隙

h1标签最重要，表示网页中主要的内容，一个页面中只能写一个h1标签，h1常常用在网页的标题或者是logo上

段落标签（p标签）

p标记中的文字默认会独占一行，而且段与段之间会有必定间距

在HTML中字符间写再多的空格，浏览器只会当成一个空格解析，换行也会当成一个空格解析

页面中使用br标签来表示一个换行，它是一个单标签，也是一个空元素，另外hr标签能够在页面生成一条水平线

ol标签

表示多个有序的列表项，显示出是带有编号的列表

ol元素前边的编号能够是任何的形式,咱们能够经过css的list-style-type属性控制

ul元素

表示多个无序的列表项,显示出是带有项目符号列表

ul元素前边的符号能够是任何的形式,咱们能够经过css的list-style-type属性控制

不管是ol仍是ul 里边的每一项都是一个li标签

dl dt dd组合标签

dl是包含术语和对术语描述的列表，一般用来展现词汇表或者是对内容的解释

dl是定义的列表的外层包裹

dt是被解释的术语

dd是解释的内容

dt和dd是兄弟关系，父元素只能是dl;dl的子元素只能是 dt和dd

行标签

行内显示超出换行
不能设置宽和高
行标签只能嵌套行标签，不能嵌套块标签（a标签能够包含任意标签，除自身外）

span标签：

没有任何特殊的含义

主要是为了增长额外的结构，方便咱们控制样式或者是数据

使用要求：在其余语义化标签不适用的状况下再使用

b i u 标签

b标签呈现加粗状态

i标签呈现倾斜状态

u标签呈现下划线状态

这三个标签是吸引读者到须要注意的内容上，这些仅仅是添加了一些样式而已，只是表现层，尽管如此，咱们也没必要为了加粗倾斜等元素而去使用b i u等标签，替代的方法是使用css

在目前使用最多的是i标签-一般在开发过程当中，小图标之类的元素咱们习惯用i标签来表示

em strong var 标签

em标签：强调做用，标出用户着重须要阅读的内容，可是主要也给SEO（搜索引擎优化）强调，呈现的是倾斜的状态

strong标签：强调（更强的强调）做用，表示文本十分重要，主要也给SEO（搜索引擎优化）强调，呈现的是一个加粗

var标签：并无起到强调或提示用户注意的做用，默认倾斜

a标签

a标签就是超连接，用来作跳转，能够建立通向其余网页、文件同一个页面的位置、邮件地址或者其余url连接、连接电话、连接短信

a标签的href属性，用来写地址。若是是网络地址须要些全http://或者https://协议；若是写本地地址，使用相对路径便可

title属性：是鼠标悬浮在a连接上的时候，对当前连接的提示信息，弹窗显示

target属性：_self:在当前标签页跳转；_blank:在新的标签页打开跳转

download属性：书写下载文件的路径，那么能够直接下载。但须要注意的是a标签必须书写href属性，哪怕为空均可以执行download下载，不然a标签不具备任何功能

锚连接：在a标签的href中书写 #+名字；在相对应的跳转点标签书写id属性值为锚连接中的名字；这样点击锚连接就能跳转到相对应的位置

行内块标签

既拥有块标签属性能够设置宽高，也拥有行属性的行内显示
能够设置宽高
行内显示

img标签：

单标签，属于替换元素(<img><br>都属于空元素)，表明文档中的一个图像

src属性：图片路径能够书写网络路径地址也能够书写本地相对路径

title属性：当鼠标悬浮在图像上的时候，对图像的解释

alt属性：
一、定义了描述图像的替换文本
二、网络错误，路径错误等等图片没有正确加载的时候显示
三、alt属性还和SEO相关，爬虫到当前页面，并不会读取图片，而是读取img的src属性来肯定图片信息

width/height:
一、img标签除了可以使用css设置宽高之外，自身也拥有width和height属性，能够设置宽和高
二、若是说只设置了宽度或者高度，那么另一个将按照图片比例进行缩放
三、自身的width/height是不书写单位的
四、若是宽度和高度都一块儿设置，图片的宽高比例可能会改变
五、当自身的宽高属性和css设置的冲突之后，css的优先级较高

图片常见的格式：
一、jpeg（jpg）：通常图像(当图片不透明的时候，尽可能选用jpg，由于jpg占用的大小比png小)
二、png：透明图
三、gif：动图

表单标签

form标签

为用户建立html表单,表单能够向服务器发送数据,form标签中能够包含不少表单元素

action属性：
表单提交的地址

method属性：
表单提交的方式数据传输的方式
常见的两种方式是: get和postcss

get能够当成小汽车：数据少,数据直接在地址栏上显示（不安全）

post能够当成大货车：数据多数据发送相对于get安全一点

<form action="http://www.baidu.com" method="get">
    <input type="submit" value="提交">
  </form>

input标签

type类型的值不同，呈现的状态也是不同的

name属性就是给表单起一个名字（本身命名，通常是后台提供）

value属性就是表单的值，能够预约义，也能够等待用户输入name和value就构成了一个键值对，若是构不成一个键值对，就不会进行提交

type类型有如下几种：html

text：单行文本输入框（文本域）前端

没有长度和内容限制，只能输入一行，明文显示

表单提交都是以键值对的形式提交的好比 user = xiaoming

password：密码输入框html5

默认把输入的内容呈现出小黑点

radio：单选框web

书写name属性后，能够进行单选

应书写value值，是向后台提供的数据

在input前写的内容，和input没有任何关系，只不过让用户视觉上以为有关联

checkbox：多选框

file: 上传文件按钮

* hidden：提交隐藏内容chrome

在表单提交过程当中有的数据须要提交，可是不须要用户输入或者是修改，那么直接使用隐藏域提交

* button: 单纯的按钮浏览器

没有任何做用和功能，只是长了按钮的样子

若是须要添加功能，可使用js

value值是按钮中的文字

* reset: 重置按钮缓存

当重置按钮被点击，就会重置当前reset所在的表单，变成默认的状态

submit：提交按钮安全

input标签的type类型是submit表明提交 value是按钮显示的内容

提交按钮只会提交当前按钮所在的form表单中的内容

若是没有form标签，表单提交失效

<form action="http://www.baidu.com" method="get">
    请输入用户名：
    <input type="text" name="user" value="xiaoming">
    <br>

    请输入密码：
    <input type="password" name="pass" value="">
    <br>

    请选择性别：
    男：<input type="radio" name="sex" value="男">
    女：<input type="radio" name="sex" value="女">
    未知：<input type="radio" name="sex" value="未知">
    <br>

    选择你最喜欢的语言：
    PHP：<input type="checkbox" name="lang" value="PHP">
    JAVA：<input type="checkbox" name="lang" value="JAVA">
    JS：<input type="checkbox" name="lang" value="JS">
    HTML：<input type="checkbox" name="lang" value="HTML">
    <br>

    请上传你的照片：
    <input type="file" name="photo">
    <br>

    <input type="hidden" name="id" value="00000000001">

    <input type="button" value="点我啊" id="btn">

    <br>

    <input type="reset" value="重置啊">

    <input type="submit" value="提交">
</form>
<script>
    var oBtn = document.getElementById("btn");
    oBtn.onclick = function () {
        alert("hello world");
    }
</script>

select&option 下拉列表

option表明列表的每一项ruby

显示出来的值应该放在option标签中

提交的内容是放在option的value属性中

select是列表的外层

表单的name是在select中书写

textarea 多行文本输入框

右下角能够放大缩小

cols和rows用来控制宽和高

cols表明一行有几个字符（一个汉字算两个字符）

* rows表明总共几行，超出是要生成滚动条的

咱们不多这样控制，主要经过css的width和height控制

textarea没有value属性，输入的值直接就是textarea标签中的内容

<form action="###" method="get">
    请选择你喜欢的城市
    <select name="city" >
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="深圳">深圳</option>
    </select>
    <br>
    请说出你对咱们的留言：
    <textarea name="message" cols="30" rows="10" ></textarea>

    <input type="submit" value="提交">
</form>

button标签

使用场景能够在表单中提交、重置也能够作单纯的按钮

button的type类型控制按钮是作什么的

type：submit 默认提交当前的表单

type：reset 重置当前的表单

type:button 单纯的按钮没有任何功能

button和input作按钮的区别？

input是单标签不能嵌套任何元素

button是双标签双标签中能够嵌套其余元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>button</title>
</head>
<body>
    <form action="###" method="get">
        <input type="text" name="user" value="">

        <button type="button">点击我呀</button>
        <button type="button">
            <img src="../images/06.png" alt="">
        </button>
    </form>
</body>
</html>

label标签

label元素：为表单元素定义标注（点击标注的信息，可让表单元素获取焦点）

获取焦点：当表单元素变成一个能够输入的状态的时候，被称做为获取焦点

失去焦点：当表单元素失去能够输入状态的时候，被称做为失去焦点

两种使用方法：

label标签包含住标注元素，让label标签的for属性和相对应的表单元素的id属性值相等

label标签包住整个标注元素和相对应的表单元素,label不能出现for属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>button</title>
</head>
<body>
    <form action="###" method="get">
        <!--方法1-->
        <label for="user">请输入用户名：</label>
        <input type="text" name="user" value="" id="user">

        <!--方法2-->
        <label>
            男 <input type="radio">
        </label>

        <button type="submit">点击我呀</button>
    </form>
</body>
</html>

label元素：对select标签，只能获取焦点，可是不能把列表下拉出来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>button</title>
</head>
<body>
    <form action="###" method="get">
        <label for="city">选择城市</label>
        <select name="city" id="city">
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州">广州</option>
        </select>
        
        <label for="mes">留言</label>
        <textarea name="mes" id="mes" cols="30" rows="10"></textarea>
        <button type="submit">点击我呀</button>
    </form>
</body>
</html>

tabel标签

表格书写：

table是表格的最外层

caption：表格的标题通常写在表格的最上边

tr就是表格的每一行

th表示表头单元格默认居中和加粗

td表示普通单元格

表格默认没有边框，宽度也是内容撑开的

table标签的属性：

width：设置表格的宽度，每一列的内容都是自适应分配

border：给表格设置边框值为数字表明外边框的宽度

表格的外层和单元格都设置上了边框，可是单元格的边框永远是1，外层边框是border属性的值

border-collapse:collapse css设置给border元素，用来合并边框

cellpadding:设置单元格与内容之间的间隙

cellspacing:设置单元格与单元格之间的距离(单元格不合并才有效果)

合并单元格：

colspan:设置跨列，谁合并，给谁设置

rowspan：设置跨行

表格的优化：使用thead、tbody、tfoot标签包裹tr标签使其更具备语义化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>
</head>
<body>
    <table width="400" border="1" style="border-collapse:collapse;" cellpadding="10" cellspacing="0">
        <caption>0225班就业表</caption>
        <tr>
            <th colspan="2">学生就业就业薪资</th>
            <th>备注</th>
        </tr>
        <tr>
            <td>小王</td>
            <td>12</td>
            <td></td>
        </tr>
        <tr>
            <td>老王</td>
            <td rowspan="2">13</td>
            <td></td>
        </tr>
        <tr>
            <td>王中王</td>
            <td></td>
        </tr>
        <tr>
            <td>大王</td>
            <td>15</td>
            <td></td>
        </tr>
    </table>
</body>
</html>

iframe标签

建立一个包含另一个文档的内联框架，就是把其余的html页面嵌入到当前的页面中
src是嵌入html的地址，能够是网络，也能够是本地服务器
width和height属性来设置内联框架的宽高
iframe拥有本身的DOM树，也有本身的会话历史记录，页面中的每个iframe都会占用额外的计算机资源
为了性能，咱们尽可能少的去书写iframe

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset=UTF-8>
    <tItle>Title</tItle>
</head>
<body>
    <div>
        <h1>学习iframe标签</h1>
        <div>
            哈哈哈哈
            <iframe src="./05.table元素.html" width="300"></iframe>
            <iframe src="./05.table元素.html" width="300"></iframe>
        </div>
    </div>
</body>
</html>

H5新增语义化标签(结构标签)

header标签

用来定义文档（网页或者是某一个段落）的页眉（头部）

可能包含一些标题元素，也可能包含其余元素，好比logo、搜索框、做者信息等等

完成的网页或者是完整的块（网页的一个独立区域）是头部、内容、尾部组成的（并非强制）

header不是一个独立的分块，而是属于独立分块的头部

整个页面没有header限制个数，可使用多个

footer标签

*　footer标签表明一个网页或者章节内容的底部区域（页脚）
*　footer一般包含章节的做者，版权数据和文章的其余连接
*　其余和header同理，好比不是独立的区域，应该是隶属于一个章节或者是网页

nav标签：

目的：给文档提供导航列表

导航能够分为：菜单、目录表、索引

并非全部的导航都须要用nav标签，只是当前页面中比较重要的热门的可使用nav，好比在底部导航，就没有必要加入连接

一个网页可能会有多个导航，好比整个网页的导航，也能够是某一块区域的导航

nav使用有两种方法：

当nav中的导航列表是静态的，nav中直接嵌套a标签使用便可

当nav中的导航是动态的（须要滑动查看更多，主要出如今移动端），nav中最好嵌套ul>li>a标签

section标签

section是html中一个独立的区域，没有其余语义，通常会包含一个独立的标题

假设有一个效果，上边是nav导航栏，导航栏通常对对应一个区域，用来显示这个导航到的内容，这个区域咱们就可使用section

section主要是对网页进行分块，也能够对网页中的某块内容进行分块

一般一个完成的section是有标题和内容组成的，不推荐给没有标题的区域设置section

若是想要给一个内容设置有个容器用来书写样式，那么仍是推荐使用div

article标签

表明文档、页面、或程序中，能够独立的完整的被外部引用的内容

好比一篇博客、一篇文章、一段用户的评论、一个日历插件，或者是其余独立内容

通常来讲，一个article也有本身的头部header，或者是footer

article和section区别

article元素能够看作是特殊的section，可是强调独立性比section更强

section主要强调分段分块，article是强调很强的独立性

原则上来讲能用article的时候，也可使用section，可是假设用article更合适，请使用article

div和article和section对比

div、section、article语义依次递增

div没有任何的语义，仅仅是用做样式，能够用在任何场景，可是咱们容易看不清上下文关系

对于主题性的区域，咱们可使用section

加入这个区域能够脱离上下文，做为完整独立的内容存在，使用article

aside标签

表示一个和其他页面内容几乎无关的区域

被认为是独立于内容的一部分，而且能够拆出来而不会使总体收到影响，一般表现为侧边栏

这个里边的内容和其余元素内容关联性不强

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>header标签</title>
</head>
<body>
    <div>
        <!--头部区域-->
        <header>
            <h1>你看我像不像logo</h1>
            <!--导航区域-->
            <nav>
                <a href="###">news</a>
                <a href="###">my</a>
                <a href="###">tiyu</a>
            </nav>
        </header>
        <!--内容区域-->
        <section>
            <h2>这里是评论区域</h2>
            <article>
                <h3>评论人：张三</h3>
                <p>今每天气真好</p>
            </article>
            <article>
                <h3>评论人：李四</h3>
                <p>今每天气真好</p>
            </article>
            <article>
                <h3>评论人：王五</h3>
                <p>今每天气真好</p>
            </article>
        </section>
        <!--侧边栏-->
            <aside>
                我是侧边栏内容
            </aside>
        <!--底部区域-->
        <footer>
            <div>
                <h3>友情连接</h3>
                <a href="###">百度</a>
                <a href="###">阿里巴巴</a>
                <a href="###">阿里妈妈</a>
            </div>
        </footer>
    </div>
</body>
</html>

H5新增语义化标签（媒体标签）

figure标签

表明一块独立的内容，是一个独立的引用单元

这个标签在主文中用来引用图片、插画、表格、代码段等等信息

通常会在figure元素中插入figcaption元素（标题元素），将figcaption表明的标题与figure内容相关联

若是是单独一张图片或者单独的表格等等，那么直接使用相应的标签便可，若是存在图片和标题，那么请使用figure标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>figure</title>
</head>
<body>
    <figure>
        <figcaption>海贼王的图片</figcaption>
        <img src="../images/05.jpg" alt="" width="300">
    </figure>
</body>
</html>

source 标签

由于没有任何的视频格式能够兼容全部浏览器，咱们也不能同一个视频书写多个video标签

能够在video标签中书写source标签，source用来引入不一样的视频格式

浏览器会依次检测视频哪个支持，若是支持，就再也不向下寻找

video标签

src属性：视频的路径若是只有src属性，那么现实的是视频的封面

src是书写在source标签中

width：给视频设置宽度只设置宽度高度自适应

height：给视频设置高度这设置高度宽度自适应

设置宽高是不会视频变形，只要宽高有一个达到设置的要求，视频就中止等比缩放，让视频在另外一个没有充满的方向上居中

controls：显示播放控件

autoplay：视频自动播放（浏览器限制不容许自动播放可是当设置为静音的时候，自动播放生效）

muted：设置静音

loop：设置循环播放

preload：

none：提示做者认为用户不须要查看该视频，服务器也想要最小化访问流量；换句话说就是提示浏览器该视频不须要缓存。

metadata: 提示尽管咱们认为用户不须要查看该视频，不过抓取元数据（好比：长度）仍是很合理的。

auto: 用户须要这个视频优先加载；换句话说就是提示：若是须要的话，能够下载整个视频，即便用户并不必定会用它。

poster：引入一个图片或者广告视频，做为视频的封面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频引入</title>
</head>
<body>
    <video controls muted loop preload="auto" poster="../images/06.png">
        <source src="../images/source/test.mp4">
        <source src="../images/source/test.webm">
        <source src="../images/source/test.ogv">
        垃圾 给你一个连接 本身体会 <a href="">点击下载新版浏览器</a>
    </video>
</body>
</html>

audio标签

几乎全部的属性都和video标签重合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音频</title>
</head>
<body>
    <audio controls autoplay muted preload="metadata" loop>
        <source src="../images/source/music/BIGBANG%20-%20Let's%20not%20fall%20in%20love.mp3">
        <source src="../images/source/music/BIGBANG%20-%20Let's%20not%20fall%20in%20love.ogg">
        <source src="../images/source/music/BIGBANG%20-%20Let's%20not%20fall%20in%20love.webm">
        垃圾
    </audio>
</body>
</html>

H5新增语义化标签（其余标签）

mark标签

为引用的内容进行标记或突出显示文本，用来表示和上下文之间的关联性

突出显示的文本一般可能和用户当前的活动等有必定的关联性

好比，用户搜索的时候，它能够显示搜索以后的关键字

不要把mark和 em、strong进行混淆;em、strong都是表示文本在上下文的重要性，而mark只是为了表示关联性

mark标签是行内标签，默认黄色背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mark元素</title>
</head>
<body>
    <input type="text" value="下雨">
    <p>今天晚上可能会<mark>下雨</mark>，明天中秋节晴朗</p>
</body>
</html>

time标签

用来表示24小时制或者是一个公历时间

做用：以机器可读的格式去表示日期和时间，安排日程表的应用就可使用这个time标签

通用时间格式 XXXX-XX-XX XX:XX:XX

两种用法：

time标签直接包含时间

使用datetime属性来表示时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>time标签</title>
</head>
<body>
    <div>
        <!-- 主题区域-->
        <section>
            <h2>这里是评论区域</h2>
            <article>
                <h3>评论人：张三</h3>
                <p>今每天气真好</p>
                <p><time>2019-9-12 19:00:00</time></p>
            </article>
        </section>
    </div>
</body>
</html>

　datalist标签

包含了一组option元素，表明是列表可选的值

和input进行相关联，用来配套使用

input中的list属性 == datalist的id属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>datalist元素</title>
</head>
<body>
    <input list="city" type="text">
    <datalist id="city">
        <option value="河南">河南</option>
        <option value="河北">河北</option>
        <option value="湖北">湖北</option>
        <option value="湖南">湖南</option>
        <option value="胡建">胡建</option>
    </datalist>
</body>
</html>

progress标签

主要用来显示一项任务的完成程度

规范没有规定默认的样式，因此各个浏览器默认的样式不必定相同

属性:

value：是当前进度的值

max：是总进度的长度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>progress元素</title>
</head>
<body>
    <progress max="100" value="80"></progress>
</body>
</html>

ruby 注释标签

经过rt标签对ruby标签的内容进行注释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注释标签</title>
</head>
<body>
    <p>
        <ruby>蠡<rt>li</rt></ruby>
    </p>
</body>
</html>

H5新属性

input新类型

若是input的新类型不被浏览器所支持，那么他会默认显示成text文本框

input的新类型大多数都被谷歌浏览器支持，若是开发移动端，只要谷歌支持便可，由于全部安卓系统内置浏览器都是chrome

type旧类型：

text：文本框

password：密码框

radio：单选框

checkbox：多选框

hidden：隐藏域

file：文件域

文件域的 accept属性书写 image/* 表明接受任何格式的图片

capture=camera 表明从相机拍照接收

capture=photo 表明从相册选取照片

可是在pc端的表现都是选取文件

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>调用本地相册和相机</title>
    </head>
    <body>
        <input type="file" accept="image/*" capture="camera">

        <input type="file" accept="image/*" capture="photo">
    </body>
    </html>

button：按钮

reset：重置按钮

submit：提交按钮

type新类型

color：用来引入或者打开指定颜色的控件

date：日期的控件（年月日）

week：日期的控件（年周）（火狐不支持）

month：日期的控件（年月）（火狐不支持）

email：编辑email的字段

自带验证，可是验证不完整，通常仍是本身书写

在移动端上有相对应的自动弹出键盘包含 @ .com 等按键

number：用来输入数字的控件

多了一个上下的按键，能够增长和下降数字大小

验证必须是数字

其余属性

min：最少数量

max：最大数量

value：当前数量

step：每次累加累减数量

search：用来搜索框，当用户输入内容后，在末尾有一个删除按钮，单击能够删除输入好的文字

tel：电话号码输入框

url： url地址

range：输入一个拖拽的控件

属性：

max：最大值

min：最小值

step：每次走的最小单位

value：当前值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新type类型-input</title>
</head>
<body>
    <form action="###" method="get">
        请选择你喜欢的颜色：
        <input type="color" name="color">
        <br>

        请选择你的出生日期：
        <input type="date" name="brithday">
        <br>

        请输入当前的周数：
        <input type="week" name="week">
        <br>

        请输入你几月生日：
        <input type="month" name="month">
        <br>

        请输入您的邮箱地址：
        <input type="email" name="email">
        <br>

        请选择您购买的数量：
        <input type="number" name="num" min="2" max="10" step="2">
        <br>

        请在本框中进行检索：
        <input type="search" name="sear">
        <br>

        请输入您的电话号码：
        <input type="tel" name="tel">
        <br>

        请输入你的我的博客的网址：
        <input type="url" name="url">
        <br>

        请选择：
        <input type="range" name="range" min="30" max="100" value="50">
        <br>
        <br>
        <button>提交</button>
    </form>

</body>
</html>

表单元素新属性

placeholder：占位符

autocomplete：是否提示用户曾经输入过的值默认是on 关闭是off

autofocus：默认自动获取焦点

他有惟一一个值是autofocus

h5规范容许当属性名和属性值相等的时候能够直接书写属性名便可

在js中，h5容许以布尔值的形式控制属性开启或关闭,也就是在js中给autofocus属性设置值为true（真，打开）或者是 false（假，关闭）,可是在元素的属性中不容许使用true或者是false来控制开启或关闭

若是多个表单书写autofocus，那么以第一个书写的为准

required：必填项，当提交的时候，此表单必须填写

disabled：禁用任何表单元素，这个元素就被禁止输入或选择等等操做

使用disabled禁用表单，表单元素是不会在被提交了

checked：单选框或多选框默认被选中

readonly：对于可编辑的表单来讲表示不能再次被编辑可是是能够被提交的

对单选多选按钮不支持

form：

若是input存在form属性，表示当前的input属于某一个表单,此时form表单的id的值就是这个input的值,那么form表单和当前的input就进行关联了,不管input书写在哪里，都能随着表单发送数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单元素的新属性</title>
</head>
<body>
<form action="###" method="get" id="form1">
    请输入用户名：
    <input type="text" name="user" placeholder="请输入用户名" autofocus autocomplete="on">
    <br>

    请输入密码：
    <input type="text" name="pass" value="123456" autofocus required>
    <br>

    请确认性别：
    男：<input type="radio" name="sex" value="男" disabled checked>
    女：<input type="radio" name="sex" value="女" disabled>
    <br>


    请确认年龄：
    大于30岁：<input type="radio" name="age" value="30-" checked readonly>
    小于30岁：<input type="radio" name="age" value="30+" readonly>

    请输入邮箱：
    <input type="email" name="email" value="lipeihua@atguigu.com" readonly>

    <br>
    <button>提交</button>
</form>

<!--在form表单外有一个input，可是想点击form中的提交按钮的时候，把这个input也给提交了，form属性就这样使用-->
<input type="hidden" name="id" form="form1" value="12587">
</body>
</html>

select、option的新属性：

selected：默认选中项

multiple：让select能够进行多选（按住ctrl键进行多选）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>select元素的属性</title>
</head>
<body>
<form action="###" method="get">
    请选择你喜欢的食物：
    <select name="food" id="" multiple>
        <option value="肉">肉</option>
        <option value="鸡蛋">鸡蛋</option>
        <option value="水果" selected>水果</option>
        <option value="骨头">骨头</option>
    </select>
    <button>提交</button>
</form>
</body>
</html>

HTML相关规范

书写规范

标签的换行写法
双标签须要关闭
对代码进行缩进
标签的正确嵌套
合理加注释
a标签不能嵌套a标签
......

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html书写规范</title>
</head>
<body>

    <!--标签的换行写法-->
    <div>
        <p>
            今天的天
            <span>真的好啊</span>
        </p>
    </div>

    <!--标签须要关闭-->
    <p>
        <span>哈哈哈哈哈</span>
        <em>呵呵呵呵</em>
    </p>

    <!--代码缩进使用tab键
        tab每次缩进空格数量同样，咱们能够设置。也为了方便代码合并
        shift+tab是向前缩进
    -->
    <!--标签的正确嵌套-->
        <ul>
            <li></li>
            <li></li>
        </ul>
        <dl>
            <dt></dt>
            <dd>

            </dd>
        </dl>

    <!--合理加注释-->

    <!--a标签不能嵌套a标签-->
    <a href="">
        <a href=""></a>
    </a>

</body>
</html>

HTML实体(特殊符号)

在html中，会把一个或多个空格或回车解析成一个空格显示

为什么使用语义化标签

语义化标签更具备可读性，便于团队的开发和维护
没有css的状况下，网页也能很好的呈现出内容结构和代码结构
关于SEO，搜索引擎更能理解到网页中各部分之间的关系，更准确更快速搜索信息

说明：笔者只是个在前端道路上默默摸索的初学者，若本文涉及错误请及时给予纠正，若是本文对您有帮助的话，请点赞收藏加关注，你的承认是我前进的动力，谢谢！