HTML基础

最新推荐文章于 2022-03-21 21:00:59 发布

MOSIMIN

最新推荐文章于 2022-03-21 21:00:59 发布

阅读量950

点赞数

分类专栏： Web前端开发基础文章标签： HTML基础

本文链接：https://blog.csdn.net/mosimin_980920_/article/details/94647772

版权

Web前端开发基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.什么是HTML
HTML全称是Hyper Text Markup Language（超文本标记语言），它是网页的标准语言。HTML并不是一门编程语言，而是一门描述性的标记语言。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

2.语法

<标签符>内容</标签符>

3.学习HTML究竟要学些什么
用一句简单的话来说就是记住各种标签，以便搭建网页的“骨架”。标签有很多种，如文字标签、图片标签、表单标签等。针对你想显示的东西不同，使用的标签也会不同

4.开发工具——HBuilder 适用于完全没有基础的初学者
下载网址：添加链接描述（点击即可下载）

关于HBuilder的使用说明：

对于站点、文件、HTML页面等的命名，一定不要使用中文，而应该使用英文。
可以在上方的工具栏中，依次选择“帮助”->“HBuilder入门”，查看详细的使用教程

#正文部分#

一、基本标签

1.HTML结构

文档声明：< !DOCTYPE html >是一个文档声明，表示这是一个HTML页面
HTML标签：告诉浏览器这个页面是从< html >开始，然后到< /html >结束
head标签：< head > < /head >是网页的“头部”，用于定义一些特殊的内容，如页面标题、定时刷新、外部文件等。

body标签：< body> < /body>是网页的“身体”。对于一个网页来说，大部分代码都是在这个标签对内部编写的。

<!DOCTYPE html>	//文档声明
<html>	//HTML文档的开始
	<head>	//页头
		<title>这是网页的标题</title>
	</head>
	<body>	//页身
		<p>这是网页的内容</p>
	</body>
</html>

2.head标签（只有特殊标签才放在head标签内）
head标签的子标签（6个）：

title标签——定义网页的标题
- meta标签——定义页面的特殊信息，例如页面关键字、页面描述等。用来告诉搜索引擎这个页面是干嘛的 meta标签的两个重要的属性：name&http-equiv
  - name属性：最常用的属性值——keywords&description
  - http-equiv属性
    ①定义网页所使用的编码: < meta charset=“utf-8”>
    ②定义网页自动刷新跳转 < meta http-equiv=“refresh” content=“6;url=http://www.baidu.com”/> 这段代码表示当前页面在6秒后会自动跳转到百度这个页面
- link标签——用于引入外部样式文件（CSS文件）
- style标签——用于定义元素的CSS样式，在CSS中会详细介绍。
- script标签——用于定义页面的JavaScript代码，在JavaScript部分中会详细介绍
- base标签——没有意义，可以直接忽略的标签

3.body标签（大部分代码&标签都在body标签内部）

<html>
	<head>
		<meta charset="utf-8"/>
		<title>body标签</title>	
	</head>
	<body>
		<h3>静夜思</h3>
		<p>床前明月光，疑是地上霜</p>
		<p>举头望明月，低头思故乡</p>
	</body>
</html>

4.HTML注释：< !-- 注释内容 – >

二、文本

1.页面组成元素

文字
图片
超链接
音频和视频
静态页面和动态页面的区别在于：是否与服务器进行数据交互

2.HTML文本

标题标签——共有六个级别的标题标签：h1~h6。一个页面一般只能有一个h1标签（就像作文题目），而h2 ~ h6标签可以有多个
段落标签：< p > 段落内容 < /p >，自动换行，段落间距，给文字分段
换行标签：< br/ >，自闭合标签
文本标签：粗体、斜体、上标、下标、中划线、下划线、大字号、小字号
粗体标签：strong、b。 < strong >要加粗的内容< /strong >
斜体标签：i、em、cite。 < em >要斜体的内容< /em>
上标标签：< sup >< /sup >
下标标签：< sub >< /sub>
中划线标签：< s >< /s >（几乎不会用到，一般用CSS来实现此功能）
下划线标签：< u >< /u >（几乎不会用到，一般用CSS来实现此功能）
大字号标签：< big >< /big > 同上
小字号标签：< small >< /small > 同上
水平线标签：< hr / >，自闭合标签
div（分区）标签——用来划分HTML结构：< div >< /div >
自闭合标签：只有开始符号而没有结束符号，不可以在内部插入标签或代码。如 < meta />、< link />、< br />、< hr />、< img />、< input />
块元素和行内元素
块元素：独占一行，排斥其他元素（包括块元素和行内元素）与其位于同一行。块元素内部可以容纳其他块元素和行内元素。如h3、p
行内元素：行内元素可以与其他行内元素位于同一行。行内元素内部可以容纳其他行内元素，但不可以容纳块元素。如strong、em
特殊符号：空格——& nbsp;

