1、什么是HTML
HTML全称:Hyper Text Markup Language(超文本标记语言)
- 超文本:页面内可以包含图片、链接,甚至音乐、程序等非文字元素
- 标记:标签,不同的标签实现不同的功能
- 语言:人与计算机的交互工具
1.1 书写规范
- HTML标签是以尖括号包围的关键字
- HTML标签通常是成对出现的,有开始就有结束
- HTML通常都有属性,格式:属性=‘属性值’(多个属性之间空格隔开)
- HTML标签不区分大小写,建议全小写
结构标签:
<head>:网页头标签 <title></title>:页面的标题 </head> <body></body>:网页正文 </html> ```
1.3 标签类型
html是根标签
head是头部标签
title为页面标题标签
boby为内容标签
h1~h6为标题标签,数字越大,字号越小
p为段落标签, 是空格,br是换行标签
img是图片标签,属性有:src为图片文件路径,width是图片宽度,height是图片高度
a是超链接标签,属性有:href为链接路径,可以写文件路径,也可以写网址,如果需要访问外部服务器,需要加上https或者http
name属性为定位属性
href属性值为#表示为返回顶部,属性值为#name表示定位到指定的name属性值的标签块级标签(自带换行符号) h1~h6
行级标签(不自带换行符号) img,a
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2007班</title>
<!--
html是根标签
head是头部标签
title为页面标题标签
boby为内容标签
h1~h6为标题标签,数字越大,字号越小
p为段落标签, 是空格,br是换行标签
img是图片标签,属性有:src为图片文件路径,width是图片宽度,height是图片高度
a是超链接标签,属性有:href为链接路径,可以写文件路径,也可以写网址,如果需要访问外部服务器,需要加上https或者http
name属性为定位属性
href属性值为#表示为返回顶部,属性值为#name表示定位到指定的name属性值的标签
块级标签(自带换行符号) h1~h6
行级标签(不自带换行符号) img,a
-->
</head>
<body>
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
<p>
年底了,春运要来了,
然而,满心欢喜的打工人
正在憧憬回家过年景象的时候
网上却流传出
“2021年春运取消”的消息!
“第一步,
学校12月15号前全部分批放假。
第二步,
12月25号前,无订单工厂、在建工地放假。
第三步,
2021年1月20号前,无特殊岗位一律放假……”
消息一出,不少网友急了
纷纷询问:是真的吗?
</p>
<a name="GPS" href="http://www.baidu.com">定位的地方</a><br>
<a href="https://baike.baidu.com/item/%E6%B3%A2%E5%A4%9A%E9%87%8E%E7%BB%93%E8%A1%A3/1505010?fr=aladdin">
<img src="img/bls.jpg" height="100px">
</a>
<p>
东涌镇面积92平方公里,辖22个行政村和2个社区,常住人口约190245人(2017年)。 [1]
</p>
<p>
东涌镇先后荣获全国重点镇 [2] 、全国文明镇 [3] 、国家卫生镇 [4] 、全国宜居小镇 [5] 、
广东省教育强镇 [6] 、第三批全国发展改革试点城镇 [7] 、广州市特色名镇 [8]
等荣誉称号 [1] ,2014年,东涌镇实现地区工业总产值约301.5亿元,同比增长3.3% [9] 。
</p>
<p>
<img src="img/bls.jpg" height="100px"><br>
<img src="img/bls.jpg" height="100px"><br>
<img src="img/bls.jpg" height="100px"><br>
</p>
<a href="img/index.html">跳转</a>
<a href="#GPS">调到定位的地方</a>
<a href="#">回到最顶部</a>
</body>
</html>
1.4 form表单常用属性
- action表示动作,值为服务器的地址,把表单的数据提交到该地址上处理
- method:请求方式:get 和post
- get:
- 地址栏,请求参数都在地址后拼接 path?name=“张三”&password=“123456”
- 不安全
- 效率高
- get请求大小有限制,不同浏览器有不同,但是大约是2KB;一般情况用于查询数据
- post:
- 地址栏:请求参数单独处理。
- 安全可靠些
- 效率低
- post请求大小理论上无限;一般用于插入删除修改等操作
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
form:表单
action:属性值为提交请求的地址
input: type="text"为文本框,value为默认值
type="password"为加密文本框,value为默认值
type="submit"为提交按钮,value值为提交按钮的展示文字
type="reset"为重置按钮
type="button"为无功能按钮
type="radio"为单选按钮,多个单选按钮必须name属性值相同
checked="checked"为默认选中状态
type="checkbox"为多选按钮
checked="checked"
select:代表下拉框
option:为下拉框的选项
selected="selected"为默认选中状态
form表单的内容以name=value的形式进行数据提交
-->
</head>
<body>
<form action="https://www.baidu.com">
<input type="hidden" name="hidden" value="1">
用户名:<input type="text" name="username" value="1"><br/>
密码:<input type="password" name="password" value="2"><br/>
性别:男<input type="radio" name="sex" value="man" checked="checked">
女<input type="radio" name="sex" value="women">
不详<input type="radio" name="sex" value="?"><br/>
爱好:
左手<input type="checkbox" name="hobbies" value="left">
右手<input type="checkbox" name="hobbies" value="right" checked="checked">
球<input type="checkbox" name="hobbies" value="ball"><br/>
出生月:<select name="month">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4" selected="selected">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select><br/>
<input type="submit" value="注册">
<input type="reset">
<input type="button" value="空白">
</form>
</body>
</html>
1.5 HTML框架标签
框架集:
- frameset:rows和cols为其中的属性:cols为列,rows为行
- frame:src属性为展示的html页面的链接地址,noresize为固定区域属性
- 与body冲突,使用框架集不允许存在body
代码示例:
a.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
桂林电子科技大学(Guilin University Of Electronic Technology),简称“桂电”,坐落在桂林市,
由工业和信息化部、国家国防科技工业局与广西壮族自治区人民政府共建,入选“卓越工程师教育培养计划”、
新工科研究与实践项目、中西部高校基础能力建设工程重点建设高校、首批高等学校科技成果转化和技术转移
基地、国家大学生创新性实验计划、全国深化创新创业教育改革示范高校、国家大学生文化素质教育基地、国
家级特色专业建设点、国家地方联合工程研究中心、广西一流学科建设高校,有国家大学科技园,具有自主招
生资格,是总装备部通信装备预研项目定向发布高校之一和北斗ICD授权的高校之一。 [1-11]
学校始建于1960年,1980年经国务院批准成立桂林电子工业学院,2006年更名为桂林电子科技大学。学校先
后隶属于第四机械工业部、电子工业部、机械电子工业部、中国电子工业总公司、信息产业部。2000年管理体
制转为中央与地方共建、以地方管理为主。。 [3] [12]
截至2018年9月,学校有金鸡岭校区、六合路校区、花江校区、北海校区,校园总面积4153亩;设有19个教学
学院;有博士后科研流动站3个,一级学科博士点4个,一级学科硕士点18个,硕士专业学位授权类别7个,本科
专业76个;有教职工2900余人,全日制在校学生40600余人。 [12-13]
</body>
</html>
b.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="../img/guidian.jpg">
</body>
</html>
framset.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
框架集:
frameset:row和cols为其中的属性
row为行,cols为列
frameset:src属性为展示的html页面的链接地址,noresize为固定区域属性
与body冲突,使用框架集不允许body存在
-->
</head>
<frameset rows="30%,50%">
<frame src="a.html" noresize="noresize">
<frame src="b.html">
</frameset>
</html>
效果图: