一、html概述
HTML(Hyper Text Markup Language,即“超文本标记语言”)是一种解释性语言,用于制作网页界面,使用该语言编写的网页最终被浏览器解释执行。
W3C:世界万维网联盟
W3C制定了HTML的规范,每个浏览器生产厂家都会遵守规范。HTML程序员也会按照这个规范去写代码。
W3C制定了很多规范:
HTML/XML/http协议/https协议......
(一)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字符实体
实体符号特点是:以&开始,以;结束
特殊字符 | 实体字符 |
---|---|
空格 |  ; |
" | "; |
& | &; |
< | <; |
> | >; |
(四)块级元素和行内元素
- 块级元素(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:设定水平线显示位置
- <img>标签:图片标签,常用属性
src:设置图片路径;
alt:设置图片不存在时替代文本,该属性的显示效果与浏览器以及浏览器版本有关;
height和width:设置图片的高度和宽度,单位为像素或%;
title:设定鼠标移到元素上时显示的信息;
border属性可以设置图片边框大小
<img src = "img/png-0726.png" title = "鼠标移到图片上显示" alt = "照片不存在时显示的文本"/>
- html注释
<!-- 中间写注释内容 -->
(二)基本标签二(del标签,ins标签,b标签,i标签,pre标签,a标签)
- <del>标签,定义删除字
- <ins>标签,定义插入字
- <b>标签,定义粗体文本
- <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:父窗口
(三)基本标签三(div标签,ol标签,ul标签,span标签)
- <div>(division单词缩写)标签:定义文档中的分区或节,块级元素
<div style = "text-align:center">长用于文档中的分区</div>
- <span>标签:常用于组合文档中的行内元素
- <ol>(ordered list)标签:有序列表标签
- type:指定ol子标签li的编号类型,其属性值有:
值 | 描述 |
---|---|
1 | 数字,默认值 |
A | 大写字母 |
a | 小写字母 |
I | 大写罗马数字 |
i | 小写罗马数字 |
start:指定ol子标签li序号起始点,默认为1,必须为整形数字。
reversed:HTML5新增标签属性,用于设定列表顺序为降序,其属性值为reversed。
- <ul>(unordered list)标签:无序列表标签
- type:指定ul子标签li的编号类型,其属性值有:
值 | 描述 |
---|---|
disc | 实心圆,默认值 |
square | 实心方块 |
circle | 空心圆 |
I | 大写罗马数字 |
i | 小写罗马数字 |
- <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标签属性
-
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则文件框被禁用,不可选择文件,数据无法传递到服务器端。
-
-
单选框
-
标签中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标签相关的表单控件(通常为单选框或复选框)上。
-
<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>标签为下拉列表的父标签,其标签属性如下:
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属性
- readonly和disabled的异同:
-
(六)其他标签
-
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>
-