113 HTML5

一、引言

1.1HTML 概念

  • 网页,是网站中的一个页面,通常来说网页是构成网站的基本元素,是承载各种网站应用的平台。
  • 通俗的说,网站就是甶网页组成的。
  • 通常我们看到的网页都是以htm或html后缀结尾的文件,俗称HTML文件。

二、HTML简介

2.1什么是HTML

  • HTML全称:Hyper Text Markup Language(超文本标记语言)
    • 超文本:页面内可以包含图片、链接,甚至音乐、程序等非文字元素
    • 标记:标签,不同的标签实现不同的功能
    • 语言:人与计算机的交互工具

2.2 HTML能做什么

  • HTML使用标记标签来描述网页,展示信息给用户

2.3 HTML书写规范

  • HTML标签(多数)是以尖括号包围的关键字
  • HTML标签通常是成对出现的,有开始就有结束
  • HTML通常都有属性,格式:属性=‘属性值’ (多个属性之间空格隔开)
  • HTML标签不区分大小写,建议全小写

三、HTML基本标签

3.1结构标签

<html>:根标签
	<head>:网页头标签
		<title></title> :页面的标题 
    </head>
	<body></body>:网页正文 
</html>
属性名代码描述
text< body text="#f00"></ body>设置网页正文中所有文字的颜色
bgcolor< body bgcolor="#00f"></ body>设置网页的背景色
background< body background=“1.png”></ body>设置网页的背景图
  • 颜色的表示方式:
    • 第一种方式:用表示颜色的英文单词,例,red green blue
    • 第二种方式:用16进制表示颜色,例,#000000 #325687 #377405

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>demo1</title>
	</head>
	<body text="red" bgcolor="#0f0" background="picture/logo.png">  ## RedGreenBlue      
		hello world!
	</body>
</html>

3.2排版标签

可用于实现简单的页面布局
注释标签:<!-- 注释 -->
换行标签:<br>
段落标签:<p>文本文字</p>
	特点:段与段之间有空行
	属性:align对齐方式(left、center、right)

水平线标签:<hr/>
	属性:
		width:水平线的长度(两种:第一种:像素表示; 第二种,百分比表示) 
		size:水平线的粗细(像素表示,例如:10px)
		color:水平线的颜色
		align:水平线的对齐方式

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>demo2排版标签</title>
	</head>
	<body>
		<!--换行--><br><!--段落-->
		<p>段落1</p>	
		<p align="center">段落2</p>
		<p align="right">段落3</p>
		
		<!--水平线-->
        <hr width="50%" align="left" color="#f00" size="7"/>
	</body>
</html>

3.3块标签

  • 使用 CSS + DIV 是现下流行的一种布局方式
标签代码描述
div< div> </ div>行级块标签,独占一行,换行
span< span></ span>行内块标签,所有内容都在同一行

3.4基本文字标签

  • < font></ font> 标签处理网页中文字的显示方式
属性名代码描述
size< font size=“7”></ font>用于设置字体的大小,最小1号,最大7号
color< font color="#f00"></ font>用于设置字体的颜色
face< font face='宋体"></ font>用于设置字体的样式

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>demo3块标签  基本文字标签</title>
	</head>
	<body>
		<div>div标签1 div标签1 <font size="5" color="red"> div标签1</font> div标签1 div标签1 div标签1</div>
		<div>div标签2</div>
		<div>div标签3</div>
		<span>span标签1</span>
		<span>span标签2 登录</span>
		<span>span标签3</span>
	</body>
</html>

3.5文本格式化标签

  • 使用标签 实现标签的样式处理
标签代码描述
b< b></ b>粗体标签
strong< strong></ strong>加粗
em< em></ em>强调字体
i< i></ i>斜体
small< small></ small>小号字体
big< big></ big>大号字体
sub< sub></ sub>上标标签
sup< sup></ sup>下标标签
del< del></ del>删除线

