初步认识HTML的总结(1)

最新推荐文章于 2023-02-11 11:58:16 发布
最新推荐文章于 2023-02-11 11:58:16 发布
阅读量153 收藏
点赞数
文章标签： 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53554828/article/details/125850450
版权

HTML的全称是HyperText Markup Language(超文本标记语言)，它不是一种编程语言，而是一种标记语言。

HTML的特点:

1、简易性

2、可拓展性

3、平台无关性

4、通用性

 CSS

CSS全称Cascading Style Sheets 层叠样式表，是一个用于修饰文档（可以是标记语言HTML，也可以是XML或者SVN）的语言，可以将文档以更优雅的形式呈现给用户。

HTML和CSS之间的关系

1、HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

2、CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

简单认识HTML

一、文档结构

<!DOCTYPE html>：H5文档类型（ HTML document）说明该文档为Html5文档。

<html>：HTML的根元素，用来包含HTML文档的所有元素，所有的html标签应该位于html标签内部。

<head>：表示html的头部，head内部标签主要用于设置或者导入外部文件，一般不直接显示在浏览器视口中，常用的子标签为 meta 、title、link、script，分别表示元信息设定、文档标题、css、js。

<meta charset="utf-8">：用来声明当前文档的编码方式为utf-8。

<title>：用来声明当前文档的标题，标题将会出现在浏览器的选项卡中。

<body>：表示html的体部，其内部主要放网页内容，其内容会显示到浏览器视口中，所有想要显示在浏览器中的元素都被包含在该元素中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

二、语法

注释：html中只有一种注释，即<！-- 注释内容-->，这个注释不会在网页中显示。

元素：单标签元素(也叫自结束标签)，仅有一个标签，比如<meta/>、<br>、<hr>、<img>

双标签元素，有开始标签和结束标签，比如<div></div>、<p></p>等。

属性

  <div>我是一个div</div>
  <!-- 建议镜面嵌套 块级元素嵌套行内元素-->
  <div>
    <div></div>
  </div>
	<!-- 不要使用交叉嵌套 -->
  <!--属性 属性写在标签内部
		属性名和属性值使用=隔开
		多对属性之间使用空格隔开
		属性值加"或者'
		绝大多数标签都具有属性：id title style class 
	-->
	<!-- id 唯一标识一个元素 -->
	<div id="only">我是唯一的div</div>
	<!-- class 标识一类元素 -->
	<div class="two">我是一个类元素</div>
	<!-- style属性 内联样式 书写css样式 -->
	<div style="background-color: red;">我是cssDiv</div>
	<!-- title属性  鼠标悬浮到标签上的提示说明 -->
	<div title="我是一个块级元素">我是一个块级元素</div>
	<!-- 字符实体
		空白语法:无论标签内部上写了多少个空格
		浏览器会解析成一个
	 -->
	<div>&lt;&gt;空白&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;语法</div>

 网页中显示

空白语法

在HTML中，某些字符是预留的。例如：不能使用小于号<和大于号>，这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities)，实体以&符开始，以;结尾。以下是常见的实体

显示结果描述实体名称实体编号
空格&nbsp&#160
<小于号&lt&#60
>大于号&gt&#62
&和号&amp&#38
"引号&quot&#34
'撇号&apos (IE不支持)&#39
￠分（cent）&cent&#162
£镑（pound）&pound&#163
¥元（yen）&yen&#165
€欧元（euro）&euro&#8364
§小节&sect&#167
©版权（copyright）&copy&#169
®注册商标&reg&#174
™商标&trade&#8482
×乘号&times&#215
÷除号&divide&#247

三、块级元素和行内元素

块级元素：div、p、h1~h6等

作用：搭建网页结构

特点：1、独占一行   2、宽度默认100%      3、可以根据css设置宽高      4、高度可以由内容撑起

<div style="background-color: blue;">我是一个块级元素,默认占一行</div>
<div style="width:100px; height:200px; background-color:red;">我是一个块级元素,经过css设置了宽高</div>
<div style="font-size:60px; background-color: orange;">我是一个块级元素</div>

在网页中的效果：

行内元素：span、p、img等

作用：在结构中填充网页内容

特点：1、宽高由自身决定   2、与其他元素共享一行   3、无法设置宽高   4、行内元素不建议嵌套块级元素。

<span style="background-color: red;">我是一个行内元素</span>
<span style="background-color: red; width: 500px; height: 500px;">我是一个行内元素,无法设置宽高</span>
<span style="background-color: red;">我是一个行内元素,我们三个都在同一行</span>

在网页中显示为

四、基础标签

基础标签：h1-h6、p标签、br标签、hr标签（都是块级元素）

<h1>我是一个一级标题</h1>
<!-- 我是一个分割线 -->
<hr>
<h2>我是一个二级标题</h2>
<!-- br是强制换行标签 -->
<br>
<h3 id="three">我是一个三级标题</h3>
<h4>我是一个四级标题</h4>
<h5>我是一个五级标题</h5>
<h6>我是一个六级标题</h6>
<!-- 段落标签 块级元素 -->
<p>
    段落     标签,.,/.""
