HTML基础之概念与常用标签

最新推荐文章于 2021-12-10 08:57:22 发布
最新推荐文章于 2021-12-10 08:57:22 发布
阅读量251 收藏 3
点赞数 3
分类专栏： HTML+CSS 文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47109503/article/details/115704216
版权

文章目录

什么是HTML

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

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

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

网页

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

常用的浏览器及其内核

常用的浏览器

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

浏览器内核

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

浏览器内核备注
IETridentIE、猎豹安全、360极速浏览器、百度浏览器
firefoxGecko火狐浏览器内核
SafariWebkit苹果浏览器内核
chrome/OperaBlinkchrome/opera浏览器内核。Blink其实是Webkit的分支

Web标准

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

为什么需要Web标准

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

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

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>                            可以进行页面跳转
  1. 文字超链接
<a href="网页的地址"> 文字 </a>
  1. 图像超链接
<a href="网页的地址"><img src="图像名" /></a>

背景标签

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

滚动标签

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

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

  1. 文字滚动
<marquee behavior="" direction="">
   <font color="" size="" face="">滚动的文字</font>
</marquee>
Sco_Jing1031
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
html里的标签的概念,HTML相关概念的介绍及HTML5结构和标签
weixin_36155936的博客
06-22 286
HTML 指的是 超文本标记语言 (Hyper Text Markup Language)XHTML 指可扩展超文本标记语言(EXtensible HyperText Markup Language)。并没有引入任何新标签或属性，唯一得区别是语法，XHTML有着更严格语法(比如：不允许大写字母，标签必须闭合等严格规范。)XHTML2 不向前兼容，乃至不兼容之前得 HTML。它是一种全新得语言，...
Html的概念及常见标签
qq_45938664的博客
06-20 397
HTML指的是超文本标记语言（Hyper Text Markup Language），标记语言是一套标记标签，HTML是通过标签来描述网页。 超文本：就是指具有超链接（链接跳转）功能。 标签： 作用：一个块级元素，定义一个段落标签： 作用：定义斜体字...
html标签简要概述
qq_44715697的博客
06-11 276
HTML标签（上） 一、HTML语法规范 1.基本语法概述 （1）html中所有的标签都是由尖括号包围的关键词。 （2）并且大部分标签成对出现(开始标签和结束标签)，称之为双标签，如： <html></html> （3）同时也存在单独出现的标签，称之为单标签，如： <br /> 2.标签之间的关系 双标签关系可以分为两类：包含关系和并列关系 （1）包含关系 <head> <title> </title> </head&g
HTML概念
tian_yu143的博客
01-15 323
HTML指的是超文本标记语言：Hyper Text Markup Language. HTML 不是一种编程语言，而是一种标记语言，它有一套标记标签（markup tag） HTML可以用于描述网页 给大家一个例子： &lt;p&gt;这是一个段落&lt;/p&gt; 网页结构： HTML可以用于建设WEB站点，建设WEB站点需要3部分： HTML：结构（structure） CSS:表现...
HTML中常见的标签及意义(一)
June的专栏
11-02 8798
1：标签：双标签，网页的标志及开始，内容写在这个标签内； 2：标签：双标签，html的头标签，一些设置的东西写到这里边； 3：标签：双标签，html的内容部分，展示内容写到这里边； 4：标签：双标签，网页的标题； 5：标签：单标签，元标签，设置字符集等内容； 6：标签：单标签，单独一行的横线； 7：标签：单标签，单独另起一行； 8：标签：单标签，加载的图片，内部可以嵌套 width
HTML中的几个基本概念------标签、元素、属性
热门推荐
一只努力搬砖的打工妹纸
06-08 1万+
刚开始接触到这些概念，可能会有些混淆，下面将这些概念以及这些概念之间的关系整理一下。。HTML文档由元素构成，元素由开始标签、结束标签、属性及元素的内容4部分组成。一：标签标签用来标记内容块，也用来标明元素内容的意义（及语义），标签使用尖括号包围，如&lt;html&gt;和&lt;/html&gt;，这两个标签表示一个HTML文档。标签有两种形式：成对出现的标签和单独出现的标签，无论哪种标签，标...
html常见的标签及其含义,HTML中各标签代表的含义
weixin_39992831的博客
06-07 2002
html常用标签文件标题文件更新：1)10秒后自动更新一次2)10秒后自动连结到另一个文件查询用表单预设的基准路径版面标题文字的作用也是引用别人的文本。但它是对长文本的引用，如在文章中引入大段某知名作家的文字，这时需要这个标签。字体变化 如果要单独对文本中的某句话添加样式，可以用显示小字体 显示大字体 粗体字 斜体字 打字机字体底线 删除线 下标字 上标字文字闪烁效果换行 分...
HTML标签是什么
whataltair的博客
10-15 914
HTML 标签 HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 HTML 标签是由尖括号包围的关键词，比如 <html HTML 标签通常是成对出现的，比如 <b 和 </b 标签对中的第一个标签是开始标签，第二个标签是结束标签 开始和结束标签也被称为开放标签和闭合标签 什么是 HTML？ HTML 是用来描述网页的一种语言。 HTML 不是一种编程语言，而...
DIV+CSS之页面布局、布局常用属性（浮动、清除、定位、溢出、层叠）、布局类型
Sco_jing的博客
04-23 4732
文章目录1. 浮动（float）1.1 传统网页布局的三种方式1.2 标准流（普通流、文档流）1.3 浮动1.4 浮动特性1.5 浮动元素经常和标准流父级搭配使用1.6 清除浮动1.7 额外标签法2.div+CSS进行页面布局2.1 常见的页面布局2.2 如何布局2.3 页面元素的定位机制3. 布局常用属性3.1 浮动属性（float）3.2 清除属性（clear）3.3 定位属性(position)3.4 溢出属性（overflow）3.5 层叠属性（z-index）4.布局类型4.1单列布局4.2 双列
前端优化 之 图片预加载和懒加载
Sco_jing的博客
11-30 3010
欢迎学习交流！！！ 持续更新中… 文章目录预加载什么是预加载为什么要用预加载预加载的实现懒加载什么是懒加载为什么要用懒加载懒加载的实现懒加载优化预加载和懒加载的比较 预加载 什么是预加载        资源预加载是另一个性能优化技术，我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。预加载简单来说就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。 为什么要用预加载   &nbsp.
CSS的元素显示模式、盒子模型、背景（颜色、图片、平铺、图片位置、图像固定）
Sco_jing的博客
04-23 2143
文章目录1.CSS的元素显示模式1.1 什么是元素显示模式1.2 块元素1.3 行内元素1.4 行内块元素1.5 元素显示模式总结1.6 元素显示模式转换2.盒子模型：网页布局的基础2.1 外边界/距（margin）2.1.1 外边距典型应用2.2 填充/内边距（padding）2.3 边框（border)2.3.1 盒子的边框线2.3.2 表格的细线边框2.4 清除页面元素的默认内外边距3. 背景3.1 背景颜色3.2 背景图片3.3 背景平铺3.4 背景图片位置3.5 背景图像固定（背景附着）3.6 背
HTML5新增多媒体属性（加入视频、音频）、CSS3高级应用（过渡、变形、动画）、精灵图
Sco_jing的博客
05-01 1981
文章目录HTML5新增的多媒体标签视频``音频``CSS3高级应用过渡变形动画 HTML5新增的多媒体标签 视频<video> 当前<video>元素支持三种视频格式：尽量使用mp4格式 浏览器 MP4 WebM Ogg Internet Explorer √ × × Chrome √ √ √ Firefox √    从Firefox 21 版本开始   Linux系统从Firefox 30 开始 √ √
js动画与css3动画的区别
Sco_jing的博客
11-12 1506
欢迎学习交流！！！ 持续更新中… 文章目录JS动画（逐帧动画）css3（补间动画）总结 JS动画（逐帧动画）        首先，在js动画是逐帧动画，是在时间帧上逐帧绘制帧内容，由于是一帧一帧的话，所以其可操作性很高，几乎可以完成任何想要的动画形式。但是由于逐帧动画的帧序列内容不一样，会增加制作负担，且资源占有比较大。        但它的优势也很明显：因为它相似与电影播放模式，很.
【前端优化】重排(reflow)和重绘(reapint)
Sco_jing的博客
12-10 696
在页面的生命周期中，一些效果的交互都有可能发生重排（Layout）和重绘（Painting），这些都会使我们付出高额的性能代价。 浏览器从下载文件至本地到显示页面是个复杂的过程，这里包含了重绘和重排，二者也是最耗时的部分，一旦触发重排，我们对DOM的修改引发了DOM几何元素的变化，渲染树需要重新计算， 使浏览器需要根据新的属性进行绘制。更比而言，重排会产生比重绘更大的开销。所以，我们在实际生产中要严格注意减少重排的触发。
CSS层叠性、继承性、优先级、常见选择器、列表的样式
Sco_jing的博客
04-22 413
这里写目录标题1.CSS的层叠性2.CSS的继承性3.CSS的优先级：要看选择器的权重4. 块级标签5. 常见选择器5.1 属性选择器5.2 复合选择器5.3 关系选择器5.4 伪类选择器6.列表的样式规则 1.CSS的层叠性 指多种CSS样式可以叠加，即一个标签上可以应用多个样式 2.CSS的继承性 指在书写CSS样式表时，子标签会继承父标签的某些样式 p { color:"red"; } <p> 西安 <span&
CSS居中方案-----超全
Sco_jing的博客
11-14 411
欢迎学习交流！！！ 持续更新中… 文章目录HTML代码水平居中行内元素text-align: center;块级元素margin: auto;绝对定位 + left:0;right:0;margin:0 auto;绝对定位 + 负值的margin-leftCSS3中新增的transform属性垂直居中行内元素单行文字垂直居中：设置 line-height = height块级元素绝对定位 + margin: auto;（未知宽高）绝对定位 利用 transform 属性（未知宽高）绝对性定位 利用 ca.
CSS简介、基础选择器、字体属性、文本属性、尺寸和图像表示方式
Sco_jing的博客
04-19 248
CSS简介 CSS主要使用场景就是美化网页，布局页面的 HTML局限性 HTML只关注内容的语义，比如<h1>表明这是一个大标题，<p>表明这是一个段落，<img>表明这儿有一个图片，<a>表示此处有链接。HTML可以做简单的样式，但是有一个共同的特点：丑，并且带来无尽的臃肿和繁琐。 CSS-网页的美容师 CSS是层叠样式表的简称，也会称为CSS样式表或级联样式表。 CSS也是一种标记语言。 CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等
HTML语言基础入门：创建与常用标签解析
"HTML语言基础知识，包括HTML的概念、作用、文档结构和常用标签的讲解。" 在深入探讨HTML之前，我们先来理解HTML的基本概念。HTML（HyperText Markup Language）是一种标记语言，它用于构建和组织网页内容。HTML...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值