html知识点总结
一、html概述
HTML（Hyper Text Markup Language，即“超文本标记语言”）是一种解释性语言，用于制作网页界面，使用该语言编写的网页最终被浏览器解释执行。
-
HTML是谁制定的？
W3C：世界万维网联盟 W3C制定了HTML的规范，每个浏览器生产厂家都会遵守规范。HTML程序员也会按照这个规范去写代码。 W3C制定了很多规范： HTML/XML/http协议/https协议......为了方便中国web前端程序员的开发，提供大量的帮助文档。为开发提供方便。
w3school:先出现的，和W3C没有关系 w3cschool：后出现的，和W3C没有关系
（一）html基本结构
<!--加上一下代码的第一行就表示HTML5语法，去掉就表示HTML4.0-->
<!doctype html>
<html>
<head>
<!-- 告诉浏览器使用哪一种字符编码打开当前的页面，不是设置当前页面的编码方式 -->
<meta charset="utf-8">
<title></title>
</head>
<body>
网页正文
</body>
</html>
（二）html标签分类
- 单标签：标签单独出现，语法：<标签名/>，比如<img/>。可以没有标签反斜线，即也可以，但是这样不符合万维网联盟(World Wide Web Consortium，简称W3C) 规范；
- 双标签：标签成对出现，语法：<标签名>内容</标签名>，比如<a></a>
注意：HTML标签中的标签名不区分大小写，但为了符合W3C规范，推荐使用小写。
（三）html字符实体
实体符号特点是：以&开始，以;结束
| 特殊字符 | 实体字符 |
|---|---|
| 空格 |  ； |
| " | "； |
| & | &； |
| < | <； |
| > | >； |
（四）块级元素和行内元素
- 块级元素（block element）
table、p、ol、ul、li、form、div、hr、hn(h1、h2、h3、h4、h5、h6)等元素称为块级元素，特点：块级元素自动换行且宽度默认情况下占满整个父元素。
示例 - 行内元素（inline element）
i、b、del、a、img、span, input、select、textarea、label 等元素称为行内元素，又称为内联元素、内嵌元素、直进式元素，特点：行内元素不会自动换行，相邻行内元素可以排在同一行。
二、head标签子标签
-
title标签：设置页面标题
<title>百度一下，你就知道</title> -
meta标签，<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的
<!-- 告诉浏览器使用哪一种字符编码打开当前的页面，不是设置当前页面的编码方式 --> <meta charset="UTF-8"> <!--meta 元素定义页面的描述--> <meta name="description" content="Free Web tutorials on HTML, CSS, XML" /> <!--下面的 meta 元素定义页面的关键词--> <meta name="keywords" content="HTML, CSS, XML" /> -
<base> 标签为页面上的所有链接规定默认地址或默认目标（target）
<base href="http://www.w3school.com.cn/images/" /> <base target="_blank" /> -
<link> 标签定义文档与外部资源之间的关系
<!--用于连接样式表--> <link rel="stylesheet" type="text/css" href="mystyle.css" /> -
<style> 标签用于为 HTML 文档定义样式信息
<style type="text/css"> body {background-color:yellow} p {color:blue} </style> -
<script> 标签用于定义客户端脚本，比如 JavaScript
三、body标签子标签
（一）基本标签一（p标签，br标签，hn标签，hr标签，img标签，注释）
-
<p>（paragraph单词缩写）标签：段落标签，双标签
默认会在段落的上方或下方各空出一行来（如果已有就不在空） -
<br/> 插入一个简单的换行符
-
标题是通过 <h1>- <h6> 标签来定义的。<h1>定义最大的标题，<h6> 定义最小的标题。
-
<hr/>标签：在 HTML 页面中创建水平线，用于分隔内容，常用标签属性：
color：设定水平线颜色； noshade：设定水平线的颜色为纯色，而不是有阴影的颜色； size：设定水平线粗细，单位：像素； width：设定水平线宽度，单位：像素或%； align：设定水平线显示位置<hr color="#FF0000" /> -
<img>标签：图片标签，常用属性
src：设置图片路径； alt：设置图片不存在时替代文本，该属性的显示效果与浏览器以及浏览器版本有关； height和width：设置图片的高度和宽度，单位为像素或%； title：设定鼠标移到元素上时显示的信息； border属性可以设置图片边框大小<img src = "img/png-0726.png" title = "鼠标移到图片上显示" alt = "照片不存在时显示的文本"/>注意：
任何标签都有title属性，它不是img标签特有的；
img标签中src和alt标签属性不能省略； -
HTML 注释
<!-- 中间写注释内容 -->
（二）基本标签二（del标签，ins标签，b标签，i标签，pre标签，a标签）
-
<del>标签，定义删除字
-
<ins>标签，定义插入字
-
<b>标签，定义粗体文本
-
<i>标签，定义斜体字
<del>删除字</del> <ins>插入字</ins> <b>粗体字</b> <i>斜体字</i>
-
<pre>标签，定义预格式化文本；保留所有的空格和折行。
<pre> for(int i = 0;i<10;i++){ System.out.println(i); } </pre>
-
<a>标签：超链接标签
href：hot references指定打开的页面，热引用； target：用于指定在哪个窗口打开href标签属性指定的页面，常用属性：； _blank:新窗口 _self:当前窗口（默认方式） _top:顶级窗口 _parent:父窗口<a href = "http://www.baidu.com" target = "_blank">百度一下</a>
（三）基本标签三（div标签，ol标签，ul标签，span标签）
-
<div>（division单词缩写）标签：定义文档中的分区或节，块级元素
<div style = "text-align:center">长用于文档中的分区</div> -
<span>标签：常用于组合文档中的行内元素
<span>你好</span> -
<ol>（ordered list）标签：有序列表标签
type：指定ol子标签li的编号类型，其属性值有：
| 值 | 描述 |
|---|---|
| 1 | 数字，默认值 |
| A | 大写字母 |
| a | 小写字母 |
| I | 大写罗马数字 |
| i | 小写罗马数字 |
start：指定ol子标签li序号起始点，默认为1，必须为整形数字。
reversed：HTML5新增标签属性，用于设定列表顺序为降序，其属性值为reversed。
<ol type = "a" start = "3">
<li>语文</li>
<li>数学</li>
<li>英语</li>
</ol>
-
<ul>（unordered list）标签：无序列表标签
type：指定ul子标签li的编号类型，其属性值有：
| 值 | 描述 |
|---|---|
| disc | 实心圆，默认值 |
| square | 实心方块 |
| circle | 空心圆 |
| I | 大写罗马数字 |
| i | 小写罗马数字 |
<ul type = "square">
<li>语文</li>
<li>英语</li>
<li>数学</li>
</ul>
-
<font>标签
<font color=“red” size=“5”>我是字体标签</font>
显示效果:
我是字体标签 -
<sup>标签，右上角加字
-
<sub>标签，右下角加字
10<sup>2</sup>，效果：102
10<sub>m</sub>，效果：10m
（四）HTML表格标签
HTML表格由<table>标签以及一个或多个tr、th或td标签组成：
- <table>标签用来定义表格，整个表格包含在table标签中；
- <tr>标签用来定义表格中一个行，它是单元格的容器，每行可以包含有多个单元格，由tr和/tr标签表示；
- <td>标签和<th>标签用来定义单元格，所有单元格都在tr标签内，每个单元格由一对<td>标签或一对<th>标签表示其语法如下：
<table>
<tr>
<th>1行1列的内容</th>
<th>1行2列的内容</th>
…
</tr>
<tr>
<td>2行1列的内容</td>
<td>2行2列的内容</td>
…
</tr>
…
</table>
table标签属性
border属性设定围绕表格的边框的宽度
width属性设定表格的宽度
height属性设置表格高度
align属性设置表格相对于页面的对齐方式
cellspacing属性设置单元格间距，设置为0单元格的边重叠，会加粗
cellpadding属性设置单元格内容距离单元格边框的距离大小
单元格的合并
colspan属性设置跨几列
rowspan属性设置跨几行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
<style>
table{/*为页面中所有table标签添加样式*/
width:720px;/*设置table宽度*/
margin:0 auto;/*设置table水平居中*/
border :black 1px solid;/*添加边框*/
border-spacing: 0px;/*去掉table标签及子标签边框之间空隙*/
border-collapse: collapse;/*去掉重合线*/
background-color:chartreuse;/*设置背景颜色*/
}
th{/*为页面中所有th标签添加样式*/
border :black 1px solid;/*添加边框*/
}
td{/*为页面中所有td标签添加样式*/
border :black 1px solid;/*添加边框*/
}
</style>
</head>
<body>
<table>
<tr>
<!--th: table head缩写-->
<th>学号</th>
<th>姓名</th>
<th>电话</th>
</tr>
<tr style = "text-align: center;"><!--设置问文本居中-->
<!--合并行-->
<td rowspan="2">001</td>
<td style = "height: 50px; vertical-align: top;">Jim</td>
<td>123456</td>
</tr>
<tr>
<!--合并列-->
<td colspan = "2">Kate</td>
</tr>
</table>
</body>
</html>
补充：
thead,tbody,foot标签 ,可以将一个表格切割为三部分
（五）HTML表单（form）
<form>标签用于为创建 HTML 表单，，常用标签属性如下：
- action：设定当提交表单时向何处（一般为Servlet）发送表单数据。
- method：设定如何将表单中的数据传送给服务器进行处理，属性值可以为get（对应于Servlet 中的doGet方法）或post （对应于Servlet 中的doPost方法） ，默认值为get。
- enctype ：设定在发送表单数据之前如何对其进行编码，属性值有三个：application/x-www-form-urlencoded（在发送前编码所有字符，默认值）、multipart/form-data（不对字符编码。在使用包含文件上传控件的表单时，必须使用该值）、text/plain（空格转换为 “+” 加号，但不对特殊字符编码）。
get和post区别：
get提交数据时可以在地址栏中看到数据，数据安全性低；post在提交数据时看不到数据，提高了数据的安全性；
get方法提交的数据比post方式提交的数据少，即post方式提交的数据量大。
表单提交的时候，数据没有发送给服务器的三种情况：
1、表单项没有name属性值
2、单选、复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器
3、表单项不在提交的form标签中
-
隐藏框
<input>标签中type属性属性值为hidden时即为隐藏框，其标签属性如下：
id：设定隐藏框唯一标识符； name：设定隐藏框的名字以便于服务器端获取隐藏框中的值； value：设定隐藏框默认值；<input type = "hidden" name = "id" value="1101" id = "id"/> -
文本框
<input>标签中type属性属性值为text时即为文本框，其标签属性如下：
name：设定文本框的名字以便于服务器端获取文本框中的值； id：设定文本框唯一标识符 placeholder：设置文本框提示信息；html5新增的属性 readonly：设置文本框是否只读，属性值为readonly则文本框只读，不可编辑，但数据可以传递到服务器端； maxlength：设定输入字段的最大长度，以字符个数计。 disabled：设定是否禁用文本框，属性值为disabled则文本框被禁用，不可编辑，数据无法传递到服务器端。 value：设定文本框默认值；注意：
type属性默认属性值为text，即省略type标签属性的input标签为文本框。<input type = "text" name = "user_name" placeholder="请输入" value="admin" id = "user_name" maxlength="5" readonly="readonly" disabled="disabled"/> -
密码框
<input>标签中type属性属性值为password时即为密码框，其标签属性如下：
id：设定密码框唯一标识符； name：设定密码框的名字以便于服务器端获取密码框中的值； placeholder：设置密码框提示信息；html5新增的属性 readonly：设置密码框是否只读，属性值为readonly则密码框只读，不可编辑，但数据可以传递到服务器端； maxlength：设定输入字段的最大长度，以字符个数计。 disabled：设定是否禁用密码框，属性值为disabled则密码框被禁用，不可编辑，数据无法传递到服务器端。 value：设定密码框默认值；<input type = "password" name = "password" placeholder="请输入"/> -
文件框
<input>标签中type属性属性值为file时即为文件框，input标签为单标签，其标签属性如下：
id：设定文件框唯一标识符； name：设定文件框的名字以便于服务器端获取文件框中的值； multiple：设定是否可以选择多个文件，属性值为multiple则文件框可选择多个文件，HTML5新增标签属性； disabled：设定是否禁用文件框，属性值为disabled则文件框被禁用，不可选择文件，数据无法传递到服务器端。不同浏览器显示文本框按钮效果不同，可以通过a标签改变其样式效果：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="file" id="file" style="display:none"><label for="file" class="btn">上传文件</label> <style> .btn { display: inline-block; background: #fafafa; border: 1px solid #ddd; border-radius: 4px; padding: 4px 12px; color: #888; cursor: pointer; } .btn:hover { color: #444; background: #eee; border-color: #ccc; } </style> </body> </html> -
单选框
<input>标签中type属性属性值为radio时即为单选框，其标签属性如下：
id：设定单选框唯一标识符； name：设定单选框的名字以便于服务器端获取单选框中的值；name相同的radio为一组，只能选中其中一个； disabled：设定是否禁用单选框，属性值为disabled则单选框被禁用，不可选中，数据无法传递到服务器端。 value：设定单选项对应的值，该值是传到服务器端的真正数据。 checked：设定默认选中的单选项，也可只写checked。<input type="radio" name="sex"/>男 <input type="radio" name="sex" checked="checked" />女 -
复选框
<input>标签中type属性属性值为checkbox时即为复选框，其标签属性如下：
id：设定复选框唯一标识符； name：设定单选框的名字以便于服务器端获取复选框中的值；name相同的checkbox为一组； disabled：设定是否禁用复选框，属性值为disabled则复选框被禁用，不可选中，数据无法传递到服务器端。 value：设定复选项对应的值，该值是传到服务器端的真正数据。 checked：设定默认选中的复选项，也可只写checked。<input type = "checkbox" name = "hobby" vlaue = "0" id = "basketball" checked = "checked="""/><label for = "basketball">篮球</label> <input type = "checkbox" name = "hobby" vlaue = "1" id = "pingpang" disabled="disabled"/><label for = "pingpang">乒乓球</label> <input type = "checkbox" name = "hobby" vlaue = "2" id = "football" /><label for = "football">足球</label><label>标签：双标签，点击该标签包裹内容（图片或文字）时，浏览器将焦点转到和label标签相关的表单控件（通常为单选框或复选框）上。
性别：<input type="radio" id="male" name="sex" value="0"/><label for="male">男</label> <input type="radio" id="female" name="sex" value="1"/><label for="female">女</label> -
下拉列表
下拉列表由一个<select>标签和多个<option>子标签组成：
<select>标签为下拉列表的父标签，其标签属性如下：id：设定select标签唯一标识符； name：设定select标签的名字以便于服务器端获取下拉项中的值； disabled：设定是否禁用下拉列表，属性值为disabled则下拉列表被禁用，即不可选择下拉列表下拉项，默认选中的下拉项数据无法传递到服务器端。 multiple：设定下拉列表是否可选择多个选项，也可只写multiple ； size：设定下拉列表中可见选项的数目； option标签为select标签的子标签， option标签为双标签，其标签属性如下： value：设定下拉项对应的值，该值是传到服务器端的真正数据。 selected：设定默认选中的下拉项，也可只写selected ；<select name = "province" id = "province"> <option>--请选择--</option> <option value="1" disabled="disabled">北京市</option> <option value="2" selected="selected">上海市</option> <option value="3">郑州市</option> </select> -
文本域
<textarea>标签：文本域标签，双标签，标签属性如下：
id：设定文本域唯一标识符； name：设定文本域的名字以便于服务器端获取文件框中的值； readonly：设置文本域是否只读，属性值为readonly则文本域只读，不可编辑，但数据可以传递到服务器端； disabled：设定是否禁用文本域，属性值为disabled则文本域被禁用，不可编辑，数据无法传递到服务器端。 rows：设置文本域的高度； cols：设置文本域的宽度；<textarea name = "" id = "" cols="120" rows = "50" style="resize: none;" readonly="readonly" disabled="disabled">郑州大学</textarea>文本域与文本框区别：
- 文本域可以自动换行，而普通文本框不能换行；
- 通过设置resize: none;样式可以禁止调整文本域大小
-
按钮
<input>标签中type属性属性值为button时即为按钮，其标签属性如下：
id：设按钮唯一标识符； value:设置按钮上的显示的文本； disabled：设定是否禁用按钮，属性值为disabled则按钮不可点击。<input type = "button" value = "按钮"/><input>标签中type属性属性值为submit时即为提交按钮，该按钮会把表单数据发送到服务器，其标签属性如下：
id：设定提交按钮唯一标识符； value:设置提交按钮上的显示的文本； disabled：设定是否禁用提交按钮，属性值为disabled则按钮不可点击。<input type = "submit" value = "提交"/><input>标签中type属性属性值为reset时即为重置按钮，该按钮会清除表单中的所有数据，，其标签属性如下：
id：设定提交按钮唯一标识符； value:设置提交按钮上的显示的文本； disabled：设定是否禁用提交按钮，属性值为disabled则按钮不可点击。<input type = "reset" value = "重置"/>
注意：
- readonly和disabled的异同：
相同点：都是只读，不能修改
不同点：但是readonly可以提交给服务器，disabled数据不会提交（即使有name属性也不会提交）- 表单项写了name属性的，一律会提交给服务器；不想提交这一项，就不要写name属性
用户注册表单实例一：
<!DOCTYPE html>
<html>
<head>
<title>form实例</title>
<meta charset="utf-8">
</head>
<body>
<form action="http://www.baidu.com" method="get">
用户名
<input type="test" name="username" placeholder="请输入用户名"/><br />
密码
<input type="password" name="password" /><br />
确定密码
<input type="password" name="password" /><br />
性别<!-- 单选框 -->
<input type="radio" value="男" name="sex">男
<input type="radio" value="女" name="sex">女<br />
兴趣爱好<!-- 多选框 -->
<input type="checkbox" name="interest" value="smoke"/>抽烟
<input type="checkbox" name="interest" value="drink"/>喝酒
<input type="checkbox" name="interest" value="fireHair"/>烫头<br />
学历<!-- 下拉列表 -->
<!-- multiple="multiple" 支持多选的，size设置显示条目数量 -->
<select name="grade">
<option value="gz">高中</option>
<option value="bk">本科</option>
<option value="dz" selected="selected">大专</option>
</select>
<br />
简介<!-- 文本域 -->
<textarea name="introduce" cols="20" rows="10"></textarea>
<br />
<input type="submit" />
<input type="reset" />
<br />
</form>
</body>
</html>
表单实例二：
<form>
<h1 align="center">用户注册</h1>
<table align="center">
<tr>
<td> 用户名称：</td>
<td>
<input type="text" value="默认值"/>
</td>
</tr>
<tr>
<td> 用户密码：</td>
<td><input type="password" value="abc"/></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" value="abc"/></td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex"/>男
<input type="radio" name="sex" checked="checked" />女
</td>
</tr>
<tr>
<td> 兴趣爱好：</td>
<td>
<input type="checkbox" checked="checked" />Java
<input type="checkbox" />JavaScript
<input type="checkbox" />C++
</td>
</tr>
<tr>
<td>国籍：</td>
<td>
<select>
<option>--请选择国籍--</option>
<option selected="selected">中国</option>
<option>美国</option>
<option>小日本</option>
</select>
</td>
</tr>
<tr>
<td>自我评价：</td>
<td><textarea rows="10" cols="20">我才是默认值</textarea></td>
</tr>
<tr>
<td><input type="reset" /></td>
<td align="center"><input type="submit"/></td>
</tr>
</table>
</form>
（六）其他标签
-
fieldset标签和legend标签。
fieldset标签：常用于将表单内组件分组 ，双标签；
legend标签： 设定fieldset 标签标题 ，双标签；<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form> <fieldset> <legend>基本信息</legend> <input type = "text"/> <br /> <input type = "text"/> <br /> <input type = "text"/> <br /> </fieldset> <fieldset> <legend>问卷调查</legend> <input type = "text"/><br /> <input type = "text"/><br /> <input type = "text"/><br /> <input type = "text"/><br /> </fieldset> </form> </body> </html>
-
frameset标签和frame标签
frameset标签：框架集标签，用于规定框架集中有多少个框架窗口或框架集，该标签有如下标签属性：frame标签：框架标签，单标签，用于在frameset 中定义一个框架窗口，该标签有多个标签属性：
src标签属性：当前frame框架中显示的文档的地址； name标签属性：定义当前frame框架的名称，用于在 JavaScript 中引用元素或作为链接的目标 示例 noresize标签属性：取消用户调整框架的大小 示例 scrolling标签属性：设定是否在框架中显示滚动条，该标签有多个标签属性值：<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <frameset rows="20%,*">//设置上部占20%，下部80% <frame src = "top.html" /> <frameset cols = "20%,*">//设置左部占20%，下部80% <frame src = "left.html" /> <frame src = "right.html" name = "right"/> </frameset> </frameset> </html> -
iframe标签
iframe标签：在页面中嵌入另外一个页面, 该标签为双标签，它有多个标签属性：
src标签属性：指定iframe 中显示的页面URL width标签属性：指定iframe 的宽度，可以是像素或% height标签属性：指定iframe 的高度，可以是像素或% scrolling标签属性：设定是否在 iframe 中显示滚动条，其值可以是yes、no或auto<iframe frameborder="0" scrolling="no" hspace="0" src="https://i.tianqi.com/?c=code&id=99"></iframe>我是一个单独的完整的页面<br/><br/> <!--ifarme标签可以在页面上开辟一个小区域显示一个单独的页面 ifarme和a标签组合使用的步骤: 1 在iframe标签中使用name属性定义一个名称 2 在a标签的target属性上设置iframe的name的属性值 --> <iframe src="3.标题标签.html" width="500" height="400" name="abc"></iframe> <br/> <ul> <!--target属性为abc，iframe的name值--> <li><a href="0-标签语法.html" target="abc">0-标签语法.html</a></li> <li><a href="1.font标签.html" target="abc">1.font标签.html</a></li> <li><a href="2.特殊字符.html" target="abc">2.特殊字符.html</a></li> </ul>
扫一扫
661
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