3.6标题标签

  • 随着数字增大文字逐渐变小,字体是加粗的,内置字号,默认占据一行
标签代码描述
h1< h1></ h1>一号标题,最大字号
h2< h2></ h2>二号标题
h3< h3></ h3>三号标题
h4< h4></ h4>四号标题
h5< h5></ h5>五号标题
h6< h6></ h6>六号标题,最小字号

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>demo4 文本格式化标签 标题标签 </title>
	</head>
	<body>
		<b>粗体标签  </b> <strong>粗体标签  </strong>
		<br/>  
		<i>斜体 </i> <em>斜体 </em>
		<br/>  
		<small> 小号字体   </small>    <big>大号字体</big>
		<br/>  
		 5m <sup>2</sup>上标标签     H<sub> 2</sub>O下标标签  
	    <br/>  
     	<del>删除线  </del>
	    <br/>  
	     
        <h1>1</h1>  
		<h2>2</h2>
		<h3>3</h3>
		<h4>4</h4>
		<h5>5</h5>
		<h6>6</h6>
		
	</body>
</html>

3.7列表标签(清单标签)

  • 无序列表:使用一组无序的符号定义,< ul></ ul>
<ul type="circle">
    <li></li>
</ul>
属性值描述用法举例
circle空心圆< ul type=“circle”>< /ul>
disc实心圆< ul type=“disc”>< /ul>
square黑色方块< ul type=“square”></ ul>
  • 有序列表:使用一组有序的符号定义,< ol></ ol>
<ol type="a" start="1">
    <li></li>
</ol>
属性值描述用法举例
1数字类型< ol type=“1”></ ol>
A大写字母类型< ol type=“A”></ ol>
a小写字母类型< ol type=“a”></ ol>
  • 列表嵌套:无序列表与有序列表相互嵌套使用

代码举例:

<ul type="circle">
			<li>无序1 </li>
			<li>无序2 </li>
			<li>
				<ol type="A" start="3">
					<li>有序1</li>
					<li>有序2</li>
					<li>有序3</li>
				</ol> 
			</li>
</ul>

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>demo5 列表标签(清单标签)</title>
	</head>
	<body>
		无序列表<br />
		<ul type="circle">
			<li>无序1 </li>
			<li>无序2 </li>
		</ul>
		
		
		有序列表<br />
		<ol type="A" start="3">
			<li>有序1</li>
			<li>有序2</li>
			<li>有序3</li>
		</ol>
		
		
		嵌套列表
		<ul type="circle">
			<li>无序1 </li>
			<li>无序2 </li>
			<li>
				<ol type="A" start="3">
					<li>有序1</li>
					<li>有序2</li>
					<li>有序3</li>
				</ol> 
			</li>
		</ul>
	</body>
</html>

3.8图形标签

  • 在页面指定位置处中引入一幅图片,< img/>
属性名描述
src引入图片的地址
width图片的宽度
height图片的高度
border图片的边框
align与图片对齐显示方式
alt提示信息
hspace在图片左右设定空白
vspace在图片的上下设定空白

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>demo6 图形标签</title>
	</head>
	<body>
		<p align="center">
		前一行<br />	
		前面的文字<img src="picture/logo.png" width="300" align="middle" border="10" vspace="50" hspace="50"/>后面的文字<br/>

		
		后一行<br />
		</p>
	</body>
</html>

