一、HTML简介
1. HTML是什么
HTML:Hyper Text Markup Language超文本标签语言
由各种标签组成,用来制作网页,告诉浏览器该如何显示页面
2. 版本
W3C:World Wide Web Consortium万维网联盟,制定Web技术相关标准和规范的组织,HTML就是W3C制定的标准
两个版本:HTML4.01、HTML5
3. 后缀名
HTML文件以 .html
为后缀
二、HTML文档结构
1. 基本结构
-
HTML标签是由尖括号包围的关键词,如
<html>
,通常都是成对出现,如<html>
</html>
(也有不成对出现的特殊标签,如
<meta>
) -
以
<html>
为根标签,包含<head>
头部和<body>
主体部分 -
头部提供关于网页的相关信息,如标题、字符编码、关键字等摘要信息
-
主体部分提供网页的具体内容,真正显示在页面中
-
可以在网页文件的第一行使用
<!DOCTYPE html>
声明文档的类型,表示使用HTML5版本规范 -
合理的进行缩进;标签名不区分大小写,但一般都习惯全小写
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> 欢迎来到HTML! </body> </html>
2. 标签组成
2.1 标签组成
一个完整的HTML标签的组成:
<标签名 属性名="属性值">内容</标签名>
属性值要用引号引起来,一般使用双引号
2.2 标签分类
根据标签是否关闭,可以分为:关闭型、非关闭型
-
关闭型,有结束标签
<title></title> <body></body> <h1></h1>
-
非关闭型,没有结束标签
<br> <hr> <meta>
根据标签是否独占一行,可以分为:块级标签、行级标签
-
块级标签:显示为块状,独自占一行
<h1></h1>
-
行级标签:在行内显示,可以与其他内容在同一行显示
<span></span>
3. 注释
注释在浏览器中不会显示,但通过查看源代码可以看到
<!-- 注释内容 -->
4. 实体字符
也称为特殊字符,用于显示一些特殊符号,如:<、>、&、空格等
语法:
&实体字符名称;
常用实体字符:
< < 小于号 less than
> > 大于号 more than
空格 space 对于连续的空白字符(包含空格、缩进、换行等),在浏览器中显示时只会显示为一个空格
&; & 与
©; © 版权符号 copyright
®; ® 注册符号 register
注:实体字符名称区分大小写,即大小写敏感
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body bgcolor="#ffe4c4">
欢迎来到HTML!
<hr>
<h1>Java软件工程师</h1>
welcome to
<br>
nanjing
<hr>
<!--
块级标签,行级标签
span标签是一个行级标签
-->
<span>嘿嘿</span>哈哈
<hr>
书名:<<HTML从入门到放弃>>
<br>
好好 学习,天天向上
<br>
在HTML中使用&lt;表示小于号<
<br>
在HTML中使用&copy;表示版权符号©
<br>
在HTML中使用&reg;表示注册符号®
<hr>
<p>HTML:Hyper Text Markup Language超文本标签语言</p>
<p>由各种标签组成,用来制作网页,告诉浏览器该如何显示页面</p>
<hr>
<h2>Java</h2>
<h3>Web</h3>
<h4>Android</h4>
<h5>IOS</h5>
<h6>Python</h6>
</body>
</html>
三、常用标签
1. 基本标签
标签 | 含义 | 说明 |
---|---|---|
br | 换行标签 | 非关闭型 |
p | 段落标签 | 关闭型,块级标签,前后有明显的间隔 |
h1、h2…h6 | 标题标签 | 按照h1到h6逐渐变小,块级标签,加粗显示 |
div | 分区标签 | 常作为容器来使用,一般用在页面布局中,块级标签 |
span | 范围标签 | 默认没有任何效果,一般用来设置行内的特殊样式 |
ol、li | 有序列表 | 有顺序的项目列表 |
ul、li | 无序列表 | 无顺序的项目列表 |
hr | 水平线标签 | 非关闭型,块级标签 |
img | 图像标签 | 非关闭型,行级标签 |
hr标签的常用属性:
-
color 颜色
两种写法:
颜色名称,如red、green、blue、white、black…
16进制的RGB:Red、Green、Blue,用法:#RRGGBB,每个颜色的范围是0255,转换为16进制 是00—FF
如#FF0000红、#00FF00绿、#0000FF蓝、#FFFFFF白、#000000黑、#CCCCCC灰色、#FF7300橙色
特定情况下可以简写,要求每种颜色的两位值各自必须都相同,如#0f0、#00f、#ccc
-
size 粗细
-
width 宽度
两种写法:
像素,绝对值(固定值)
百分比,相对值,相对于父容器的宽度百分比
-
align 对齐
取值:center(默认值)、left、right
img标签的常用属性:
-
src:source 指定图片的路径,必须有
如果图片和html页面在同一个文件夹中,可以直接写图片名称
习惯上,我们会把多个图片统一放到特定文件夹中,如images,此时需要在图片名称前添加文件夹的名 称images/
-
alt:当图片无法显示时的提示信息
-
title:当鼠标停留在图片上时显示的提示信息
-
width/height: 设置图片的宽和高
默认按图片原尺寸显示
如果只设置其中一个,则另一个按比例缩放
如果同时设置宽和高,可能会导致图片变形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width: 1200px; height: 100px; background: antiquewhite">顶部的导航菜单</div>
<div style="width: 1200px; height: 400px; background: beige">
中间的主体部分
<br>
iPhone XR不要9998,也不要1888,只要<span style="color: brown; font-size: 30px">198</span>!
<hr>
<h2>期末考试前三名</h2>
<ol>
<li>唐伯虎</li>
<li>秋香</li>
<li>石榴姐</li>
</ol>
<h2>可爱的同学们</h2>
<ul>
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ul>
<h2>hr标签的常用属性</h2>
<hr color="#00F" size="5px" width="50%" align="left">
</div>
<div style="width: 1200px; height: 120px; background: aquamarine">
底部的版权部分
<br>
<img src="image/like.jpg" alt="这是一张图片" title="你敢点我试试" width="160px">
</div>
</body>
</html>
2. 标签嵌套
标签不能瞎嵌套,如以下嵌套就是错误的,p标签中不能嵌套div标签
<p>
<div>world</div>
</p>
浏览器渲染后显示的页面代码与编码时可能会有所不同
3. 开发者工具
用来帮助开发人员查看和调试页面,浏览器基本上都提供了类似的工具
如何打开:
-
在页面中右击——>检查/查看元素/审查元素
-
按F12
常用工具:
-
Console:控制台,显示各种警告和错误信息
-
Elements:从浏览器的角度查看页面,浏览器渲染页面时的HTML、CSS、DOM等
-
Network:查看网络请求信息,浏览器向服务器请求了哪些资源、资源的大小以及加载资源花费的时间
四、超链接
1. 简介
使用超链接可以从一个页面跳转到另一个页面,实现页面间的导航
当把鼠标移动到超链接上时,鼠标箭头会变成一只小手
使用 <a>
标签来创建超链接
- 普通链接,跳转到另一个页面
- 锚链接,跳转到锚点
- 功能性链接,实现特殊功能
2. 超链接的种类
分为三种:
- 普通链接,跳转到另一个页面
- 锚链接,跳转到锚点
- 功能性链接,实现特殊功能
2.1 普通链接
语法:
<a href="链接地址" target="链接打开位置">链接文本或图像</a>
常用属性:
-
href 链接地址/路径,必须的
-
target 链接打开的位置,常用取值: _self (自身、当前,默认值)、 _blank (空白、新的)
路径分类:
-
相对路径
相对于当前文件的路径
如果链接目标文件和当前页面文件在同一个文件夹,可以直接写名称如果不在同一个文件夹中,则需要指定相对路径
.
表示当前位置..
表示上一级位置 -
绝对路径
以根开始的路径
D:/software/dd.html
https://www.baidu.com/
-
2.2 锚链接
点击链接后跳转到指定的位置(锚点anchor)
使用步骤:
- 定义锚点(标记)
<a name="锚点名称">目标位置</a>
-
链接锚点
<a href="#锚点名称">当前位置</a>
2.3 功能性链接
<a href="images/heihei.gif">点击此处下载图片</a>
<a href="javascript:alert('胆子不小!')">点我试试</a>
3. URL
Uniform Resource Locator 统一资源定位符,用来定位资源所在位置,最常见的就是网址
URL组成: 协议://域名:端口/路径/资源?参数#锚点
示例:http://www.baidu.com:8080/shop/product/add.html?name=tom&age=21#abc
-
协议 ,通信的协议,如:http、https、ftp、file
-
域名,服务器的地址,一般开发中使用ip地址,如:192.168.1.8;项目上线后使用域名,如
-
端口,通信时使用的端口号,如:http默认使用80、https默认使用443、ftp默认使用21
如果使用的是默认端口,则端口可以省略;如果使用的不是默认端口,则端口不能省略
-
路径,目标文件所在的路径结构,如:/shop/product
-
资源,要访问的目标文件,如:add.html
-
参数,也称为查询字符串,以?开头,参数名和参数值之间以=隔开,多个之间以&隔开,如:? name=tom&age=21
-
锚点,以#开头,如:#abc
五、表格
1. 简介
表格是一个规则的行列结构,每个表格由若干行组成,每行由若干单元格组成。
table、row、column
2. 基本结构
2.1 table标签
用来定义表格
常用属性:
- border 边框,默认为0
- width/height 宽度/高度
- align 水平对齐,取值:left、center、right
- bordercolor 边框颜色
- bgcolor 背景颜色
- background 背景图片
- cellspacing 间距,单元格与单元格之间的距离
- cellpadding 边距,单元格内容与边界之间的距离
2.2 tr标签
用来定义行,table row
常用属性:
- align 水平对齐,取值:left、center、right
- valign 垂直对齐,取值:top、middle、bottom
- bgcolor 背景颜色
- background 背景图片
2.3 td标签
用来定义单元格,table data
常用属性:align、valign、bgcolor、background
注: 表格必须由行组成, 行必须由单元格组成, 数据必须放到单元格td中
2.4 使用idea插件快速建表小技巧
比如要建一个两行两列的表
步骤:
1.输入table>(tr>td{td$}*2)*2
#花括号里代表td的内容,$代表序号按照列数自动增长,tr括起来*行数,td*列数
2.按下Tab
3.自动转换成如下代码
<table>
<tr>
<td>td1</td>
<td>td2</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
</tr>
</table>
3. 合并单元格
也称为表格的跨行跨列
两个属性:
-
rowspan
设置单元格所跨的行数,如rowspan=2,表示跨越2行
-
colspan
设置单元格所跨的列数,如 colspan=4,表示跨越4列
步骤:
- 在跨越的单元格中设置rowspan/colspan属性
- 将被跨越的单元格删除
注: 必须要保证每行的实际列数是相同的, 否则表格可能会出现错乱
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1px" width="500px" height="300px" align="center" bordercolor="#f00" bgcolor="#ffe4c4"
background="image/like.jpg" cellspacing="0px" cellpadding="0px">
<tr align="center" bgcolor="#ffe4c4">
<td>HTML</td>
<td>HTML</td>
<td>HTML</td>
<td>HTML</td>
</tr>
<tr valign="top">
<td>HTML</td>
<td valign="bottom">HTML</td>
<td>HTML</td>
<td>HTML</td>
</tr>
<tr>
<td>HTML</td>
<td>HTML</td>
<td>HTML</td>
<td>HTML</td>
</tr>
<tr>
<td>HTML</td>
<td colspan="3">HTML</td>
</tr>
</table>
</body>
</html>
4. 高级标签
-
caption标签,表格的标题
-
thead标签,表格的头部 table head
-
tbody标签,表格的主体 table body(浏览器会自动为表格添加tbody)
-
tfoot标签,表格的脚部 table foot
-
th标签,表格的头部标题 table head title,一般用在thead中,设置列的标题,替代td标签,与td的区别在于:加粗和居中对齐
注:使用thead、tbody、tfoot标签来划分表格结构的好处:
可以同时修改一部分表格的样式
比如设置tbody里面的字体全部居中显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" width="500px" height="200px" align="center">
<caption><h2>学生信息表</h2></caption>
<thead>
<tr>
<th width="20%">编号</th>
<th width="20%">姓名</th>
<th width="20%">年龄</th>
<th width="20%">性别</th>
<th width="20%">爱好</th>
</tr>
</thead>
<tbody align="center" bgcolor="#ccc">
<tr>
<td>1001</td>
<td>张三</td>
<td>td3</td>
<td>td4</td>
<td>td5</td>
</tr>
<tr>
<td>1002</td>
<td>李四</td>
<td>td3</td>
<td>td4</td>
<td>td5</td>
</tr>
<tr>
<td>1003</td>
<td>王五</td>
<td>td3</td>
<td>td4</td>
<td>td5</td>
</tr>
<tr>
<td>1004</td>
<td>赵六</td>
<td>td3</td>
<td>td4</td>
<td>td5</td>
</tr>
<tr>
<td>1005</td>
<td>乔七</td>
<td>td3</td>
<td>td4</td>
<td>td5</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总人数:</td>
<td colspan="4">6</td>
</tr>
</tfoot>
</table>
</body>
</html>
六、表单
1. 简介
表单是一个包含若干表单元素的区域,用于获取不同类型的用户信息
表单元素是允许用户在表单中输入信息的元素,如:文本框、密码框、单选按钮、复选框、下拉列表、按钮等
2. 基本结构
2.1 表单语法
<form action="表单提交的地址" method="表单提交的方式" enctype="数据传输的方式">
多个表单元素
</form>
2.2 form标签
用来定义表单,可以包含多个表单元素
常用属性:
-
action 提交数据给谁处理,默认为当前页面
-
method提交数据的方式,取值:get (默认值)、post
get和post的区别:
- get: 以查询字符串形式提交、地址栏能看到、长度有限制、不安全
- post: 以表单数据组形式提交、地址栏中看不到、长度无限制、安全(较常用)
-
enctype 数据传输的方式,默认为application/xwwwformurlencoded,上传文件时要改为multipart/form data
3. 普通表单元素
大多数表单元素都是使用input标签,通过type属性设置表单元素的类型
<input type="表单元素类型">
表单元素类型 | 含义 | 说明 |
---|---|---|
text | 单行文本框 | 省略不时写默认就是text |
password | 密码框 | 输入时以点号显示,安全 |
radio | 单选按钮 | 只能选择其中的一个 |
checkbox | 复选框 | 可以同时选择多个 |
submit | 提交按钮 | 提交表单数据 |
reset | 重置按钮 | 重置表单元素的初始值 |
image | 图像按钮 | 可以使用图片作为按钮,也具有提交的功能 |
button | 普通按钮 | 默认无功能 |
file | 文件选择器 | 选择要上传的文件 |
hidden | 隐藏域 | 在页面上不显示,但会提交,可以用来存储数据 |
3.1 单行文本框
常用属性:
-
name 名称,很重要,如果没有name,则该表单元素的数据不会被提交
-
value 初始值
-
placeholder
-
size 宽度
-
maxlength 最大字符数,默认没有限制
-
readonly 只读,readonly=“readonly”,可简写为readonly,即只写属性名
-
disabled 禁用,完全不能用
注:readonly和disabled区别:readonly的数据会提交,而disabled的数据不会提交
表单元素被提交的两个条件:1.有name属性 2.非disabled
3.2 单选按钮
常用属性:
- name 名称,多个radio的name属性值必须相同,才能实现单选(互斥)
- value 值
- checked 默认是否选中,两种状态:选中、未选中
3.3 复选框
常用属性和radio类似
3.4 文件选择器
常用属性:
-
name 名称
-
accept 设置可选的文件类型,用来限制上传的文件类型
使用MIME格式字符串对资源类型进行限制
常用MIME类型:
纯文本:text/html、text/css、text/javascript、text/xml、text/plain
图像:image/jpeg、image/png、image/gif
注:可以通过类似
image/*
来匹配所有图像文件
4. 特殊表单元素
表单元素 | 含义 | 说明 |
---|---|---|
select | 下拉列表 | |
option | 下拉列表的选项 | |
textarea | 文本域/多行文本框 | 用来创建多行文本框 |
4.1 下拉列表
select常用属性:
- name 名称
option常用属性:
-
value 选项值
-
selected 设置默认选中项
4.2 文本域
textarea常用属性:
- name 名称
- rows 行数
- cols 宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>用户注册</h2>
<form action="" method="post" enctype="application/x-www-form-urlencoded">
编号: <input type="text" name="id" value="1" readonly> <br>
用户名:<input type="text" name="username" placeholder="请输入用户名"> <br>
手机号:<input type="text" name="phone" size="10px" maxlength="11"> <br>
密码: <input type="password" name="password"> <br>
性别: <input type="radio" name="sex" value="man" checked>男
<input type="radio" name="sex" value="woman">女 <br>
爱好: <input type="checkbox" name="hobby" value="eat" checked>吃饭
<input type="checkbox" name="hobby" value="sleep">睡觉
<input type="checkbox" name="hobby" value="play">打豆豆 <br>
头像: <input type="file" name="header" accept="image/png"> <br>
学历: <select name="degree">
<option value="0" selected>--请选择学历--</option>
<option value="1">大专</option>
<option value="2">本科</option>
<option value="3">研究生</option>
<option value="4">博士</option>
</select>
<br>
简介: <textarea name="introduction" cols="30" rows="10"></textarea> <br>
<input type="hidden" name="_id" value="3"> <br>
<input type="submit" value="注 册">
<input type="reset" value="重 置">
<input type="image" src="image/like.jpg" height="20px">
<input type="button" value="普通按钮">
</form>
</body>
</html>
七、内嵌框架
1. 简介
使用iframe可以在一个页面中引用另一个页面,实现复用,灵活
2. 基本用法
语法:
<iframe src="" width="" height=""></iframe>
常用属性:
- src 引用的页面
- width/height 宽度/高度,像素或百分比
- frameborder 是否显示边框,取值:0、1(默认)
- scrolling 是否显示滚动条,取值:yes、no、auto(默认)
- name 为框架定义名称
3. 在框架中打开链接
<iframe name="content"></iframe>
<a href="" target="content"></a>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<iframe src="top.html" frameborder="0" height="130px" width="800px" name="nav"></iframe>
<div style="height: 400px; width: 800px; background: #ccc">
页面的主体部分 <br>
<a href="test01.html" target="nav">打开test01页面</a>
</div>
<div>
底部的版权部分
</div>
</body>
</html>
八、多媒体标签
1. audio标签
在页面中插入音频,不同浏览器对音频格式的支持不一样
audio标签常用属性:
- src 音频文件的来源
- autoplay 是否自动播放,默认不自动播放
- controls 是否显示控制面板,默认不显示
- loop 是否循环播放
注:不一定所有的浏览器都支持该标签或属性,比如Chrome就不支持autoplay属性
可以通过网址:<www.caniuse.com>去具体查看浏览器对标签的支持情况
2. video标签
在页面中插入视频,不同浏览器对视频格式的支持不一样
用法与audio标签基本相同,增加属性:
- width/height 视频播放器的尺寸
- poster 在视频加载前显示的图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<audio src="audio/water.mp3" autoplay controls loop></audio>
<hr>
<video src="video/cloud.mp4" autoplay controls width="500px" poster="image/like.jpg"></video>
</body>
</html>