</p>

基础标签：img标签

作用：告诉浏览器要显示一张图片

img标签的格式 
<img src="" alt="">

 src设置图片的路径，可以是绝对路径也可以是相对路径，最好是相对路径

alt图片不能显示时，对图片的描述，

title在鼠标悬停在图片上时，会弹出一个框显示设置的内容

img标签可以设置宽高，即设置图片的宽高，如果不设置就会按照图片默认的显示

比较特别的是img标签不会独占一行

<img src="../../1-Axure/picture/e.jpg" alt="图片无法显示" title="帅气的图片" width="800px" height="500px">

基础标签：a标签

作用：控制页面之间的跳转

<a href="指定需要跳转的目标界面">需要展现给用户查看的内容</a>

a标签之中还有个target属性，它是控制页面的跳转方式：_self在当前窗口进行跳转，默认就是_self,   _blank在一个新的窗口进行跳转，它的title属性和img的title属性一样。并且a标签不仅可以让文字被点击，也可以让图片被点击，且a标签必须要有一个href属性，href属性指定一个url地址，那么必须在地址前面加上http://或者https://

<a href="https://www.4399.com" target="_blank">新建窗口打开童年的快乐</a><br>
<a href="https://www.4399.com" target="_self">当前窗口打开童年的快乐</a><br>
<a href="https://www.4399.com" target="_blank">点击图片打开
   <img src="../../1-Axure/picture/a.jpg" alt="" width="600px" height="400px">
</a>

 音视频标签：video、audio 

video标签的作用：播放视频

标签属性：src视频播放地址

autoplay是否需要自动播放

controls是否需要进度条

poster视频是否需要一个封面

loop一般是广告视频需要，loop设置视频播放完后是否循环播放

muted静音

width/height和img标签中的一样

audio标签的作用：播放音频

标签属性基本和video标签一样，只是height、width和poster不能使用。

<div>
        <span>没有视频封面</span>
        <video src="../../音视频/1.mp4" width="400px" height="300px" controls autoplay></video>
</div>
<div>
        <span>有视频封面</span>
        <video src="../../音视频/1.mp4" width="400px" height="300px" controls autoplay poster="../../音视频/2.jpg"></video>
</div>
<div style="text-align: center;">
        <audio src="../../音视频/1.mp4" controls autoplay></audio>
</div>

 

                                                                                                                                                                                                                                                                                                                                 