3.9链接标签

  • 在页面中使用链接标签跳转到另一页面

  • 标签:< a href=" ">< /a>

  • 属性:href:跳转页面的地址(跳转到外网需要添加协议)

  • 设置跳转页面时的页面打开方式,target属性:

    • _blank在新窗口中打开
    • _self在原窗口中打开
  • 指向同一页面中指定位置(锚点)

  • 使用方式:

    • 定义位置:< a name= "名称“>< /a>
    • 指向:< a href= ”#名称" >< /a>

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>demo7 链接标签</title>
	</head>
	<body>
		首页
		<a name="top"><font size="4" color="red">顶部</font></a><br />
		<a href="demo6.html" target="_blank">跳转到另一个页面</a>
		<br /><br /><br /><br /><br /><br /><br />
		<br /><br /><br /><br /><br /><br /><br />
		<br /><br /><br /><br /><br /><br /><br />
		<br /><br /><br /><br /><br /><br /><br />
		<br /><br /><br /><br /><br /><br />
		<br /><br /><br /><br /><br /><br /><br />
		<br /><br /><br /><br /><br /><br /><br /><br />
		<a href="#top">回到顶部</a>
		
	</body>
</html>

3.10表格标签

  • 普通表格(tabletr,td)
<table>
	<tr>
		<td></td>
	</tr>
</table>
  • 表格的列标签(th):内容有加粗和居中效果
<table>
	<tr>
		<th></th>
	</tr>
</table>
  • 表格的列合并属性(colspan):在同一行内同时合并多个列
<table>
	<tr>
		<td colspan=""></td>
	</tr>
</table>
  • 表格的行合并属性(rowspan):在同一列跨多行合并
<table>
	<tr >
		<td rowspan=""></td>
	</tr>
</table>

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>demo8 表格标签</title>
	</head>
	<body>
		<!--
        	作者:1903202403@qq.com
        	时间:2020-08-01
        	描述:表格
        -->
		<table border="1" width="400" height="200">
			<!--行-->
			<tr >
				<!-- 列 -->
				<td rowspan="2">周一</td>
				<td>周二</td>
				<td>周三</td>
			</tr>
			<!--行-->
			<tr>
				<!-- 列 -->
				<td colspan="2"></td>
			</tr>
		</table>
	</body>
</html>

四、HTML表单标签

  • html表单用于收集不同类型的用户输入数据

4.1 form元素常用属性

  • action表示动作,值为服务器的地址,把表单的数据提交到该地址上处理
  • method:请求方式:get 和post
  • post
    • 地址栏,请求参数都在地址后拼接path?name=n张三"&password="123456n
    • 不安全
    • 效率高
    • get请求大小有限制,不同浏览器有不同,但是大约是2KB;—般情况用于查询数据
  • post:
    • 地址栏:请求参数单独处理。
    • 安全可靠些
    • 效率低
    • post请求大小理论上无限;一般用于插入删除修改等操作
  • enctype:表示是表单提交的类型
    • 默认值:application/x-www-form-urlencoded 普通表单
    • multipart/form-data多部分表单(一般用于文件上传)

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>demo9 表单</title>
	</head>
	<body>
		<!--表单基本属性 : action  method  enctype-->
		<form action="demo8.html" method="get">
			用户名:<input type="text" name="uname" /><br>&nbsp;&nbsp;&nbsp;码:<input type="password" name="upass"><br>
			<Input type="submit" value="提交">
		</form>
		
	</body>
</html>

4.2 input元素

  • 作为表单中的重要元素,可根据不同type值呈现为不同状态
属性值描述代码
text单行文本框< input type=" text"></ input>
password密码框< input type="password "></ input>
redio单选按钮< input type="redio "></ input>
checkbox复选框< input type="checkbox "></ input>
date日期框< input type="date "></ input>
time时间框< input type="time "></ input>
datetime日期和时间框< input type="datetime "></ input>
email电子邮件输入< input type="email "></ input>
number数值输入< input type=“number”></ input>
file文件上传< input type=" file"></ input>
hidden隐藏域< input type="hidden "></ input>
range取值范围< input type=" range"></ input>
color取色按钮< input type="color "></ input>
submit表单提交按钮< input type="submit "></ input>
button普通按钮< input type="button "></ input>
reset重置按钮< input type="reset "></ input>

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>demo10 input元素</title>
	</head>
	<body>
		<form action="success.html" method="get">
			用户名:<input type="text" value="zhangsa" name=""><br>
			密码:<input type="password" name=""><br>
			单选:<input type="radio" name="sexy"><input type="radio" name="sexy"><br>
			多选:<input type="checkbox" name=""><input type="checkbox" name=""><input type="checkbox" name=""><br>
			生日:<input type="date" name=""><br>
			薪资:<input type="number" name=""><br>
			电话:<input type="tel" name=""><br>
			照片:<input type="file" name=""><br>
			喜欢的颜色:<input type="color" name=""><br>
			年龄范围:<input type="range" name=""><br>
			隐藏域:<input type="hidden" name=""><br>
			<hr>
			表单提交:<input type="submit" name=""><br>
			数据重置:<input type="reset" name=""><br>
			图片提交按钮:<input type="image" src="" name=""><br>
			普通按钮:<input type="button" value="普通" name="">
		</form>
	</body>
