文章目录

什么是HTML
网页
常用的浏览器及其内核
- 常用的浏览器
- 浏览器内核
Web标准
- 为什么需要Web标准
- Web标准的构成
- HTML、CSS、JavaScript之间的关系
HTML的版本
HTML路径
HTML的标签
- 标签的结构
- 标签的分类
- 标签的属性
- 标题标签
- 段落标签
- 水平分隔线标签
- 换行标签
- 文本样式标签
- 文本格式化标签
- 文本语义标签
- 特殊字符
- 下标标签
- 图像标签
- 超链接标签
- 背景标签
- 滚动标签

什么是HTML

●HTML指的是超文本标记语言（Hyper Text Markup Language），它是用来描述网页的一种语言。
●HTML不是一种编程语言，而是一种标记语言。
●标记语言是一套标记标签。

所谓超文本，有两层含义：

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

网页

●网页是图片、链接、文字、声音、视频等元素组成，其实就是一个html文件（后缀名为html）。
●网页生成制作：有前端人员书写HTML文件，然后浏览器打开，就能看到了网页。
●HTML：超文本标记语言，用来制作网页的一门语言，由标签组成的。比如：图片标签、链接标签、视频标签等。

常用的浏览器及其内核

常用的浏览器

浏览器是网页显示、运行的平台。常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。平时称为五大浏览器。

浏览器内核

浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

浏览器	内核	备注
IE	Trident	IE、猎豹安全、360极速浏览器、百度浏览器
firefox	Gecko	火狐浏览器内核
Safari	Webkit	苹果浏览器内核
chrome/Opera	Blink	chrome/opera浏览器内核。Blink其实是Webkit的分支

Web标准

Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际著名的标准化组织。

为什么需要Web标准

由于不同的浏览器解析出来的效果可能不一致，它们显示页面或者排版就有些许差异，开发者常常需要为多版本的开发而艰苦工作。
遵循Web标准除了可以让不同的开发人员写出的页面更标准、更统一外，还有以下优点：

让Web的发展前景更广阔。
内容能被更广泛的设备访问。
更容易被搜寻引擎搜索。
降低网站流量费用。
使网站更易于维护。
提高页面浏览速度。

Web标准的构成

●主要包括结构（现阶段主要学习HTML）、表现（现阶段主要学习CSS）和行为（现阶段主要学习JavaScript)。
●Wed标准提出的最佳体验方案：结构、样式、行为相分离。
简单理解：结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中。

HTML、CSS、JavaScript之间的关系

●HTML用于定义网页的结构,对网页元素进行整理和分类——>结构类似身体,构成人的骨架、器官
●CSS用于描述网页的样子，设置网页元素的版式、颜色、大小等外观样式——>表现类似外观装饰，构成人的肉身皮相
●JavaScript用于控制页面元素，指网页模型的定义及交互的编写，是一种实现与后端的交互的行为——>类似行为动作，是人的灵魂，可以对外界刺激做出反应，构成一个活生生的人

HTML的版本

HTML路径

相对路径：以.或…或文件夹、文件开头
绝对路径：以盘符、/ 开头

HTML的标签

标签的结构

<!DOCTYPE html> ：表示当前的html文件是html5的文档(html5的规范)
<html lang="en"> ： lang表示开发语言，en定义语言为英语，zh-CN定义语言为中文
<meta charset="UTF-8"> ：charset表示使用的字符集。常用的值有：GB2312、BIG5、GBK和UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符。
<html></html> : 页面的根标签，页面中最大的标签
<head></head> ：头部标签，页面的常规信息，在head标签中我们必须要设置的标签是title
<title></title>:标题标签，让页面拥有一个属于自己的网页标题
<body></body>：主体标签，页面的主体信息，元素包含文档的所有内容

标签的分类

双标签：既有开始标签又有结束标签
<开始标签> 内容 </结束标签>
单标签：只有一个标签，不成对出现
<标签名 />

标签的属性

设置标签的特征
<标签名属性名1=“属性值” 属性名2=“属性值”> 内容 </标签名>

标题标签

<hn>内容</hn>       n的取值从1到6，数字越小字体越大，并且自动加粗、自动换行

段落标签

<p> 内容 </p>       表示一段内容，可以自动换行

水平分隔线标签

<hr color="颜色" size="粗细" width="宽度"/>

换行标签

<br />             （浏览器不识别回车换行符）

文本样式标签

<font size="字体大小" color="字体颜色" face="字形"> 内容 </font>       可以设置内容的字体大小、颜色、字形

文本格式化标签