猫抓不到的鼠
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
HTML中的背景设置（上）
m0_52660785的博客
07-25 3391
HTML中的背景设置（上）
HTML总结篇（1）
weixin_44164982的博客
07-09 216
第一部分：HTML1、html简介2、html注释3、HTML引入CSS三种方法（1）外部样式表（2）内部样式表 1、html简介 HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言，而是一种标记语言 (markup language) 2、html注释 html注释：在开始标签中有一个感叹号，但是结束标签中没有。浏览器不会显示注释，但是能够利用注释在 HTML 中放置通知和提醒信息，注释的快捷键一般
如何实现span标签当鼠标悬浮时更改背景色
weixin_35756373的博客
02-11 860
在HTML文件中，你可以使用如下代码实现在鼠标悬浮在 span 标签上时更改背景颜色： <style> span:hover { background-color: yellow; } </style> <span>鼠标悬浮在这里</span> ...
CSS基础知识
mantou_riji的博客
04-10 881
文章目录继承选择器的权重像素和百分比em和rem颜色单位 继承 样式的继承：我们为一个元素设置的样式也会作用到它的后代元素上。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> p{ color: salmon; } </style> </head> &l
HTML ＜span＞标签
allway2的博客
10-19 4万+
HTML 中的标签被视为内联元素。它类似于 div 标记，但 div 标记特意用于块级元素，而 span 用于内联元素。HTML 中的 Span 标记用于通过使用元素类或 id 属性为特定内容提供样式。使用 HTML 文档中的 span 标记本身无法进行视觉更改。从上述所有信息中，我们了解到HTML中的标记用于为内联元素提供样式。Span标签主要用于在内联CSS的帮助下在我们的网页上排列结构部分和适当的布局部分。span标记在 HTML 中的属性。HTML中的span标记示例。
对HTML的认识
weixin_51654260的博客
12-02 1533
一、HTML的介绍 1、HTML的概述： html全称为HyperText Markup Language，译为超文本标记语言，不是一种编程语言，是一种描述性的标记语言，用于描述超文本中内容的显示方式。比如字体什么颜色，大小等。 超文本：音频，视频，图片称为超文本。 标记 ：<英文单词或者字母>称为标记，一个HTML页面都是由各种标记组成。 作用：HTML是负责描述文档语义的语言。 注意：HTML语言不是一个编程语言(有编译过程)，而是一个标记语言(没有编译过程)，HTML页面直接由浏览器解
HTML初级知识点总结(1.0)
weixin_44344236的博客
02-01 131
HTML初级知识点总结(1.0) HTML相关概念 概念 全称：HyperTextMarkupLanguage，超文本标记语言。 超文本：文字、图片、视频、链接等。 标记：标签。 语言：HTML是一种标签语言。 文字：纯文字书写。 特点：简单、跨平台（平台无关）。 开发软件：很多都可以，甚至可以txt文件写，然后改后缀html，现在开发主要用VScode和Webstorm。 结构 可以分为三部分: 文档声明，doctype，表明这页代码是用HTML写的。 头部，head，这里会放页面的标题、规定页面的
计算机初步认识.ppt
11-13
计算机初步认识.ppt
Kafka的初步认识
02-25
本文来自于csdn，Kafka是最初由Linkedin公司开发，是一个分布式、支持分区的（partition）、多副本的（replica），基于zookeeper协调的分布式消息系统.早期两个应用程序间进行消息传递需要保证两个应用程序同时在线...
初步认识Node.js
01-27
每一个js文件都是一个模块,js文件的名字就是模块的名字。每个模块内部使用的变量名和函数名互不冲突。一个模块想要对外暴露变量（函数也是变量）,可以用module.exports=variable,还可以exports.variable=variable;...
HTML语言的初步认识
03-19
这个文档讲述的是HTML语言的初步认识这个文档讲述的是HTML语言的初步认识
HTML中"bgcolor"与"background-color"的区别
D.D.U的博客
07-04 4345
问题 我写了个html网页 <table bgcolor="#cccccc" align="center"> </table> 但如果将bgcolor换成backgroud-color则无任何效果,不是很明白 原因 bgcolor只是标签属性，而backgroud-color更多作为css的样式属性。 实例： <table style="background-col...
【css】html background-color设置为透明的方法
热门推荐
happydecai的博客
07-26 25万+
html background-color设置为透明的方法如下： 1,比较好的方法：                 background-color:transparent; 2，不太好的方法（模仿透明，不仔细看，看不出来）                 前三个参数是颜色，后一个是透明度，效果为白色背景透明。                 background-color: rgb...
介绍下你对html的理解
Xiaocong__的博客
02-15 978
1.使用正确的标签做正确的事情。 2.html 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的; 3. 搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于 SEO; 4.使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。 ——HTML：超文本标记语言，一种用于创建网页的标准标记语言； ——HTML5：目前最新的HTML标准，包含新的元素、属性、行为，基于它们的功能特征将他们分成不同
HTML的认识与了解
qq_44698180的博客
06-20 753
HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见
对HTML的初步认识与知识总结
right_hand_side的博客
03-23 230
对HTML的初步认识与知识总结html是超文本标记语言一、初步了解二、html语法1.结构2.标签3.属性4.元素分类结构图 html是超文本标记语言 1）文本 超文本 视频 音频 图片 2）浏览器解析html文件的顺序 从上往下，并且页面中元素的位置与该元素在html文件中的位置保持一致 3）html出现语法错误时，浏览器或者编辑器不会报错 4）html文件可以使用，.html或.htm文件后缀 一、初步了解 1）B/S架构 2）HTTP 浏览器 HTTP 服务器 请求/响应模式 1. 请求
浅谈对HTML的属性和CSS的属性的理解
WinstonLau的博客
03-18 2407
HTML 和 CSS 有什么作用 简单来说，HTML 是用来构建网页的框架的，而 CSS 则是用来装饰网页的 当然，可能有人会说，HTML 也有简单装饰网页的功能。OK，这点我们不否认，比如 font 属性可以对字体样式做一些设计，但是这样做不利于后期的维护，而且在最新的 HTML5 的标准中，也已经废弃了 font 属性 两者的属性有什么区别 在博主看来，HTML 的属性主要是...
说一下 对 HTML HTML5的认识与理解
laizhicenxi的博客
08-22 1175
本文 主要谈一下对HTML，HTML5的认识，有误之处敬请批评指正。 mdn对它的定义：HTML（HyperText Markup Language，超文本标记语言）是一种描述语言，用来定义网页结构 html是前端的基础是它的躯干骨架 一些概念还是要知道的，一个网页的基本标签结构包涵那些要素啊（使用惯了vue，react，可能会不太注意这个基本结构 因为写组件习惯了，忘了index.html的根本），标签闭合啊，要熟悉不同标签的不同语义啊，块级标签有哪些啊 行内标签有哪些啊，怎么设置属性相互转化...
html是什么的理解
好吃的油炸代码
01-21 847
文章中我说两部分，1部分官方解释 2部分说说自己理解。 官方标准解释： HTML的全称为HyperText Markup Language，也就是超文本标记语 言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说 明文字、图形、动画、声音、表格、超链接等，即平常上网时所看到的 网页。 超文本标记语言是WWW的描述语言。设计HTML语言的目的是把 存放在一台计算机中的文本或图形与另一台计算机中的文本或图形方便 地联系在一起，形成有机的整体，人们不用考虑具体信息
初步认识ThreadLocal
最新发布
09-13
总结来说，ThreadLocal是通过每个线程独立拥有的ThreadLocalMap对象来实现存储和访问线程独立的变量副本的。通过set()方法和get()方法，我们可以对ThreadLocal对象进行值的存取操作。这样，不同线程可以独立地使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值