三、列表

列表是网页中最常用的一种数据排列方式

1. 有序列表：列表项之间有先后顺序之分，一般采用数字或字母作为顺序，默认是采用数字顺序。
语法

< ol >
 		< li >列表项< /li >
 		< li >列表项< /li >
 		< li >列表项< /li >
 < /ol >

注意：ol 标签和 li 标签是配合一起使用的，不可以单独使用

type属性 ：使用type属性来改变列表项符号。< ol type = “属性值” >

2. 无序列表：列表项没有顺序，默认情况下，列表项符号是●
语法

< ul >
 		< li >列表项< /li >
 		< li >列表项< /li >
 		< li >列表项< /li >
 < /ul >

注意：ul的子元素只能是li，不能是其他元素。文本不能直接放在ul元素内

无序列表比有序列表更为实用

3. 定义列表——定义列表由两部分组成：名词和描述
语法

< dl >
		< dt >名词< /dt >
 		< dd >描述< /dd >
 			...
< /dl >

在实际开发中，定义列表使用较少

HTML语义化
HTML的精髓就在于标签的语义，切不可用一个标签来代替另一个标签实现相同的效果。div和span是无语义的标签

四、表格

1.基本结构
一个表格一般会由以下三个部分组成

表格：table标签
行：tr标签
单元格：td标签
语法

 < table >
		 < tr >
				< td >单元格1< /td >
				< td >单元格2< /td >
		 < /tr >
		 < tr >
				< td >单元格3< /td >
				< td >单元格4< /td >
		 < /tr >
 < /table >

在表格中，有多少组 < tr >< /tr >，就表示有多少行。默认情况下，表格是没有边框的

2.完整结构
一个完整的表格包含：table、caption（标题）、tr、th（表头单元格）、td
说明：一个表格只能有一个标题，标题都是位于整个表格内的第一行
th&td的区别：th标签中的内容会以“粗体”和“居中”来显示，而td标签不会。
th标签用于表头，而td标签用于表行

< table >
		< caption >表格标题< /caption >
		 < tr >
				< th >表头单元格1< /td >
				< th >表头单元格2< /td >
		 < /tr >
		 < tr >
				< td >表行单元格1< /td >
				< td >表行单元格2< /td >
		 < /tr >
 < /table >

3.语义化
为了对表格进行语义化，HTML引入thead、tbody和tfoot这三个标签，把表格划分为表头、表身、表脚（往往用于统计数据，少用）

< table >
		< caption >表格标题< /caption >
		<!--表头-->
		< thead >
			 < tr >
					< th >表头单元格1< /td >
					< th >表头单元格2< /td >
			 < /tr >
		 < /thead >
		 <!--表身-->
		< tbody >
			 < tr >
					< td >表行单元格1< /td >
					< td >表行单元格2< /td >
			 < /tr >
		 < /tbody >
		 <!--表脚-->
		 < tfoot >
		 	 < tr >
					< td >标准单元格3< /td >
					< td >标准单元格4< /td >
			 < /tr >
		 < /tfoot >
 < /table >

4.合并行&合并列——rowspan&colspan
合并行:rowspan 将纵向的N个单元格合并

< td rowspan = "跨越的行数">< /td >

合并列：colspan 将横向的N个单元格合并

< td colspan = "跨越的列数">< /td >

五、图片

1.图片标签的三个属性

< img src="" alt="" title="" />

src属性——用于指定图片所在的路径（相对路径&绝对路径）
任何一个图片必须指定src属性才可以显示，src属性是img标签必不可少的属性

< img src="图片路径" />

alt属性——当图片无法显示时，页面会显示alt中的文字，给搜索引擎看的
title属性——当鼠标指针移动到图片上是，会显示title中的文字，给用户看的
在实际开发中，对于img标签，src和alt这两个是必选属性，一定要添加；而title是可选属性，可加可不加。

2.图片路径
绝对路径——指的是图片在你的电脑中的完整路径
所有页面引用图片的绝对路径都是一样的
相对路径——指的是图片相对当前页面的位置
在实际开发中，经常使用的相对路径，几乎不会用绝对路径

3.图片格式
位图（像素图）：图片放大或缩小后，图片会失真
位图常见格式有三种：.jpg、.png 和 .gif
.jpg适合存储色彩丰富而高质量的图片
.png适合存储体积小且支持透明的图片
.gif图片效果最差，适合制作动画
矢量图（向量图）：无论图片放大、缩小或旋转都不会失真
矢量图常见格式有：.ai、.cdf、.fh、.swf。其中.swf格式比较常见，在网页中，很少用到矢量图，除非是一些字体图标

六、超链接

