关于学习html的一点总结

时间 2020-11-30

标签 css html web 浏览器服务器工具布局 post 网站编码栏目 HTML 繁體版

原文原文链接

web标准

web标准的构成css

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

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

HTML的语法规范

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

例：—>开始标签web

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

2.标签关系浏览器

双标签关系能够分为两类：包含关系和并列关系服务器

包含关系工具

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

并列关系布局

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

2.HTML基本结构标签

2第一个HTML的网页

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

<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	名称	用于指定表单的名称，以区分同一个页面中的多个表单域

4.12.2 表单控件《input》《select》《textarea》

《input/》<--单标签输入表单元素，《input type=”属性值“/》
《select》下拉表单元素
《textarea》文本域元素

4.12.3 提示信息元素定义标签《label》标签

《label》能够绑定一个表单元素，当点击《label》标签内的文本时，浏览器会自动聚焦到相对应的表单元素上

《label for=“sex”》男《/label》

《input type=”radio“ name=”sex“ id=”sex“/》

这个for的属性值和id的要同样

4. 13 扩展内容（块元素和行内元素）

4.13.1 块元素

块元素会排斥别的元素和他位于同一行，通常状况下，块元素内部能够容纳其余块元素和行内元素。

块元素	说明
h1~h6	标题元素
p	段落元素
div	div元素
hr	水平线
ol	有序列表
ul	无序列表

4.13.2 行内元素

行内元素只能够容纳其余行内元素，不能够容纳其余元素

行内元素	说明
stong	粗体元素
em	斜体元素
a	超连接
span	经常使用行内元素，结合css定义样式

关于学习html的一点总结

web标准

HTML的语法规范

2.HTML基本结构标签

2第一个HTML的网页

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

3.1<！DOCTYPE>标签

3.2 lang 语言种类

3.3 字符集

4.HTML经常使用标签

4 .1标签语义

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

-

. <body> <h1> 我是一级标题 </h1> </body> 是单词head的缩写 标签语义：做为标题使用，而且依据重要性递减。（一级比二级重要） 特色： 1.加了标题的文字会变得加粗，字号会依次变小 2.一个标题独占一行

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

4.3.1 分段标签 p

4.3.2 换行标签 br/

4.4 文本格式化标签

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

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

4.6.1 图像标签的注意点

4.7路径（重点）

4.7.1相对路径

4.7.2 绝对路径

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

4.8.1 连接的语法格式

4.8.2 连接分类

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

4.10表格标签《table》

4.10.1 表格主要做用

4.10.2表格基本用法

4.10.3 表头单元格标签

4.10.4表格属性

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

4.10.6 合并单元格《colspan和rowspan》

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

4.12表单标签

4.12.1表单域《form》

4.12.2 表单控件《input》《select》《textarea》

4.12.3 提示信息元素定义标签 《label》标签

4. 13 扩展内容（块元素和行内元素）

4.13.1 块元素

4.13.2 行内元素

.

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

是单词head的缩写

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

特色：

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

2.一个标题独占一行

4.12.3 提示信息元素定义标签《label》标签