HTML知识点复习

什么是HTML

英文全称Hyper Text Markup Language,
中文全称为超文本标记语言。
超文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。(来自百度百科)

如何创建网页

推荐大家使用的前端工具:
 VSCode
 Hbuilder
 Sublime_text

创建网页之前,新建一个名为Code的文件夹,用于存放HTML代码文件,在Code文件夹下新建如下几个基本的文件夹:

 css    存放css文件
 image  存放图像资源文件
 js    存放JavaScript脚本文件
 music  存放音频资源文件
 video   存放视频资源文件

在这里插入图片描述

打开Sublime_text,此时会默认生成一个空的未定义名称的文件untitled。

在这里插入图片描述

此时按下快捷键Ctrl+S保存(MacOS下为command+s),弹出保存对话框,将网页名称更改为想要的网页名字加后缀.html,然后把创建好的.html文件保存在刚刚创建的Code文件夹内。

在这里插入图片描述

使用快捷键!+TAB(英文感叹号)即可自动生成HTML文档模版。

在这里插入图片描述

HTML文档结构

<!DOCTYPE html>  	
<html lang="en"> 	 
<head>
	<meta charset="UTF-8">  
	<title>标题</title>  
</head>
<body>
	正文
</body>
</html>
<!DOCTYPE html>

定义了文档类型为html,是一种MIME类型
MIME类型:所有的文件在网络上无论用于显示还是用于下载,都存在自己响应的类型。例如gif、jpeg都存在自己的MIME类型, 用于给文档做一些自己的相关标识。

<html lang="en">

lang属性规定了元素内容的语言。

<head>
</head>

head元素包含了所有的头部标签元素。在head元素中可以插入JavaScript脚本、CSS样式表。

<meta charset="UTF-8">

meta元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。标签位于文档的头部,不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。

charset为编码字符集,UTF-8为编码格式。部分页面会出现乱码问题,这是字符集不统一导致的。我们在国内打开的浏览器的默认的编码格式都是GBK,需要把原有的GBK的格式修改成全球统一的格式UTF-8。

<meta charset=“UTF-8”>的作用是把字符集设置为UTF-8,防止可能出现的乱码问题。

<title>

可定义文章的标题。

<body>
</body>

包含文档的所有内容,网页的主题就写在这里。

HTML属性

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现

<p name="p1"></p>

其中p标签中的name就是给p标签的name属性,值为p1。

基本常用标签

基本常用标签----标题<hn></hn>

表示的是网页或文章标题,n=1-6,字体从大到小,默认加粗。

<h1>我是标题</h1>
<h2>我是标题</h2>
.
.
.
<h6>我是标题</h6>

基本常用标签----标尺线<hr>

划出一条标尺线。

<hr>

基本常用标签----段落<p></p>

划分段落,p标签结束处自动换行。

<p>
	我是段落内容
</p>

基本常用标签----区域划分<div></div>

使用div标签可以把文档划分为不同的部分,以便可以给不同的区域使用不同的样式。

<div id="div1">
	<p>区域1</p>
</div>
<div id="div2">
	<p>区域2</p>
</div>

基本常用标签----超链接<a></a>

定义超链接,用于从一张页面链接到另一张页面(页面跳转)。
最重要的属性:
  href  指示链接的目标

HTML的页面跳转方式:
  使用a标签跳转,属于GET请求方式
  form表单GET请求
  form表单POST请求

使用方式1:外链接,进行外部跳转,href属性值为需要跳转到的页面地址。

<a href="http://www.baidu.com">百度</a>

使用方式2::锚点,进行页面的内部跳转,添加id属性,href属性值为#+需要跳转到的a标签的id属性值。

<a href="#anchor">点我跳转</a>
<a id="anchor"></a>

基本常用标签----图像<img>

用于在页面引入图片,它有两个必须属性:
  src  引用图像的路径
  alt   图像无法显示时的替代文本

<img src="./image/sky.jpg" alt="天空"/>

关于HTML图像的位图

<img>的位图属性:
  usemap  属性将图像定义为客户端图像映射

该属性需要与<map>标签和<area>标签搭配使用,属性值为#+位图map的id值。

<map>
定义一个图像映射。常用属性:
  id     唯一的名称
  name  唯一的名称

<area>
定义图像映射中的区域,总是嵌套在<map>标签中。必须属性:
  alt  图像无法显示时的替换文本
常用属性:
  coords    定义可点击的坐标
  href    此区域跳转的目标地址
  shape   定义可点击区域的形状

