html总结（原创）

一、 html

1. 作用：

写网页结构

2 HTML文件后缀

.html或者htm

3 DOCTYPE html 的作用

它是一个文档类型声明，告诉浏览器按当前标准执行代码。

4 标签

html里的标签分为两种，分别是单标签和双标签。、
单标签：非封闭类型标记，又叫空标记。
单标签：img、br 、 hr、 input、meta、source
双标记：封闭类型标记。
双标签：body、html 、h1-h6 、p、 a、 div、 span、 b 、i、 u 、s、 del、 sup、 em、 strong、 ul、 ol、 li、 dl、 dt、 dd、 table、 tr、 td、 th、caption、 thead、 tbody、 tfoot、 form、 button、 video、 audio 、header、 nav、 footer、 aside、 section、 article。

5 元素

元素指的是从开始标记到结束标记的所有内容。

6 块级元素和行内元素的区别

（1）块级元素独占一行，行内元素在同一行显示。
（2）块级元素默认宽度100%，行内元素宽度默认由内容撑开。
（3）块级元素：hn p hr body html ul ol li dl dt dd table tr td th form div header nav footer aside section article。
（4）行内元素：img span i a audio video input button select textarea b u s del sup sub em strong big small 。
（5）布局时，块级元素里可以包含行内元素和块级元素，但是行内元素一里面一般不包括块级元素。

7 图片 img

<img src=" ",alt=" " title=" ">

alt:当图片不能正常显示时显示的文字。
title：鼠标悬停在图片上时显示的文字内容。
注：img里只设置宽，不设置高，图片会等比例缩放。

8 超链接 a

<a href=""></a>

属性：target=“_blank”表示跳到新窗口打开。
target= =“_self”原窗口打开。

a还有name属性，可以通过name属性来设置锚点。

给跳转到的a加name属性，然后给点击的那个a标签的href="#name名"代码如下：
（1）跳转到同一个界面(点a跳转到a)

<a href="#box">点击我跳转到页面的另一个位置</a>

<a href=" " name="box">跳转到我</a>

(2) 从一个页面的a跳转到另一个页面的a(点a跳转到a)

<a href="03.html#box">点击我跳到03.html页面的a</a>
<a href=" " name="box">跳到我，我是03.html里面的a</a>

(3)点击a跳转到块级元素

<a href="#box1">点击我跳转到块级元素</a>
<p href=" " id="box1">跳到我这个块级元素</a>

9 文本格式化标签

<b></b>加粗<strong></strong>
<i></i>斜体<em></em>
<s></s>删除线 <del></del>
<sup></sup>上标
<sub></sub>下标
<big></big>大号字
<small></small>小号字

10 有序列表与无序列表

无序列表

<ul>
<li></li>
</ul>

有序列表

<ol>
<li></li>
</ol>

11 表格

作用：向用户展示数据
特点：同行等高、同列等宽。

<table>
<caption>表格的标题</caption>
<tr>
<td></td>
<td></td>
</tr>
</table>

注：th可以替代td的位置，是表头，默认水平居中且加粗。

表格的属性

（1）border 表格的边框，默认无边框
（2）align 设置表格的对齐方式（默认水平居左）
（3）width height 默认由内容撑开
（4）bgcolor 背景色
（5）background 背景图片
（6）bordercolor 边框色
（7）cellpadding 设置内容距边框的距离
（8）cellspacing 单元格之间的距离，取值为0，单元格距离为0

表格合并单元格

colspan：跨列合并（取值为number）
rowspan：跨行合并

12 form表单

作用：提交数据到服务器，使页面具有交互性。

<form action=" " name=" " method=" "></form>
name:表单名称
action:提交的地址
method: 提交的方式（get 与post）

get与post的区别：

get提交数据不安全，提交数据会在地址栏显示；post安全
get提交数据有大小限制（不能大于2kb），post理论上没有限制

13 表单元素(掌握)

<form action=" " name=" " method=" ">
用户名：<input type="text" name="username" value="输入用户名">
密码：<input type="password" name="password" value="请输密码">
性别：<input type="radio" name="sex" value="men">男
     <input type="radio" name="sex" value="women">女
     注：单选要加name属性，而且name属性要相同
 爱好：<input type="checkbox" name="hobby" value="football">足球
       <input type="checkbox" name="hobby" value="play">玩
       <input type="checkbox" name="hobby" value="football">足球
提交:<input type="submit" value="登录">
重置：<input type="reset" value="重置">
无功能按钮：<input type="button" value="无功能的按钮">
提交：<button>提交</button>
重置：<button type="reset">重置</button>
无功能按钮：<button type="button">无功能的按钮</button>
</form>

14 表单元素（了解）

<form action=" " name=" " method=" ">
文件：<input type="file">
注:文件要加一个enctype属性，才能成功上传文件
隐藏域：<input type="hidden" value=" ">
下拉列表：
<select name=" ">
<option value="one">小花</option>
<option value="one">小白</option>
 </select>
 多行文本框：
 <textarea name=" " id=" " cols=" " rows=" "></textarae>
 label标签（配合单选与多选按钮使用，提升用户体验度，label的for属性与单选框或者多选框的id属性绑定）
 性别：<input type="radio" name="sex" value="men" id="men">
      <label for="men">男</label>
      <input type="radio" name="sex" value="women" id="women">
      <label for="women">男</label>

15 h5新增的type类型

邮箱：<input type="email">
url： <input type="url">
搜索：<input type="search">
颜色：<input type="color">
数字：<input type="number">
范围：<input type="range" min="" max="" value=""step="">
电话：<input type="tel">
日期：<input type="date">
周：<input type="week">
月：<input type="month">

16 h5新增属性

（1）placeholder=”这里写默认提示的东西”
    <input type="text" placeholder="用户名">
（2）autofocus 自动获取焦点，推荐写在第一个表单元素上
（3）required 必填项
（4）min max 最小值和最大值，配合数字和范围使用
（5）minlength maxlength 最小长度和最大长度
（6）multiple 可输入多个用逗号隔开，配合邮箱和网址使用

17 视频标签

支持格式：mp4、ogg、webM

<video src=" " width=" " autoplay controls loop muted poster=" "></video>
width：视频宽度
height：视频高度
autoplay:自动播放
controls：显示控制面板
loop: 循环播放
muted：静音播放
poster：视频播放前图片路径