最近在学习前端开发，故将学习中的一些笔记分享供大家一起学习，也便于后期的查找复习。

web的三大标准构成

1、结构–对网页元素进行整理和分类，即html
2、表现–用于设置页面元素的板式、颜色、大小等外观样式，即css
3、行为–指网页模型的定义以及交互的编写

对于html

网页是由网页元素组成的，这些元素利用html标签描述出来再通过浏览器解析从而展示给用户

html超文本语言两层含义

可以加入图片、声音、动画、多媒体等内容（**超越文本限制 **）
可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（**超级链接文本 **）

html基本骨架

<html>   
    <head>     
        <title></title>
    </head>
    <body>
    </body>
</html>

其中html是最大标签，head是文档头部（其中的title是网页上方显示的标题），而body是主体内容（以后大多数东西都放入其中）；
此外，script可放于head（需调用才执行的脚本或事件触发执行的脚本）以及body（当页面被加载时立即执行的脚本）中；

html元素分类

1、常规元素

<标签名> 内容 </标签名>

其有开始标签以及结束标签，结束标签比开始标签多一个‘/‘

2、空元素

<标签名 />

其只有单标签，如
这些

基本html解析

<!-- 告诉浏览器文档使用哪种html规范（html5规范） -->
<!DOCTYPE html>
<html>
	<head>
		<!-- 让 html 文件是以 UTF-8 （最常用的字符集编码方式）编码保存的， 浏览器根据编码去解码对应的html内容 -->
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

此外还可能会有<html lang="en">其是用于html语言种类，这里指定为英文

此外参照上面格式，嵌套的标签应该缩进一个tab

html常用标签

1、排版标签

1.1标题标签

<h1>   标题文本   </h1>
<h2>   标题文本   </h2>
<h3>   标题文本   </h3>
<h4>   标题文本   </h4>
<h5>   标题文本   </h5>
<h6>   标题文本   </h6>

从1到6字体依次增大

1.2段落标签

<p>  文本内容  </p>

其会另起一段

1.3水平线标签

<hr/>

其会在相应位置显示一条水平线，一般用于分隔作用，如下所示：

1.4换行标签

<br/>

1.5div以及span标签（重点）

<div> </div>    
<span></span>

这两个标签没有语义，注意区别的是div一行只能有一个（即其会自动换行），而span在一行中可以有多个

2、文本格式化标签

在这里插入图片描述

3、标签属性

<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
<img src="test1.jpg" width="500" height="500"  title="测试图像" /><br />

具体见css部分

4、图像标签

<img src="图像URL" />

其他属性见w3c官方

5、链接标签

<a href="目标地址" target="目标窗口的弹出方式">现实的文本或图像</a>

其中target有_self和_blank两种属性，self是默认而blank是在新窗口中打开；
测试时一般将地址写为#作为空链接（点击时上面地址会跳转但实际页面不变）

6、关于路径

搞清楚相对路径的根目录、同级、上一级等即可
*最后注意：相对路径是/，而绝对路径是*

7、锚点定位

<h1 id="xxx">ccc</h1>
<a href=“#xxx”>点我快速跳到到ccc处</a>

则点击a标签后会快速跳到ccc处

8、base标签

base标签写在head中，通常用于设置a标签的跳转方式，如<base target="_blank" />则该htm所有跳转都是打开新窗口；该标签中也可为所有a指定跳转地址但一般少用

9、预格式化文本标签

<pre>内容</pre>

其内容中的空格以及换行都会被保留但少用该标签

10、特殊字符

在html中很多符号如<>会被识别成标签符号，所以若想使用这些符号必须按照特殊字符的规定进行书写，具体如下表所示：
在这里插入图片描述
都是以&开头以及;结尾

来源：CSDN

作者：黄家琛

链接：https://blog.csdn.net/weixin_44427572/article/details/104511966

标签

前端入门

前端开发

前端

html语言

html文件

前端入门系列--HTML（1）