<img src="./image/sky.jpg" alt="天空" usemap="#first"/>
	<map id="first" name="first">
		<area 
	 		shape="circle"
	 		coords="230,280,50"
	 		href="http://www.baidu.com/">
	 	</area>
	</map>

基本常用标签----表格<table></table>

表格布局,生成一个表格,拥有三个子标签:
<tr></tr>   表示表行
<td></td>    表示表元(单元格)
<th></th>    表示表头(默认加粗)

<table id="nav">
	<tr>
		<td>Phones</td>
		<td\>Mi Pad</td>
		<td>Mi TV</td>
		<td>Mi Band</td>
		<td>Mi PowerBank</td>
		<td>Headphones</td>
		<td>Store</td>
	</tr>
</table>

基本常用标签----视频<video>和音频<audio>

<video>可以为页面添加视频资源。
<audio>可以为页面添加音频资源。
基本属性:
  src     引入的资源的路径
  controls  显示控制器

<video src="./video/陈奕迅 - 浮夸 2014MAMA.mp4" controls="controls">
</video>

<audio src="./music/陈奕迅 - 浮城.mp3" controls="controls">
</audio>

列表

一般指一个项目的列表,HTML中的列表分为无序列表<ul>、有序列表<ol>、定义列表<dl>三种。
无序列表和有序列表的共同子标签都为<li>,表示列表项。

列表----无序列表<ul>

无序列表项目默认使用粗体圆点(典型的小黑圆圈)进行标记。
无序列表<ul>用于定义一个无序列表,应用场景有导航、侧边栏、商品栏等。

<ul>
	 <li>无人之境</li>
	 <li>与我常在</li>
	 <li>七百年后</li>
	 <li>黄金时代</li>
</ul>

列表----有序列表<ol>

有序列表项目使用数字进行标记,有排序方式。有序列表<ol>用于定义一个无序列表,应用场景有微博热搜等。

<ol>
	 <li>黑暗中漫舞</li>
	 <li>天使的礼物</li>
	 <li>遗失的国度</li>
	 <li>不来也不去</li>
</ol>

列表----定义列表<dl>

自定义列表<dl>不仅仅是一列项目,而是项目及其注释的组合,拥有两个子标签:
  <dt>  定义的项目
  <dd>  定义项目的描述

<dl>
	<dt></dt>
		<dd>陈奕迅的歌</dd>
	<dt>沙龙</dt>
		<dd>陈奕迅的歌</dd>
	<dt>黑择明</dt>
		<dd>陈奕迅的歌</dd>
	<dt>告别娑婆</dt>
		<dd>陈奕迅的歌</dd>
</dl>

多窗口框架

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

多窗口框架----框架<frameset>

用于定义多窗口框架,与子标签<frame>搭配使用,里面的每一个窗口都是一个frame。
<frameset>不能和标签<body>连用。

<frameset rows="10%,80%,10%">
  <frame src="1.html" name="header" />
  <frameset cols="10%,90%">
  	<frame name="menu" />
  	<frame name="center" />
  </frameset>
  <frame name="footer" />
</frameset>

关于多窗口框架的页面间跳转

<frame>标签的name属性设置一个值,在<a>标签的属性target中设置等同的值,通过<a>标签即可实现页面页面间跳转。

<frameset rows="10%,80%,10%">
  <frame src="1.html" name="header" />
  <frameset cols="10%,90%">
  	<frame name="menu" />
  	<frame name="center" />
  </frameset>
  <frame name="footer" />
</frameset>
<body>
	<a href="B.html" target="menu">A</a>
</body>

关于HTML中颜色的表示方式

1.以函数的方式表示
 rgb(255,255,255)
 取值范围是0-255。

2.以十六进制的方式去表示
 #000000-#FFFFFF。

3.使用颜色的英文单词,如pink orange yellow black  white gold等。

关于绝对路径和相对路径

绝对路径:是从盘符开始的路径,如:
C:\windows\system32\cmd.exe

相对路径:是从当前路径开始的路径,
./ 表示当前位置,
. ./ 表示当前位置的上一级,如:
…/windows/system32/cmd.exe

表单

表单用于搜集用户数据,在登陆、注册等需要提交的场景都需要用到表单。

表单----表单<form></form>

用于为用户输入创建 HTML 表单,其中有两个基本属性:
 action  规定表单的提交路径(跳转的方式)
 method  规定表单提交的方式

<form action="../1.html" method="post">
	用户名:<input type="text">
</form>

关于HTML的请求方法

有7种请求方法,其中最常用的是GET和POST。
GET
POST
 PUT
 HEAD
 DELETE
 PATCH
 OPTIONS

