Web前端——html全面解析笔记

最新推荐文章于 2024-06-20 14:26:49 发布

轮回浮华三千

最新推荐文章于 2024-06-20 14:26:49 发布

阅读量569

点赞数 2

分类专栏： web前端文章标签： html html5

本文链接：https://blog.youkuaiyun.com/lhfhsq/article/details/116036365

版权

本文详细介绍了HTML的基础知识，包括编程环境搭建、文档结构解析、常用标签及特殊符号表示，深入讲解HTML5的视频和音频标签。重点讨论了超链接、表单、图片引入等内容，强调了前端工程师应掌握的技能和Web标准。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

英文单词

HTML：Hyper Text Markup Language——超文本标记语言
DTD：Document Type Definition——文档类型定义
Tag——标签
meta——源
metadata——源数据
src：source——源代码
charset——字符集
UTF-8——国际编码
rows——行
cols——列

一、什么是前端

前端工程师：技术栈HTML+CSS+JAVAScript 基础
Bootstrap jquery vue rect angular.js Node.js
Echars protype ES5 ES6 ajax 等
Mysql oracle redis
Linux centos redhat Nignx
网络协议： Http UDP TCP 等
WebService Websocket
必须要掌握一门应用级语言 Java Python 等
数据结构和算法

二、HTML+CSS+JAVASCRIPT

结构层：html5—XHTML HTML4.0版本超文本标记语言
表现层：css3.0 -css2.0版本层叠样式表
行为层：javascript 脚本语言用于定义整个网站的行为
W3C -----万维网联盟定义一系列的标准 ----Web标准
符合HTTP协议面向连接符合Web通信的标准

我们所有的web项目都要尊崇W3C所提供的标准和HTTP协议。
W3Cschool地址：https://www.w3school.com.cn/html/index.asp

三、超文本标记语言HTML

3.1编程环境搭建

如无特殊说明，则均在C盘之外的盘和英文输入法下操作。
推荐大家使用的前端工具Vscode，hbuilder，sublime_text 等等，笔者使用sublime_text操作。

安装Sublime Text软件，新建一个web文件夹，web文件夹中新建code文件夹，code文件夹中新建5个文件夹分别为css，js，image，music，video。
打开Sublime Text软件ctrl+n新建，ctrl+s保存在code文件夹下，文件后缀名为html。（例如1.html）
输入!+Tab自动生成模板

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	
	<body>
		
	</body>
</html>

或者<+h+Enter自动生成模板，需要手动删除第一行<符号和添加缺失的模板代码（强烈不建议使用）

<<!DOCTYPE html>
<html>
	<head>
		<title></title>
	</head>
	
	<body>

	</body>
</html>

3.2文档结构解析

<!--  -->为注释语句，可以跨行

<!DOCTYPE html>
<!--
	HTML5的声明
	!DOCTYPE规定浏览器文档使用哪种html或者xhtml类型（规范），类似于说明书的功能
	html为MIME类型
-->
<html lang="en">
<!--language=“en”，en——English表示英语，cn或zh表示中文-->
	<head>
		<meta charset="UTF-8">
		<!--meta——源，charset——字符集，UTF-8——国际编码，包含全球所有语言-->
		<title>Document</title>
		<!--标题为Document，可以修改-->
	</head>

	<body>
		<!--<body>标签内写正文-->
	</body>
</html>

MIME类型：所有的文件在网络上不管是用于显示还是用于下载都存在自己响应的类型
例如 gif jpeg 等都存在自己的MIME类型用于给文档做一些自己的相关标识在这里插入图片描述

Html的格式由两个种类的标签构成

双标签 <html> </html>
单标签 <meta charset=”utf-8”> ，<br/>——换行

<html>——元素节点
Lang=“utf-8”——属性节点
<body>文本</body>——文本节点
乱码一般出现原因：字符集不统一，我们在国内打开的浏览器的默认的编码格式都是GBK，需要把原有的GBK的格式修改成全球统一的格式——UTF-8

实例：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>你好世界</title>
	</head>

	<body>
		这里是正文
	</body>
</html>

鼠标右键，在浏览器中打开如图所示
在这里插入图片描述

3.3常用特殊符号在HTML中的表示——HTML字符实体(Character Entities)

3.4基本常用标签

<!--  -->				//注释语句，可以跨行
<br/>					//换行
<b>加粗</b>
<strong>加粗</strong>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
<sup>上标</sup>
<sub>下标</sub>
<big>大号字体</big>
<small>小号字体</small>
<address>缩小字体+斜体</address>

<font></font>			//设置字体，face字体，size1-7(默认3)，color(前景色)
<p>段落</p>				//自动空一行
<p align=""></p>		//段落对齐left，right，center，justify两端对齐
<pre>预留格式</pre>		//保留所有空格和空行，常用于程序代码
<div>盒子模型</div>		//区域划分，方便CSS样式格式化
<span>行内组合</span>	//方便CSS样式格式化
<h1-6 align=""></h1-6>	//1-6级标题，字体从大到小，自动空行left，center，right
<hr/>					//水平分割线,可选属性size，color，width，居中对齐