<b> 内容 </b>  /  <strong> 内容 </strong>  --> 推荐使用      字体加粗
<i> 内容 </i>  /  <em> 内容 </em>  --> 推荐使用              斜体
<u> 内容 </u>  /  <ins> 内容 </ins> --> 推荐使用             下划线
<s> 内容 </s>  /  <del> 内容 </del> --> 推荐使用             删除线

文本语义标签

<mark> 内容 </mark>            高亮显示
<cite> 内容 </cite>            引用标签

特殊字符

(1)空格：&nbsp;     --  浏览器不识别空格字符，因此需要使用&nbsp;
(2)小于： &lt;
(3)大于：&gt;
(4)版权符号：&copy;
(5)注册商标：&reg;
(6)摄氏温度：&deg;
(7)乘号：&times;
(8)除号：&divide;
(9)平方：&sup2;
(10)立方：&sup3;

下标标签

<sub> 内容 </sub>

图像标签

<img src="图像文件全名" />
例如：<img src="./images/6.png" />
<img src="图像的名称" alt="图像加载异常时的提示信息"  width="宽度" height="高度"  border="边框线"  vspace="垂直间距" hspace="水平间距"/>

关于路径：

相对路径：从文件当前位置开始的路径
例如： demo/004.html
绝对路径：从磁盘根目录开始的路径
例如： E:\前端\2021-4-3\demo\004.html
关于斜杠：
反斜杠(’’)：在windows操作系统中以双反斜杠(’\’)作为路径分隔符
斜杠(’/’)：是Linux操作系统下的路径分隔符
例如：E:/前端/2021-4-3/demo/004.html
‘./’ ：当前目录(当前文件夹)
‘…/’：表示当前目录的上一级目录

超链接标签

<a></a>                            可以进行页面跳转

文字超链接

<a href="网页的地址"> 文字 </a>

图像超链接

<a href="网页的地址"><img src="图像名" /></a>

背景标签

<body bgcolor="颜色值">            设置页面背景颜色
<body background="图像名">         设置页面背景图像

滚动标签

图像滚动

<marquee behavior=" " direction=" "><img src="图像路径" width=" " height=" ">
</marquee>

●direction属性表示滚动方向，取值有4个：left、right、up、down
●behavior属性表示滚动的速度，数字越小速度越快

文字滚动

<marquee behavior="" direction=""><font color="" size="" face="">滚动的文字</font>
</marquee>

HTML基础之概念与常用标签相关推荐

前端基础----html初识、常用标签
一.HTML初识 web服务本质 import socketdef main():sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)soc ...
前端基础1：HTML常用标签
HTML标签 p标签 p为段落标签特性: 独占一行 h标签标题标签特性: 独占一行由大到小加粗 strong\em标签加粗\斜体标签 a标签超链接标签 ol标签有序列表 <ol ...
html基础常用标签,HTML基础（三）常用标签-by Haley(示例代码)
一.注释文字语法: 二. - 标签这是标题 1 这是标题 2 这是标题 3 这是标题 4 这是标题 5 这是标题 6 三. 标签在 HTML 页面中创建水平线 hr 标签定义水平线: 这是段落. ...
【2022.7.11】HTML基础介绍语法常用标签超文本链接锚点定位
来自2022.7.11 今日学习一.HTML基础介绍 1.网页 1.1什么是网页 1.2什么是HTML 1.3超文本 1.4网页的形成 2.常用浏览器 2.1常用浏览器 2.2浏览器内核 3.web ...
HTML常见双标记图,HTML基础-常用标签及图片
标记/标签{元素} 双标签: 内容标签> 网页页面的根元素 .....h2-h6 标题表格.... 单标签: 内容例如:图片换行水平线.... 常用标签段落换行空格小 ...
HTML常用标签+CSS基础
目录一.HTML常用标签 1.1文件标签 1.2.文本标签 1.3.图片标签 1.4.列表标签 1.5超链接标签 1.6表格标签 1.7表单标签二.CSS 2.1css语法 2.2选择器一.HT ...
Linux基础概念及常用命令
Linux基础概念及常用命令文章目录 Linux基础概念及常用命令 1 Linux概述 1.1 为什么要学Linux 1.2 Linux简介 1.3 Linux 发行版 1.4 Linux 应用领域 ...
HTML基础知识点（2）——常用标签
HTML基础知识点(2)--常用标签和小学妹一起学HTML 这里有:(转载)HTML标签简写及全称常用标签 HTML基础知识点(2)--常用标签一.HTML常用标签 1.效果显示二.HTML属 ...
【HTML基础-1】HTML标签简介及常用标签
目录 1 HTML概述 1.1 什么是HTML 1.2 HTML的语法规则 2 HTML标签简介 2.1 HTML标签 2.2 HTML元素 2.3 HTML实例 3 HTML常用标签 3.1 标题标 ...

HTML基础之概念与常用标签