THML
什么是HTML语言?
HTML:超文本标记语言 (Hyper Text Markup Language),用于描述网页中存在哪些网页元素。
HTML规范的发展
-
1993年HTML1.0标准发布(有互联网工程小组IETF)。
-
1995年—1997年:HTML2/3/4标准发布(由W3C组织进行标准定义),每一个标准都不断完善了html的语法规范。
-
2014年HTML5标准发布(由W3C组织进行标准定义),增加了媒体播放、画图、定位等功能。(W3C介绍见备注**)
-
W3C:万维网联盟创建于1994年,是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止,W3C已发布了200多项影响深远的Web技术标准及实施指南。
这都不重要,重要的是W3C可以视作web开发领域的相关部门或有关领导
浏览器内核
HTML文件的基本结构
…****标签标记HTML文档的开始和结束
头部部分:这部分包括标题和其他说明信息 主体部分:这部分包含文本、图像和连接<!DOCTYPE html><!--声明HTML版本、HTML5 -->
<html><!-- 告诉JVM此文件是一个HTML文件-->
<head> <!-- 存放 样式 JS 或者其他声明的区域 -->
<meta charset="utf-8"> <!-- 声明页面部分的编码格式-->
<title></title> <!-- 声明页面的标题 -->
<style type="text/css"> /* 声明页面样式*/
</style>
<script type="text/javascript"> /*声明页面的JS*/
</script>
</head>
<body> <!-- 编写页面内容部分-->
</body>
</html>
标签的公用属性**:**所有标签都具备的属性。
-
–class:规定当前元素所引用的样式类名称。
-
–id:规定当前元素在网页上的唯一标识,一般在css、js中会根据id检索当前元素。
-
–name:当前元素在文档上的名称,可以重复。
-
–style:规定当前元素的显示样式,取值为css样式表。
-
–title:规定当前元素的标题,类型为文本,可在工具提示中显示。
-
以上是html标准常用的公用属性
注释
-
HTML注释中的内容不会在页面中显示。
-
格式:
-
合理的使用注释可以帮助开发人员理解网页的代码
-
煮是不能嵌套
颜色
在css中可以直接使用颜色的关键字来代表一种颜色
十六进制颜色
- 用的最多的颜色是十六进制符号,一个颜色值,比如:#6600FF实际上包含了三组十六进制的数字
- 上边的例子中66代表红色的浓度,00代表绿色的浓度,FF代表了蓝色的浓度。最后的颜色是由这些制定浓度的红绿蓝混合而成的。
- 如果每一组数中的两个数字都相同,就可以把十六进制的数字缩短为只有3个字符,如将#6600FF缩短为#60F
RGB
-
也可以使用计算机中常用的RGB值来表示颜色。可以使用0255的数值,也可以使用0%100%的百分比数
-RGB(100%,0%,0%)
-RGB(0,255,0)
-
第一个数表示红色的浓度,第二个数表示绿色浓度,第三个表示蓝色的浓度
RGBA
- RGBA表示一个颜色和RGB类似,只不过比RGBA多了一个A(alpha)来表示透明度,透明度需要一个0-1的值。0表示完全透明,1表示完全不透明
- -RGBA(255,100,5,0.5)
基本标签
标题标签
-
语法:
这是标题标签
-
说明:
到
字体大小依次递减
-
作用:
– h1h6都是网页中的标题标签,不同的是,从h1h6重要性越
来越低。
– 标题标签相当于正文的标题,重要性仅次于页面的title。
– 一般标题标签我们只会使用到h3,h3以后的标题标签对于搜索引擎就没有什么意义了。
– 一个页面中只会使用一个h1标签。
段落标签
- 作用:表示网页中的一个段落。
- 语法:****<P align=“center”>段落标签
- **属性:**align
- **作用:**对齐方式
- 属性值:left, center ,right
换行标签
- **语法:****<**br />
- 作用:换行标签添加至结尾处
分隔标签
- 语法**: <**hr color=“red" size=“5px” width="" align=”” />
- 属性:****Color颜色 sizi大小-单位px(像素值) width宽度 align对齐方式
- 属性值:red, 5px
文本修饰标签
- 语法:****<FONT **size=“2” color=“red” face=“**宋体” >
- 属性:****Color颜色 sizi大小尺寸 face字体
- 作用:设置字体
- 属性值:red, 2
强调标签
- em标签用于表示一段内容中的着重点。
- strong标签用于表示一个内容的重要性。
- 这两个标签可以单独使用,也可以一起使用。
- 通常em显示为斜体,而string显示为粗体
字体标签
- i标签会使文字变成斜体
- b标签回事文字成粗体
- 这两个标签和em和strong类似,但是这两个标签没有语义
- 所以根据HTML5标准,当我们只想设置文本特殊表示,而不需要强调内容时就可以使用i和b标签
small标签
- small标签表示细则一类的旁注,通常包括免责声明、注意事项、法律限制、版权信息等。
- 浏览器在显示small标签时会显示一个比父元素小的自豪。
cite标签
- 使用cite标签可以指明对某内容的引用或者参考.列如:戏剧、文章或者图书的标题,歌曲、电影、照片或者雕塑的名称等。
blockquoto标签和q
- blockquote和q表示标记引用的文本
- blockquote用于长引用,q用于短引用
- 在两个标签中还可以使用cite属性来表示引用的地址
sup和sub
- sup和sub用于定义上标和下标
ins和del
- ins表示插入的内容,显示时通常会加上下划线
- del表示产出的内容,显示时通常会加上删除线
details标签
- 定义和用法:details标签用于表示文档或文档某个细节
特殊符号
<!--
<p>标签:
段落标签
闭合
独占一行
-->
<p>标题标签</p>
<!--
h1~h6
字体标签
闭合
字体加粗
会换行(独占一行)
-->
<h1>标题标签1</h1><h1>标题标签2</h1><h2>标题标签</h2><h3>标题标签</h3>
<h4>标题标签</h4>
<h5>标题标签</h5>
<h6>标题标签</h6>
<p>文本修饰标签</p>
<!--
<font>标签
文本修饰标签
size:字体大小
color:字体颜色
face:字体样式
闭合
非独占一行
-->
<font size="7" color="hotpink" face="楷体">文本修饰标签</font>
<font size="7" color="aqua" face="楷体">文本修饰标签</font>
<p>段落标签</p>
<p id="p1">段落标签</p>
<p id="p1">段落标签</p>
<p>分割标签</p>
<!--
<hr>标签
分隔标签
非闭合
独占一行
-->
<hr color="#FF0000" size="7" width="500px"/>
<p>超链接标签</p>
<!--
<a>标签
超链接标签
闭合
非独占
-->
<a href="https://www.baidu.com" target="_self">点击进入百度</a>
<a href="https://www.baidu.com" target="_blank">点击进入百度</a>
<p>文字加粗</p>
<!--
<b>标签
文字加粗标签
闭合
非独占
-->
<b>文字加粗</b>
<b>文字加粗</b>
<p>倾斜文字 </p>
<!--
<i>标签
倾斜文字标签
闭合
非独占
-->
<i>倾斜文字 </i>
<i>倾斜文字 </i>
<p>下划线</p>
<!--
<u>标签
下划线标签
闭合
非独占
-->
<u>下划线</u>
<u>下划线</u>
<p>内容中的语气着重点</p>
<!--
<em>标签
着重标签
闭合
非独占
-->
<em>内容中的语气着重点</em>
<em>内容中的语气着重点</em>
<p>内容的重要性</p>
<!--
<strong>标签
强调标签
闭合
非独占
-->
<strong>内容的重要性</strong>
<strong>内容的重要性</strong>
<p>旁注、版权信息 </p>
<!--
<small>标签
旁注、版权信息标签
闭合
非独占
-->
<small>旁注、版权信息 </small>
<small>旁注、版权信息 </small>
<p>cite标签</p>
<!--
<cite>标签
书名标签
闭合
非独占
-->
<cite>《七龙珠》</cite>
<cite>《七龙珠》</cite>
<p>短引用</p>
<!--
<q>标签
短引用标签
闭合
非独占
-->
孔子曰:<q>学而时习之,不亦说乎</q>
<p>上标</p>
<!--
<sup>标签
上标签
闭合
非独占
-->
10<sup>9</sup>
<p>下标</p>
<!--
<sub>标签
上标签
闭合
非独占
-->
H<sub>2</sub>O
<p>插入的内容</p>
<!--
<ins>标签
下划线标签
闭合
非独占
-->
<ins>插入的内容</ins>
<!--
<del>标签
删除线标签
闭合
非独占
-->
<del>删除的内容</del>
<details>
<summary>标题</summary>
<p>内容1</p>
<p>内容2</p>
<p>内容3</p>
</details>
图像标签
-
作用:在网页上显示图片
-
语法:
<IMG src=“images/adv_2.jpg” width=“300“ height=”150“ alt=”明星演唱会开幕” title=“全明星” >
-
属性:
src:指定图像的路径(地址)
title:鼠标悬停至图像上时,提示信息
alt:图像为正常显示时,展示的提示信息
width:图像的宽度,单位是像素(px)
height:图像的高度《单位是像素(px)
align:图像与文本相对位置的调整(center水平居中)
超链接标签
- 作用:访问(链接)到其他网页。
- 超链接的三种状态
- 当连接未访问过时,为蓝色
- 当连接访问过时,为紫色
- 当链接激活时,为红色
- 闭合标签
- 不自动换行
- 常规属性
- href:访问地址
- target:访问方式
<!-- 锚标记-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="#" name="top">顶部</a>
<div style="height: 2000px;"></div>
<a href="#top">返回顶部</a>
</body>
</html>
相对路径、绝对路径
- 相对路径:指定相对于当前文件的文件位置。(…/返回上一级)
- 绝对路径 指定从根目录到文件的完整路径。
- 根相对路径 指定从项目根目录到文件的完整路径。
列表标签
项目列表和编号:
有序列表(ol)
属性:type:阿拉伯数字,大小写英文字母,大小写罗马数字
无序列表(ul) 特点:表项开头有小黑点,li独占一行
属性:type:
- circle空心圆圈
- disc实心黑点(默认样式)
- square实心正方形黑点
定义列表(dl):
<dl>
<dt>标题</dt>
<dd>描述</dd>
</dl>
列表中可以添加文字、图片、音频、视屏,还可以列表中嵌套列表
滚动标签
<marquee> TEXT</marquee>
<!--作用:用于把marquee中的内容进行滚动
属性:direction描述用来进行滚动方向(up、down、lift、rigth)
scrollamount/scrolldelay用来控制滚动的快慢
-->
多媒体标签
音频标签
标签
- 作用:用于输出音频
- 属性:src 音频来源
controls是否显示控制栏
视频标签
标签 用于输出视频
属性:src 视频来源
controls是否显示控制栏
div标签
标签元素的分类:(是否独占一行,是否可以设置宽高)
三种标签可以通过css样式进行相互转换(display)
(block)块状标签:div,p,h1,ul,ol,li,dl,dt,dd,hr,marquee
(inline)行内标签:a,video,audio
(inline-block)行内块标签:img
div标签:用于页面分块,分区
表格 table
表格的现在还是较为常用的一种标签,但不是用来布局,常见处理、显示表格式数据。
创建表格
在HTML网页中,要想创建表格,就需要使用表格相关的标签。创建表格的基本语法格式如下:
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
在上面的语法中包含三对HTML标签,分别为 table</table、tr</tr、td</td,他们是创建表格的基本标签,缺一不可,下面对他们进行具体地解释
1.table用于定义一个表格。
2.tr 用于定义表格中的一行,必须嵌套在 table标签中,在 table中包含几对 tr,就有几行表格。
3.td /td:用于定义表格中的单元格,必须嵌套在标签中,一对 中包含几对,就表示该行中有多少列(或多少个单元格)。
注意:
\1. 中只能嵌套
\2. 标签,他就像一个容器,可以容纳所有的元素
表格属性
表头标签
表头一般位于表格的第一行或第一列。
表格结构(了解)
在使用表格进行布局时,可以将表格划分为头部、主体和页脚(页脚因为有兼容性问题,我们不在赘述),具体 如下所示:
:用于定义表格的头部。必须位于
位于
表格标题
表格的标题: caption
定义和用法
caption 元素定义表格标题。
<table> <caption>我是表格标题</caption></table>
caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
合并单元格(难点)
跨行合并:rowspan 跨列合并:colspan
合并单元格的思想:
将多个内容合并的时候,就会有多余的东西,把它删除。 例如 把 3个 td 合并成一个, 那就多余了2个,需要删除。
公式: 删除的个数 = 合并的个数 - 1
合并的顺序 先上 先左
总结表格
表格提供了HTML 中定义表格式数据的方法。
表格中由行中的单元格组成。
表格中没有列元素,列的个数取决于行的单元格个数。
表格不要纠结于外观,那是CSS 的作用。
表单标签
网站怎样与用户进行交互?答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。
语法:
<form method="传送方式" action="服务器文件">
讲解:
- form :标签是成对出现的,以开始,以结束。
- action :浏览者输入的数据被传送到的地方,比如一个JSP页面(save.jsp)。
- method : 数据传送的方式(get/post)。
<form method="post" action="save.jsp">
<label for="username">用户名:</label>
<input type="text" name="username" />
<label for="pass">密码:</label>
<input type="password" name="pass" />
</form>
注意:
1、所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在标签之间(否则用户输入的信息提交不到服务器上)。
2、method:post/get的区别这一部分内容属于后端程序员考虑的问题。
3、enctype:属性规定在发送到服务器之前应该如何对表单数据进行编码。
默认地,表单数据会编码为 “application/x-www-form-urlencoded”。就是说,在发送到服务器之前,所有字符都会进行编码(空格转换为 “+” 加号,特殊符号转换为 ASCII HEX 值)。
语法
<form enctype="value">
属性值
值 | 描述 |
---|---|
application/x-www-form-urlencoded | 在发送前编码所有字符(默认) |
multipart/form-data | 不对字符编码。在使用包含文件上传控件的表单时,必须使用该值。 |
text/plain | 空格转换为 “+” 加号,但不对特殊字符编码。 |
文本输入框、密码输入框
当用户要在表单中键入字母、数字等内容时,就会用到文本输入框。文本框也可以转化为密码输入框。
语法:
<input
name=value
type=text|password|checkbox|radio|submit|reset|file|hidden|image|button
value=value
src=url
checked
maxlength=n
size=n
onxxx=function>
name:设定当前变量名称。
type:决定了输入数据的类型。其选项较多,各项的意义是:
type=text:表示输入单行文本;
type=password:表示输入数据为密码,用星号表示;
type-checkbox:表示复选框;
type-radio:表示单选框;
type一submit:表示提交按钮,数据将被送到服务器;
tyPe-reset:表示清除表单数据,以便重新输入;
type-file:表示插入一个文件;
type-hidden:表示隐藏按钮;
type=image:表示插入一个图像;
type一button:表示普通按钮;
value:用于设定输入默认值,即如果用户不输入的话,就采用此默认值;
src:是针对type=image的情况来说的,设定图像文件的地址;
checked:表示选择框中,此项被默认选中;
maxlength:表示在输入单行文本的时候,最大输入字符个数;
size:用于设定在输入多行文本时的最大输入字符数,采用width,height方式;
文本域,支持多行文本输入
当用户需要在表单中输入大段文字时,需要用到文本输入域。
语法:
<textarea rows="行数" cols="列数">文本</textarea>
1``、<textarea>标签是成对出现的,以<textarea>开始,以</textarea>结束。
2``、**cols :**``多行输入域的**列数**。
3``、**rows :**``多行输入域的**行数**。
4``、在<textarea></textarea>标签之间可以输入**默认值**。
举例:
<form method="post" action="save.php">
<label>联系我们</label>
<textarea cols="50" rows="10" >在这里输入内容...</textarea>
</form>
注意这两个属性可用css样式的width和height来代替:col用width、row用height来代替。
使用下拉列表框
下拉列表在网页中也常会用到,它可以有效的节省网页空间。既可以单选、又可以多选。如下代码:
<form action="save.php" method="post" >
<label>爱好:</label>
<select>
<option value="看书">看书</option>
<option value="旅游" selected="selected">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
</form>
讲解:
1、value:
2、selected=“selected”:
设置**selected=“selected”**属性,则该选项就被默认选中。
使用下拉列表框进行多选
下拉列表也可以进行多选操作,在标签中设置multiple="multiple"属性,就可以实现多选功能,在 widows 操作系统下,进行多选时按下Ctrl键同时进行单击,可以选择多个选项。如下代码:
<form action="save.php" method="post" >
<label>爱好:</label>
<select multiple="multiple">
<option value="看书">看书</option>
<option value="旅游">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
</form>
使用提交按钮,提交数据
在表单中有两种按钮可以使用,分别为:提交按钮、重置。这一小节讲解提交按钮:当用户需要提交表单信息到服务器时,需要用到提交按钮。
语法:
<input type="submit" value="提交">
type``**:只有当type值设置为submit时,按钮才有提交作用**
value``**:**``按钮上显示的文字
**举例**
:
<form method="post" action="save.php">
<label for="myName">姓名:</label>
<input type="text" value=" " name="myName " />
<input type="submit" value="提交" name="submitBtn" />
</form>
使用重置按钮,重置表单信息
当用户需要重置表单信息到初始时的状态时,比如用户输入“用户名”后,发现书写有误,可以使用重置按钮
使输入框恢复到初始状态。只需要把type设置为"reset"就可以。
语法:
<input type="reset" value="重置">
type``**:只有当type值设置为reset时,按钮才有重置作用**
value``**:**``按钮上显示的文字
**举例**
:
<form action="save.php" method="post" >
<label>爱好:</label>
<select>
<option value="看书">看书</option>
<option value="旅游" selected="selected">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
<input type="submit" value="确定" />
<input type="reset" value="重置" />
</form>
form表单中的label标签
label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。
语法:
<label for="控件id名称">
注意:标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
例子:
<form>
<label for="male">男</label>
<input type="radio" name="gender" id="male" />
<br />
<label for="female">女</label>
<input type="radio" name="gender" id="female" />
<label for="email">输入你的邮箱地址</label>
<input type="email" id="email" placeholder="Enter email">
</form>
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="index.html" method="get">
<table>
<tr>
<td>文本框</td>
<td>
<input type="text" name="username" value="默认值" size="7"
maxlength="10" placeholder="提示信息" />
</td>
</tr>
<tr>
<td>密码框</td>
<td>
<input type="password" name="pwd" placeholder="请输入密码" />
</td>
</tr>
<tr>
<td>单选</td>
<td>
<input type="radio" name="sex" value="nan" id="nan" /><label for="nan">男</label>
<label><input type="radio" name="sex" value="nv"/> 女</label>
</td>
</tr>
<tr>
<td>复选</td>
<td>
<input type="checkbox" name="hobby" value="eat" checked />吃
<input type="checkbox" name="hobby" value="drink" />喝
<input type="checkbox" name="hobby" value="play" />玩
<input type="checkbox" name="hobby" value="sleep" />睡
</td>
</tr>
<tr>
<td>下拉列表</td>
<td>
<select name="month">
<optgroup label="春">
<option value="1">一月</option>
<option value="2">二月</option>
<option value="2">三月</option>
</optgroup>
<optgroup label="夏">
<option value="1">一月</option>
<option value="2">二月</option>
<option value="2">三月</option>
</optgroup>
</select>
</td>
</tr>
<tr>
<td>多行文本</td>
<td>
<textarea rows="5" cols="5" name="area">自我介绍</textarea>
</td>
</tr>
<tr>
<td>文件</td>
<td>
<input type="file" name="file" />
</td>
</tr>
<tr>
<td>隐藏域</td>
<td>
<input type="hidden" value="隐藏" name="hid" />
</td>
</tr>
<tr>
<td>数字/滑块</td>
<td>
<input type="number" name="num" min="0" max="10" step="2" value="0" /><br />
<input type="range" name="range" min="0" max="10" step="2" value="0" />
</td>
</tr>
<tr>
<td>邮箱</td>
<td>
<input type="email" name="email" />
</td>
</tr>
<tr>
<td>URL</td>
<td>
<input type="url" name="url" />
</td>
</tr>
<tr>
<td>搜索</td>
<td>
<input type="search" name="search" />
</td>
</tr>
<tr>
<td>颜色</td>
<td>
<input type="color" name="color" />
</td>
</tr>
<tr>
<td>日期</td>
<td>
<input type="date" name="d" value="2021-10-10" />(日期)<br />
<input type="datetime" name="dt" /> (移动端)<br />
<input type="datetime-local" name="dtl" value="2021-10-10T15:10" />(PC端)
</td>
</tr>
<tr>
<td>按钮</td>
<td>
<input type="submit" value="提交" />
<button type="submit" >提交</button>
<input type="image" src="img/sub.jpg" width="100px" /><br />
<input type="reset" />
<button type="reset" >重置</button><br />
<input type="button" value="按钮" />
<button type="button">按钮</button>
</td>
</tr>
</table>
</form>
</body>
</html>
框架集
<frameset rows="20%,*">
<frame src="top.html" name="top" />
<frameset cols="20%,*">
<frame src="left.html" />
<frame src="main.html" name="main" />
</frameset>
</frameset>
frameset属性
rows:将页面上下分割
值:"20%,20%," 此示例时将页面上下分成三部分,数值为每部分所占大小, * 标识剩余全部
cols:将页面左右分割
值:"20%,20%," 此示例时将页面左右分成三部分,数值为每部分所占大小, * 标识剩余全部
frame属性
src:引用页面的url
name:当前框架的名字,一般用于超链接的target属性
内嵌框架
<iframe src="b.html" name="frame" width="200px" height="250px" scrolling="no" frameborder="no" ></iframe>
属性
iframe常用属性:
1.frameborder:是否显示边框,1(yes),0(no)
2.height:框架作为一个普通元素的高度,建议在使用css设置。
3.width:框架作为一个普通元素的宽度,建议使用css设置。
4.name:框架的名称,window.frames[name]时专用的属性。
5.scrolling:框架的是否滚动。yes,no,auto。
6.src:内框架的地址,可以使页面地址,也可以是图片的地址。
<button type="reset" >重置</button><br />
<input type="button" value="按钮" />
<button type="button">按钮</button>
</td>
</tr>
</table>
</form>
</body>
# 框架集
```html
<frameset rows="20%,*">
<frame src="top.html" name="top" />
<frameset cols="20%,*">
<frame src="left.html" />
<frame src="main.html" name="main" />
</frameset>
</frameset>
frameset属性
rows:将页面上下分割
值:"20%,20%," 此示例时将页面上下分成三部分,数值为每部分所占大小, * 标识剩余全部
cols:将页面左右分割
值:"20%,20%," 此示例时将页面左右分成三部分,数值为每部分所占大小, * 标识剩余全部
frame属性
src:引用页面的url
name:当前框架的名字,一般用于超链接的target属性
内嵌框架
<iframe src="b.html" name="frame" width="200px" height="250px" scrolling="no" frameborder="no" ></iframe>
属性
iframe常用属性:
1.frameborder:是否显示边框,1(yes),0(no)
2.height:框架作为一个普通元素的高度,建议在使用css设置。
3.width:框架作为一个普通元素的宽度,建议使用css设置。
4.name:框架的名称,window.frames[name]时专用的属性。
5.scrolling:框架的是否滚动。yes,no,auto。
6.src:内框架的地址,可以使页面地址,也可以是图片的地址。