【HTML】基本概述及详情

一颗不甘坠落的流星

已于 2023-07-24 14:19:20 修改

阅读量1k

点赞数 1

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

于 2020-12-15 21:08:39 首次发布

本文链接：https://blog.csdn.net/qq_45677671/article/details/111193712

版权

HTML 笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

HTML

一、网站建站流程

注册域名（网址）
租用空间（服务器）
网站建设：a.确定网站主题，b.搜集资料，c.规划网站，d.制作页面
网站推广
网站维护

二、网页的web标准-万维网

在这里插入图片描述

三、 HTML基础

1.什么是网页？

网页 = HTML文档
HTML 文档描述网页，包含 HTML 标签和纯文本，也被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。

2.什么是html？

HTML指的是超文本标记语言（Hyper Text Markup Language）
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)

3.什么是xhtml？

XHTML指的是可扩展超文本标记语言（EXtensible Hyper Text Markup Language）
XHTML 是以 XML 格式编写的 HTML。
是一种置标语言，变现方式与超文本标记语言（HTML）类似，不过语法上更加严格

4.网站开发工具

HBuilderX：https://www.dcloud.io/【点击进入】

Visual Studio Code：https://code.visualstudio.com/【点击进入】

Notepad++：https://notepad-plus-plus.org/【点击进入】

注意：新手推荐使用HX，上手简单容易；VScode插件强大，种类繁多，上手稍微较难

5.建立站点

文件命名规范：

名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；必须以英文字母开头
目的：规划网站的所有内容和代码整合资源

6.html文档的基本结构

<!DOCTYPE html>				<!-- 命名文档类型-html5 -->
<html>						<!-- 说明我们写的是标记语言-HTML文档 -->
<head>						<!-- 文件头部 -->
<meta charset="utf-8">		<!-- 编码格式utf-8,gb2312,gbk -->
<title></title>				<!-- 网页标题 -->
</head>						<!-- -->
<body>						<!-- 网络主体 -->
</body>						<!-- -->
</html>						<!-- -->

7.网页的调试工具

（1）pc端调试工具：浏览器

快捷键：打开网页后按F12或右击选择检查

（2）移动端调试工具chrome可以测试移动端页面，有很多模拟器

在这里插入图片描述

8.HTML标记的语法

标记标签&&双标签：
< 标记名称属性1名=“属性1值” 属性2名=“属性2值”。。。。>< / 标记名 >
空标签&&单标签：
< 标记名属性1名=“属性1值” / >

写在尖角号<>里的第一个单词 = 标记 = 标签= 元素；
标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在双引号内
一个标记可以有多个属性，属性和属性之间用空格隔开，属性不分先后顺序；
空标记是指没有结束标签的标记，必须使用 ’/‘ 关闭例如：<hr / >

9.常用标记的使用

标题字体

语法：<h1></h1>
说明：文本标题共有6个（h1-h6）
<h1>h1网页中最重要的标题--logo--唯一性</h1>
<h2>h2网页中重要模块标题</h2>
<h3>h3重要模块内重要内容的标题</h3>
<h4>h4不常用</h4>
<h5>h5不常用</h5>
<h6>h6不常用</h6>

字体标记

语法：<p></p>
说明：段落标签，标识一个段落
	 默认情况下段落与段落之间有段间距

语法：<i></i> | <em></em>
说明：设置文本字体的倾斜效果
	 em比i的语义化更好，不推荐使用i

语法：<b></b> | <strong></strong>
说明：设置文本字体的加粗效果
	 strong比b的语义化更好，不推荐使用b

语法：<u></u>
说明：设置文本下划线

空标记

语法：<br />
说明：空标记，用于设置字体换行

语法：<hr />
说明：空标记，用作水平线

上标及下标

语法：<sup></sup>
说明：上标标签

语法：<sub></sub>
说明：下标标签

div标签

语法：<div></div>
说明：没有具体含义，统称为块标签，用来设置文档区域，是文档布局常用对象

span标签

语法：<span></span>
说明：文本节点标签，可以是某一小段文本或是某一个字。

标签注释

语法：<!-- -->
说明：HTML中的注释

HTML5

一、HTMl5发展史

2004年：
HTML5草案的前身名为 Web Applications 1.0由WHATWG（网页超文本应用技术工作小组）提出
2007年：
被W3C接纳，并成立了新的 HTML 工作团队
2008年1月22号：
HTML 5 的第一份正式草案公布。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。
2012年12月17号：
万维网联盟（W3C）正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称：“开放的HTML5是Web网络平台的奠基石。”
2013年5月6号：
HTML 5.1正式草案公布。该规范定义了第五次重大版本，第一次要修订万维网的核心语言：超文本标记语言（HTML）。在这个版本中，新功能不断推出，以帮助Web应用程序的作者，努力提高新元素交互操作性。

二、HTMl5浏览器兼容性

支持Html5的浏览器：

Firefox（火狐浏览器），
IE9及其更高版本，
Chrome（谷歌浏览器），
Safari，
Opera等；
国内的遨游浏览器（Maxthon），
以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。

三、HTMl5语法

3.1、内容类型（ContentType）

HTML5的文件扩展符与内容类型保持不变，仍然为".html"或".htm"。

3.2、 DOCTYPE声明

<!DOCTYPE html>

3.3、不区分大小写

3.4、指定字符集编码

<meta charset="UTF-8"> <!--国际编码-->

3.5、可省略标记的元素

不允许写结束标记的元素：br、col、embed、hr、img、input、link、meta
可以省略结束标记的元素：li、dt、dd、p、option、colgroup、thead、tbody、tfoot、tr、td、th
可以省略全部标记的元素：html、head、body、colgroup、tbody