关于学习html的一点总结

来源：cnblogs　　作者：猪猪侠的哥哥　　时间：2020/11/23 11:56:21　　对本文有异议

web标准

web标准的构成

主要由结构、表现、行为三个方面组成

标准	说明
结构	结构用于对网页元素进行整理和分类，现阶段主要学的是HTML。
表现	表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是css
行为	行为是指网页模型的定义及交互的编写，现阶段主要学的是Javascript

HTML的语法规范

所有的标签都包含在<>中间，并且大部分标签都是成对出现，称为双标签

? 例：—>开始标签

		</html>—>结束标签（有反斜杠）

2.标签关系

双标签关系可以分为两类：包含关系和并列关系

包含关系

<head>       父亲
	<title></title>   儿子
</head>

并列关系

<head> </head>
<body> </body>

2.HTML基本结构标签

2第一个HTML的网页

每个网页都会有都会有一个基本的结构标签（即骨架标签），页面内容也是在这些基本标签上写

<html>
	<head>
		<title>我的第一个页面</title>
	</head>
	<body>
		姜宇，许诺百年好合
	</body>
</html>

标签名	定义	说明
	HTML的标签	页面中最大的标签，我们称为根标签
	文档的头部	注意在head标签中我们必须要设置的标签是title
	文档的标题	让页面拥有一个属于自己的网页标题
	文档的主体	元素包含文档的所有内容，页面内容基本都是放到Body里面

3 . vscode工具生成骨架标签新增代码

3.1<！DOCTYPE>标签

? 必须放到最前面，声明标签、

3.2 lang 语言种类

用来定义当前文档显示的语言

en定义语言为英语
zh-CN定义语言为中文

en就是英文网站，zh—CN为中文网站

3.3 字符集

字符集（Character set）是多个字符的集合

在标签内，可以通过标签的charset属性来规定HTML文档应该使用哪种字符编码。

<meta charset="UTF-8"/>

4.HTML常用标签

4 .1标签语义

根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构清晰

4.2 标题标签《h1》 -《h6》(重要)

HTML提供了6个等级的网页标题，即

-

<body>
<h1> 我是一级标题 </h1>
</body>

是单词head的缩写

标签语义：作为标题使用，并且依据重要性递减。（一级比二级重要）

特点：

1.加了标题的文字会变得加粗，字号会依次变小

2.一个标题独占一行

4.3 段落和换行标签（重要）

4.3.1 分段标签 p

网页中，将文字分段显示，需要用标签

，用于定义段落，可以将整个网页分成若干个段落

<p> 我是一个段落标签 </p>

特点：

文本在一个段落会根据浏览器窗口大小自动换行。
段落与段落之间保有空隙

4.3.2 换行标签 br/

强制换行break缩写，只有这一个单标签

标签语义：强制换行。

特点：

br/ 是个单标签
br/标签只是简单的另起一行，跟段落不一样，段落之间会插入一些垂直的间距

4.4 文本格式化标签

《strong》《/strong》加粗标签
《b》《/b》也是加粗的标签

strong比b语气更加强烈
《em》《/em》或者《i》《/i》是倾斜

em语义更强烈
《del》《/del》或者《s》《/s》是删除线，del语义更强烈
《ins》《/ins》或者《u》《/u》是下划线，ins语义更强烈
《hr/》分割线

4.5《div》和《span》标签（盒子）

两个标签没有语义，仅仅是盒子，装内容（双标签）

特点：

1.div是division的缩写，表示分割、分区。span意为跨度，跨距。

2.《div》标签用来布局，一行只能放一个《div》。大盒子

3.《span》标签用来间隔，小盒子，一行可以很多个

4.6图像标签和路径（重点）img

图像标签

在HTML标签中，《img》标签用于定义HTML页面中的图像。

《img src=“图像URL（这里写的是图片的路径）”/》为单标签

src是《img》标签的必须属性 ，它用于指定图像文件的路径和文件名

所谓属性：就是属于这个图像标签的特性

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图片不能显示的文字
title	文本	提示文本，鼠标放到图像上，显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