1、什么是超链接？
超链接的英文名是hyperlink，它能够让浏览者在各个独立的页面之间方便地跳转。每个网站都是由众多的网页组成，网页之间通常都是通过链接方式相互关联的。超链接的范围很广，可以将文档中的任何文字及任意位置的图片设置为超链接。超链接有外部链接、内部链接、电子邮件链接、锚点链接、空连接、脚本链接等。

2、a标签
语法

< a href="链接地址" >文本或图片< /a >

href表示你想要跳转到那个页面的路径（也就是地址），可以是相对路径，也可以是绝对路径

< a href="http://www.baidu.com" >百度一下，你就知道< /a >

3、target属性——定义超链接打开窗口的方式

< a href="链接地址"  target=“”打开方式“”>< /a >

常用的属性值：_blank，表示在新窗口打开链接

4、内部链接——指向的是“自身网站的页面”，使用的都是相对路径
以下代码展示的三个页面都位于同一个网站根目录下

	page1.html:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href="page2.html" target="_blank">跳转到页面2</a><br/>
		<a href="test/page3.html" target="_blank">跳转到页面3</a>
	</body>
</html>
	page2.html:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>页面2</title>
	</head>
	<body>
		<h1>这是页面2</h1>
	</body>
</html>
	page3.html:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>页面3</title>
	</head>
	<body>
		<h1>这是页面3</h1>
	</body>
</html>

5、锚点链接（内部链接的一种）：点击某一个超链接，然后它就会调到“当前页面”的某一部分。适用于页面内容比较多的情况下
想要实现锚点链接，需要定义两个：

目标元素的id。
a标签的href属性指向该ID。

七、表单

表单是我们接触动态页面的第一步。其中表单最重要的作用就是：在浏览器端收集用户的信息，然后将数据提交给服务器来处理。

1、从外观上来划分，表单可以分为以下八种：

单行文本框
密码文本框
单选框
复选框
按钮
文件上传
多行文本框
下拉列表
表单标签有五种：form、input、textarea、select 和 option

2、form标签——把所有表单标签放在form标签内部
语法

< form >
	//各种表单标签
< /form >

form标签属性：

name属性——表单名称，用于区别页面中的不同表单
method属性——提交方式，用于指定表单数据使用哪一种http提交方式。取值有两个：get&post，get安全性较差，所以通常使用的是post
action属性——提交地址，用于指定表单数据提交到哪一个地址进行处理
target属性——打开方式，用来指定窗口的打开方式，只用到_blank这一个属性值
enctype属性——编码方式，用于指定表单数据提交的编码方式，一般情况下不需要设置

3、input标签（自闭合标签）
在HTML中，大多数表单都是使用input标签来实现的。
语法

< input type="表单类型" />

input标签的type属性取值：

text——单行文本框
password——密码文本框
radio——单选框
checkbox——多选框
button/submit/reset——按钮
file——文件上传

表单类型的不同都是由type属性值的不同决定的。

4、单行文本框——使用input标签的type属性取值为text来实现，常见于注册登录功能例如：

< form method="post" >
	姓名: < input type="text" />
< /form >

单行文本框属性：

value——设置文本框的默认值，也就是默认情况下文本框显示的文字，如果没有设置，就是空白
size——设置文本框的长度，默认情况下不限制长度（一般不会用到这个属性，而是使用CSS来控制）
maxlength——设置文本框中最多可以输入的字符数

5、密码文本框（一种特殊的单行文本框）——区别在于：在密码文本框中输入的字符不可见，而在单行文本框中输入的字符可见
密码文本框与单行文本框在外观上是一样的，它拥有和单行文本框一样的属性

< form method="post" >
	账号：< input type="text" /><br />
	密码：< input type="password" />
< /form >

密码文本框仅仅使周围的人看不见你输入的内容是什么，实际上它并不能保证数据的安全。为了保证数据安全，我们需要在浏览器与服务器之间建立一个安全连接（后端技术）

6、单选框——对于一组按钮，只能选中其中一项，而不能同时选中两项
语法

< input type="radio" name="组名" value=“取值” />

name属性和value属性必须要设置，但不显示在浏览器效果上
如果想要在默认情况下让它选中某个单选框，在该单选框中使用checked属性来实现。下面例子默认情况下选中第一个单选框

<form method="post">
		性别：
		<input type="radio" name="gender" value="男" checked/>男
		<input type="radio" name="gender" value="女" />女
</form>

单选框常见的忽略点：

没有加上name属性——预览效果没有变化，但会出现可以同时选多个选项的情况
同一组单选框中name属性取值不一样——结果同上
因此在实际开发中，对于同一组单选框，必须要设置一个相同的name，这样才会把这些选项归为同一个组上面

7、复选框——单选框只能选择一项，而复选框可以选择多项
语法

< input type="checkbox" name="组名" value=“取值” />

复选框在语法和属性上和单选框几乎一样，唯一不同的是type属性取值。
根据type属性值来识别到底是单选框还是复选框