关于POST和GET之间的区别

表单提交时,什么情况下是GET请求,什么情况下是POST请求?
表单提交时,默认情况是GET请求,当method属性值为post时为POST请求。

GET请求和POST请求有什么区别?
POST请求提交时路径上没有属性的信息,相对安全;
GET请求提交路径上存在属性的信息,不安全;
GET请求在路径的地址上存在属性值,url的地址是有限制的,最大为64kb。

什么时候使用这两种请求:
要根据数据性质,如果是热数据、安全度不重要的数据则使用get和post都可以;
如果数据的性质需要安全性比较高时,一定要使用post请求;
在写文件上传的功能时,请求必须是post的提交方式。

表单----输入<input>

用于搜集用户信息,根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

<form action="1.html" method="post">
	请输入用户名:<input type="text">
</form>

表单----文本text

把<input>的属性type的值设置为text,显示一个输入文本框。

<form action="1.html" method="post">
	请输入用户名:<input type="text"/>
</form>

表单----密码password

把<input>的属性type的值设置为password,显示一个输入文本密码框。

<form action="1.html" method="post">
	请输入用户名:<input type="password"/>
</form>

表单----多选checkbox

把<input>的属性type的值设置为checkbox,设置一个复选框。多个分为一组的复选框需要在<input>标签中设置一个值相同的name属性。

<form action="1.html" method="post">
	爱好:<br>
	吃饭
	<input type="checkbox" name="hobby"/>
	睡觉
	<input type="checkbox" name="hobby"/>
	游戏
	<input type="checkbox" name="hobby"/>
</form>

表单----单选radio

把<input>的属性type的值设置为radio,设置一个单选框。多个分为一组的单选框需要在<input>标签中设置一个值相同的name属性才会有单选的效果。

<form action="1.html" method="post">
	性别:<br><input type="radio" name="sex"/><input type="radio" name="sex"/>
</form>

表单----提交submit

把<input>的属性type的值设置为submit,定义提交按钮。提交按钮会把表单数据发送到服务器。

<form action="1.html" method="post">
	<input type="submit" value="提交"/>
</fomr>

表单----重置reset

把<input>的属性type的值设置为reset,定义重置按钮。重置按钮会清除表单中的所有数据。

<form action="1.html" method="post">
	<input type="reset" value="重置"/>
</fomr>

表单----文件上传file

把<input>的属性type的值设置为file,用于文件上传。

<form action="1.html" method="post">
	<input type="file"/>
</fomr>

表单----下拉选择框<select></select>

用于建立下拉选择框,需与<option>搭配使用。

<form action="1.html" method="post">
	请选择你的城市:
	<select name="city">
		<option>---请选择---</option>
		<option>北京</option>
		<option>广西</option>
		<option>上海</option>
	</select>
	</form>

表单----文本域<textarea></textarea>

用于建立一个可以输入多行文本的文本域,其中常用两个属性:
 cols   规定文本区内的可见宽度。
 rows  规定文本区内的可见行数。

<form action="1.html" method="post">
	更多:
	<textarea rows="5" cols="20" name="more">
		这家伙很懒,什么都没有留下。。。
	</textarea>
</form>

表单综合应用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div align="center" style="border: 2px solid; width:500px;height: 400px;margin: auto;">
		<form action="" method="post">
			<p>用户名:
				<input type="text" name="username"/>
			</p>
			<p>&nbsp;&nbsp;&nbsp;&nbsp;码:
				<input type="password" name="password"/>
			</p>
			<p><input type="radio" name="sex"/><input type="radio" name="sex"/>
			</p>
			<p>
				爱好:&nbsp;&nbsp;
				吃饭
				<input type="checkbox" name="hobby"/>
				睡觉
				<input type="checkbox" name="hobby"/>
				游戏
				<input type="checkbox" name="hobby"/>
			</p>
			<p>
				请选择你的城市:
				<select name="city">
					<option>---请选择---</option>
					<option>北京</option>
					<option>广西</option>
					<option>上海</option>
				</select>
			</p>
			<p>
				更多:
				<textarea rows="5" cols="20" name="more">
					这家伙很懒,什么都没有留下。。。
				</textarea>
			</p>
			<p>
				<input type="submit" value="提交"/>
				<input type="reset" value="重置"/>
			</p>
		</form>
	</div>
</body>
</html>

在这里插入图片描述

  • 49
    点赞
  • 100
    收藏
    觉得还不错? 一键收藏
  • 15
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 15
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值