4.6.1 图像标签的注意点

图像标签有多个属性，必须写在标签名的后面
属性之间不分前后顺序，标签名和属性、属性和属性之间均以空格分开
属性采取形式为，属性=“属性值”

4.7路径（重点）

4.7.1相对路径

相对路径分类	符号	说明
同一级路径		图像文件位于HTML文件同一级，如《img src=“baidu.gif”/》
下一级路径	/	图像文件位于HTML文件下一级，如《img src=“images/baidu.gif”/》
上一级路径	../	图像文件位于HTML文件上一级，如《img src=“../baidu.gif”》

4.7.2 绝对路径

不多说了

4.8 超链接标签《a》（重点）

《a》标签用于定义超链接，作用是从一个网页链接到另一个网页

4.8.1 链接的语法格式

《a href="跳转目标" target=“目标窗口的弹出方式”》文本或图像《/a》

属性	作用
href	用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，他就具有了超链接的功能
target	用于指定链接页面的打开方式，其中 _self为默认值, _blank为新窗口的打开方式

4.8.2 链接分类

外部链接：例如《a href=“http://www.baidu.com”>百度《/a》
内部链接：网站内部网页之间的相互链接，直接连接内部页面名称即可，例如《a href=“index.html”》首页《/a》
空链接：如果当时没有明确链接目标时，《a href=“#”》首页《/a》
下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件。
网页元素的链接：在网页中的各种网页元素，如文本、图像、表格、音频、、视频等都可以添加超链接。

《a href="http:bababa"》<img src="图片文件"/>《/a》

6.锚点链接：点我们的点击链接，可以迅速定位到某个位置。

在链接文本的href属性中，设置属性值为#名字的形式，如《a href=“#two”》第二集《/a》
找到目标位置标签，里面添加一个id属性=刚才的名字，如：《h3 id=“two”》第二季介绍《/h3》

自己总结一点：如果在《a》《/a》之间放的是一段话，直接把那段话打在中间就行

如果是一个图片文件或者其他文件，用相应的标签来引入

4.9HTML中的注释《！----》

注释标签

以《！--》开头，以“--》”结束
快捷键ctrl+/

4.10表格标签《table》

4.10.1 表格主要作用

主要用于展示数据，布局页面

4.10.2表格基本用法

<table>
	<tr>
		<td>单元格内的文字</td>
	</tr>
</table>

《table》是用于定义表格的标签
《tr》标签使用预定义表格中的行，必须嵌套在《table》中
《td》用于定义表格中的单元格（可以认为是列），必须嵌套在《tr》中
字母td指表格数据，即数据单元格的内容

4.10.3 表头单元格标签

位于表格第一行或者第一列，居中加粗显示

《th》《/th》

跟td一个等级

4.10.4表格属性

属性名	属性值	描述
align	left、center、right	规定表格相对周围元素的对齐方式
border	1或“”	规定表格单元是否拥有边框，默认为“”，表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素
cellspacing	像素值	规定单元格之间的空白，默认2像素
width	像素值或百分比	规定表格的宽度

这些属性要写到《table 这里》

4.10.5表格结构标签《thead》《tbody》

《thead》标签表示表格头部区域，《tbody》标签表示表格的主体区域

4.10.6 合并单元格《colspan和rowspan》

例：《td colspan=“几个”》《/td》

跨列合并：colspan=“合并单元格的个数”

跨行合并：rowspan=”合并单元格的个数“

4.11 列表标签《ul》《li》《dl》

分为三大类：无序列表《ul》列表项《li》、有序列表《ol》列表项《li》

自定义列表《dl》

<dl>
	<dt>名词1</dt>
	<dd>小弟</dd>
<dl>

注：列表标签中只能放li（自定义除外），但《li》可以放其他元素

4.12表单标签

包括（表单域、表单控件、提示信息）

4.12.1表单域《form》

《form》标签

<form action="url地址"> methon="提交方式" name="表单域名称">
	各种表单元素控件
</form>

属性	属性值	作用
action	url地址	用于指定接受并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式，其取值为get或post
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域