</html>

4.3select元素(下拉列表)

  • 单选下拉列表:< select>< /select>

  • 默认选中属性:selected=“selected”

<select>
    <option selected="selected"></option>
    ...
     <option ></option>
</select>
  • 多选下拉列表属性:< select></ select>

  • 多选列表:multiple = “multiple”

<select multiple = "multiple">
    <option ></option>
    ...
     <option ></option>
</select>

4.4 textarea元素(文本域)

  • 多行文本框:< textarea cols= “列” rows=“行”>< /textarea>

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>demo12 select, textarea元素</title>
	</head>
	<body>
		<form action="success.html" method="get">
			学历:
			<select name="edu">
				<option value="1">研究生</option>
				<option value="2">本科</option>
				<option value="3">大专</option>
				<option value="4" selected="selected">高职</option>
			</select>
			<br>
			爱好:
			<select name="hobby" multiple="multiple" size="2">
				<option value="1">编程</option>
				<option value="2">游戏</option>
				<option value="3">抖音</option>
				<option value="4">快手</option>
			</select><br>
			<textarea name="tt" cols="10" rows="5">....</textarea>
			<input type="submit">
		</form>
	</body>
</html>

五、HTML框架标签

  • 通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都独立于其他的 框架。

  • 使用框架的缺点:

    • 开发人员必须同时跟踪更多的HTML文档
    • 很难打印整张页面

5.1框架结构标签frameset

  • 框架结构标签(< frameset></ frarneset>)用于定义如何将窗口分割为框架

  • 每个frameset定义了一系列行或列

  • rows/columns的值规定了每行或每列占据屏幕的面积

    • < frameset rows=""></ frameset>
    • < frameset cols="">< /frameset>

5.2框架标签frame

  • 每个frame引入一个htm顷面
<frameset cols= ’*,*">
 	<frame src="info1.html"/>
    <frame src="info2.html"/>          
</frameset>

5.3基本的注意事项

  • 不能将< body>< /body>标签与< frameset>< /frameset>标签同时使用

  • 假如一个框架有可见边框,用户可以拖动边框来改变它的大小。为了避免这种情况发生,可以在< frame>标签中加入: noresize=“noresize”

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>demo13 框架集</title>
	</head>
	
	<frameset cols="*,*,*">
		<frame src="demo1.html" />
		<frame src="demo2.html" noresize="noresize" />
		<frameset rows="10%,*">
			<frame src="demo3.html" />
			<frame src="demo4.html" />
		</frameset>
	</frameset>
</html>

六、HTML的其它标签和特殊字符

6.1其他标签

<meta http-equiv="keywords" content="keyword1f, keyword2,keyword3"> 
<!--该网页的描述-->
<meta http-equiv="description" content="this is my page">

<!--该网页的编码-->
<meta http-equiv = "content-type" content= "text/html; charset=UTF-8"> 

<!-- href:引入css文件的地址-->
<link rel="stylesheet" type="text/css" href="./styles.css">

<!--src: js的文件地址-->
<script type= "text/javascript" src="" ></script>

6.2特殊字符

占位符:空格

&nbsp;
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页