<form method="post">
			你喜欢的水果：<br>
			<input type="checkbox" name="fruit" value="苹果" checked/>苹果
			<input type="checkbox" name="fruit" value="香蕉"/>香蕉
			<input type="checkbox" name="fruit" value="西瓜" checked/>西瓜
			<input type="checkbox" name="fruit" value="李子"/>李子
</form>

8、按钮
常见的按钮有三种：普通按钮button、提交按钮submit、重置按钮reset

普通按钮button——普通按钮一般情况下都是配合JavaScript来进行各种操作的
语法 < input type="button value="取值" /> value取值就是按钮上的文字
提交按钮submit——提交按钮一般用来给服务器提交数据（特殊功能的普通按钮）
语法< input type="submit" value="取值" /> value取值就是按钮上的文字
提交按钮与普通按钮在外观上是没有什么不同的，两者的区别在于功能。

< form method="post" >
	账号：< input type="text" /><br />
	密码：< input type="password" />< br />
	< input type="submit" value="提交" />
< /form >

重置按钮reset——重置按钮一般用来清除用户在表单中输入的内容（特殊功能的普通按钮）
语法 < input type="reset" value="取值" /> value取值就是按钮上的文字

< form method="post" >
	账号：< input type="text" /><br />
	密码：< input type="password" />< br />
	< input type="submit" value="提交" />
	< input type="reset" value="重置" />
< /form > 
昵称：<input type="text" name="" />

说明：重置按钮只能清除“当前所在form标签”内的表单元素内容，对当前所在form标签之外的表单元素无效，因此“昵称”文本框里面的内容不会清除

9、bottom标签
我们要知道，普通按钮、提交按钮以及重置按钮这三种按钮都是使用input标签来实现的。其实还有一种按钮是使用bottom标签来实现的，不过在实际开发中，基本不会用到button标签，可以直接舍弃
语法< button >< /button >

10、文件上传——使用input标签的type属性值为file来实现
语法 < input type="file" />
当使用文件域file时，必须在form的标签中说明编码方式“ enctype=“multipart/form-data”。这样，服务器才能接收到正确的信息。

11、多行文本框——使用的是textarea标签，而不是input标签
语法

< textarea rows="行数" cols="列数" value=“”取值“”>默认内容< /textarea >

说明：
在该语法中，不能使用value属性来建立一个在文本域中显示的初始值，这一点跟单行文本框不一样。
对于多行文本框的默认文字内容，你可以设置，也可以不设置。

 <form method="post">
        个人简介：<br />
        <textarea rows="5" cols="20">请介绍一下你自己</textarea>
 </form>

分析
对于文本框，我们有以下两点总结：
HTML有三种文本框：单行文本框、密码文本框、多行文本框。
单行文本框和密码文本框使用的都是input标签，多行文本框使用的是textarea标签

12、下拉列表
下拉列表由select和option这两个标签配合使用来表示的。这一点与无序列表很像，无序列表是由ul和li这两个标签配合使用来表示。
语法

< select >
	< option>选项内容< /option >
	....
	< option>选项内容< /option >
< /select >

下拉列表是一种最节省页面空间的方式，因为它在默认情况下只显示一个选项，只有点击后才会看到全部选项

<form method="post">
			<select>
				<option>HTML</option>
				<option>CSS</option>
				<option>JavaScript</option>
			</select>
		</form>

select标签属性——multiple & size
multiple属性——设置下拉列表可以选择多项（没有属性值，和checked一样）
默认情况下，下拉列表只能选择一项，我们可以通过multiple属性设置下拉列表可以选择多项。使用“Ctrl+鼠标左键”来选取
size——设置下拉列表显示几个列表项，取值为整数

option属性标签——selected & value
selected属性表示列表项是否被选中，它是没有属性值的

八、框架

iframe标签
使用iframe标签来实现一个内嵌框架。内嵌框架，就是在当前页面再嵌入另外一个页面，也可以同时嵌入多个页面
语法

< iframe src="链接地址" width="数值" height="数值">< /iframe >

src是必选的，用于定义链接页面的地址，width和height这两个属性是可选的

<body>
	<iframe src="http://www.lvyestudy.com" width="200" height="150"></iframe>
	<iframe src="http://sina.com" width="200" height="150"></iframe>
</body>

MOSIMIN

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML基础

1.什么是HTMLHTML全称是Hyper Text Markup Language（超文本标记语言），它是网页的标准语言。HTML并不是一门编程语言，而是一门描述性的标记语言。2.语法<标签符>内容</标签符>*3.学习HTML究竟要学些什么用一句简单的话来说就是记住各种标签，以便搭建网页的“骨架”。标签有很多种，如文字标签、图片标签、表单标签等。针对你想显...
复制链接

扫一扫