HTML学习笔记

最新推荐文章于 2024-08-11 09:28:46 发布

weixin_50035628

最新推荐文章于 2024-08-11 09:28:46 发布

阅读量183

点赞数

分类专栏：学习笔记文章标签： html

本文链接：https://blog.csdn.net/weixin_50035628/article/details/114648164

版权

学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML学习笔记(一)

1、web标准
2、HTML语法规范
3、HTML基本结构标签
4、DOCTYPE和lang以及字符集的作用
5、标题标签
6、段落标签和换行标签
7、文本格式化标签
8、div和span标签
9、图像标签和路径
10、超链接标签

一、web标准

		web 标准是由W3C组织和其他标准化组织指定的一系列标准的集合，W3C（万维网联盟）是国际最著名的标准化组织。
		1.1、为什么需要web标准
		（1）、遵循web标准可以使不同开发人员写出的页面更加标准，更加统一。【简单来说就是可以用不同的浏览器打开相同的网页】
		（2）、内容能被更多的设备访问。
		（3）、让web的发展前景更广阔。
		（4）、更容易被搜索引擎搜索。
		（5）、是网站更易于维护。
		（6）、提高页面浏览速度。
		1.2、web标准的构成
		 主要包括结构（Struture）、表现（Presentation）和行为(Behavior)三个方面。

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

Web标准提出的最佳体验方案：结构、样式、行为相分离。

简单来说：结构写到HTML文件中，表现写到CSS文件中，行为写到javascript文件中。
贴一张容易理解的图图片截取至PINK老师前端基础HTML+CSS教程视频中

二、HTML语法规范

	1.1基本语法概述
	1.HTML标签是由尖括号包围的关键词，例如**<html>**.
	2.HTML标签通常是成对出现的，例如<html>和</html>,我们成为双标签，第一个是开始标签，第二个是结束标签。
	3.有些特殊的标签必须是单个标签（很少情况），例如<br />,我们称为单标签。
	1.2标签的关系
	双标签关系可以分为两类：包含关系和并列关系。
	例如：
	**包含关系**

<head>
	<title></title>
</head>

并列关系

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

三、HTML基本结构标签

	每一个=网页都会有一个基本结构标签（也称为骨架标签），页面内容也是在这些标签中书写。
	HTML页面也称为HTML文档。
	1、第一个HTML页面

<html>
	<head>
		<title>我的第一个页面</title>
	</head>
	<body>
		键盘敲烂，工资过万。
	</body>
</html>

标签释义：
图片截取至PINK老师前端基础HTML+CSS教程视频中
HTML文档的后缀名必须是.html或.htm,浏览器的作用是读取html文档，并以网页的形式显示它们。
我们可以用浏览器打开我们写的HTML文件。

四、DOCTYPE和lang以及字符集的作用

	1.文档类型声明标签
	<!DOCTYPE > 文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。

<!DOCTYPE html>

这句代码的意思是：当前页面采取的是HTML5版本来显示网页
注意：
（1）.声明位于文档中最前面的位置，处于标签之前
（2）.不是一个html标签，他就是文档类型声明标签
2.lang 语言种类
用来定义当前文档显示的语言
（1）.en定义语言为英语
（2）.zh-CN定义语言为中文
简单来说定义为en就是英文网页，定义为zh-CN就是中文网页。
其实对于文档现实来说，定义为en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文。
这个属性对浏览器和搜索引擎（例如：百度、谷歌等）还是有用的
3.字符集
图片截取至PINK老师前端基础HTML+CSS教程视频

五、标题标签

标题标签一共有6种，分别是<h1>——<h6>
特点：
1、作为标题使用，并且从1至6标题字号依次减小
2、加了标题的文字会变的加粗
3、一个标题独占一行
根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更加清晰

六、段落标签和换行标签

1、段落标签

<p>我是段落标签</p>
<p>我可以把文本分为若干个段落</p>

示例图片截取至PINK老师前端基础HTML+CSS教程视频
效果

特点：
（1）、文本在一个段落中会根据浏览器窗口的大小进行自动换行
（2）、段落和段落之间留有空隙
2、换行标签

<br />

这是一个<br />换行<br />标签

效果图：
在这里插入图片描述
特点：
（1）、一个单标签
（2）、只是简单的开始新的一行，跟段落标签不一样，段落之间会插入一些垂直的间距

七、文本格式化标签

在网页中，有时需要为文字设置粗体、斜体、下划线等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。
文本格式化标签语义：突出重要性，比普通文字更重要。
在这里插入图片描述

八、div和span标签

这一对标签相当于一个盒子，里面可以装内容。

<div>这是一个大盒子，一行只能有一个，且独占一行</div>123
<div>这是一个大盒子，一行只能有一个。</div>123
<span>这是一个小盒子，</span> 
<span>一行上可以有很多个</span>

效果图
在这里插入图片描述

九、图像标签

1、图像标签

<img>标签用于定义HTML页面中的图像
<img src="图像URL">

单词image的缩写，意为图像。
2、图像标签的属性
在这里插入图片描述
注意：

图像标签可以有很多个属性，必须写在标签名的后面。
属性之间不分先后顺序，标签名与属性，属性与属性之间均以空格隔开
3、图像路径
路径分为：相对路径和绝对路径
（1）、路径之相对路径

（2）、路径之绝对路径
绝对路径：是指目录下的绝对位置，直接到达目标位置，一般是从盘符开始的，另一种是一个完整的网络地址，通常是该图片的网址

十、超链接标签

1、链接的语法形式

<a href="跳转目标" target="目标弹出方式">文本或图像</a>

单词anchor的缩写，意为：“锚”。
两个属性的作用如下：

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

2、链接分类
在这里插入图片描述
2.2、锚点链接
（1）、在链接文本的href属性中，设置属性值为#名字的形式。
例如：