前端学习vol.1 HTML1

poipoi626

已于 2022-08-11 16:34:19 修改

阅读量157

点赞数

分类专栏：前端学习文章标签：前端学习 html

于 2022-08-11 15:57:15 首次发布

本文链接：https://blog.csdn.net/qq_41260107/article/details/126231756

版权

前端学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

留白

前端学习vol.1 HTML1

HTML

HTML全称HyperText Markup Language，超文本标记语言。

先建立一个新项目

<!DOCTYPE html><!-- 声明这是一个html格式的文档 -->
<html lang="cn"><!-- 整个html文档的的根标签，文档内容都要包含于此标签中 -->
	<head><!-- 头部元素标签，包含整个文档的元数据 -->
		<meta charset="utf-8" /><!-- 元数据之一，用于声明页面的字符集，视点，页面描述等等 -->
		<title>blog</title><!-- 页面的标题 -->
	</head>
	<body><!-- 文档内容，代表整个页面可见的主体部分 -->
		
	</body>
</html>

PS：

首先引入标签和元素的概念。

标签（tag）：

由开始标签和结束标签组成，比如上图中的<html></html>以及<tittle></tittle>等等，前者是开始标签，后者是结束标签，标签中间是元素内容。

元素：

元素由标签和元素内容共同组成，比如上图中的<tittle>blog</tittle>。还有只能用一个标签表示的虚元素，比如<hr />和<br />等等。

介绍部分简单标签构建的元素
1、标题<h1>...</h1> 标题从大到小依次是h1到h6
2、段落<p>...</p>
3、链接<a>...</a> 链接标签内会加上超链接URL地址等元素属性
4、图像<img /> 图像标签内会加上图片地址元素，长宽，alt占位符等属性
5、换行<hr />
6、分割线<br />
7、加粗<strong>...</strong> 斜体<em>...</em> 删除线<del>...<del> 通常这种样式标签比较少用，因为可以完全通过CSS实现
8、用的最多的结构化容器二兄弟<div>...</div>和<span>...</span>，后面会反复使用
等等等等…
样式的标签一般都可以通过CSS来实现，故应注重于标签在结构上的作用。

由此引入元素属性的概念。

元素属性：

部分元素可以通过属性进行配置，只能应用于开始标签或者单个标签（虚元素），不能写在结束标签中。元素属性由属性名和属性值组成。一个元素可以有多个属性，要用空格隔开，属性值要用双引号包括。
以a标签和img标签为例：
<a href="https://www.baidu.com" target="_blank">我是百度</a>
其中属性href的属性值是一个URL地址，表示点击链接后跳转地址；
属性target的属性值blank表示点击链接后会在新标签页中打开链接地址。
另外，a标签还有通过定位id选择器或者name属性实现的锚点功能。

<img src="/.../xxx.jpeg" width="..." height="..." alt="..." tittle="..." />
src属性值可以是网络地址，也可以是项目相对路径或者本地绝对路径；
而width和height一般只设置一个属性，会按比缩放。
alt属性代表图片占位符，填充的属性值会在图片无法加载的时候作为“图片描述”显示出来。
tittle属性代表图片描述，当光标移动至图片上会直接显示一个“图片描述”。

元素关系：

梳理清楚各元素间关系对后续DOM模型有一定帮助，而良好的缩进也是梳理元素关系重要的步骤。一般元素关系有父元素、子元素、后代元素和兄弟元素。贴一段HTML文档来描述。

<!DOCTYPE html>
<html lang="cn">
	<head>
		<meta charset="utf-8" />
		<title>blog</title>
		<link rel="stylesheet" href="css/blog.css" type="text/css">
	</head>
	<body>
		<div id="a"></div>
		<div class="b"></div>
		<div class="c"></div>
		<a href="#a">回到顶部</a>
	</body>
</html>