【3】HTML基础(1)——认识

【3】HTML基础(1)——认识

Hypertext Markup Language:超文本标记语言。用来制作网页的一种标记语言。
#目录
一、概念
二、功能
三、基本语法
(一)标签
(二)元素
(三)属性

一、概念

(一)HTML是网页的结构层;

前端三层: HTML(结构层)从语义的角度搭建网页、CSS(样式层)从美观的角度描述页面样式、JavaScript(行为层)从交互的角度描述页面行为。

(二)是一种纯文本格式的文件;

内部只能书写文字内容,不可添加图片、音频、视频等;dh
与之对比的是富文本文件,最常见的是.rtf文件,类似.doc文件,内部可以保存文本的样式、图片等。
★纯文本文件特点:
1.文件只能保存文本,文件相对较小,易于传输;
2.可以通过直接更改扩展名的方式更改保存格式;
3.可以使用任意的纯本文编辑器进行查看和编辑。
☆HTML、CSS、JS都是纯文本格式文件☆

(三)但是在网页中却呈现了包含文字之外的内容。

有赖于它本身的意义:

1.超文本(Hypertext):

超级文本的缩写;就是用于链接另一个文本或多媒体内容的文本,比如链接到图片、链接、音频、视频、程序;

2.标记(Markup):

也叫标签。有特殊的书写规范,写给浏览器的一种语法格式,结合普通的文字信息,实现特殊的语义或显示内容。在编辑器中可以编辑和查看,在浏览器中不显示。

例如html文件中代码显示:

<h1>今天好开心</h1>
<img src="C:\Users\86156\Desktop\kaixin.jpg">
<p>还写了博客</p>

实际网页中显示:
在这里插入图片描述

二、功能

(一)利用标记给普通的文本添加语义、描述超文本内容,搭建网页结构。

比如:我们常见的h1标签,它在网页中效果确实会让文字加粗加大、独占一行,但是它的功能应该准确来说是:负责给内部文字添加一级标题的语义。(不负责样式,样式由css负责)
★语义化网页的优势:
1.方便代码阅读和后期维护;
2.便于浏览器或是爬虫更好地解析网站内容;
3.使用语义化标签有利于SEO搜索引擎优化,提高网站排名。

三、基本语法

(一)HTML标签

1.标签名必须写在一对尖括号内部

如下(示例):
<html></html>
<h1></h1>

2.标签分为单/双标签,双标签必须成对出现

如下(示例):
<html></html>双标签
<h1></h1> 双标签
<p></p> 双标签
<br/>单标签

3.双标签包含开始和结束标签,结束标签必须写关闭符号/,单标签也需要进行自封闭书写。

★注意:在HTML5中,单标签可以不写关闭符号。
示例错误写法:
<html><html>
<br>(但此单标签的写法在html5中正确)

(二)HTML元素

1.指从开始标签到结束标签的所有内容;

HTML元素包括:开始标签、元素内容、结束标签 。
双标签内部包含的纯文本内容就是元素内容。
示例:

<p>这是一段纯文本内容</p>

★元素内容★
(1)可以是纯文本,也可以是其它HTML元素;

示例:

<div><p>这是一段纯文本内容</p></div>

这种情况,叫做“嵌套”。<div>标签元素内部嵌套了<p>标签元素。
(2)嵌套关系可以有多层;

<div><p>div元素内部嵌套p元素</p><h1>div内部嵌套h1元素<h1></div>

(3)单标签不能添加元素内容,可以称为空元素。

2.元素的特性:

(1)对空格、换行、缩进等形成的空白不敏感;
有无空白对在浏览器中加载的效果没有影响。浏览器识别的是元素的开始和结束以及互相之间的嵌套关系。
例如:

<div><p>div元素内部嵌套p元素</p><h1>div内部嵌套h1元素<h1></div>`

等价于

<div>
<p>div元素内部嵌套p元素</p>
<h1>div内部嵌套h1元素</h1> 
</div>

(2)空白折叠现象:
元素内容如果是文本,所有文字之间如果由空格、换行、缩进等空白字符,在浏览器加载时,连接在一起的空白会折叠成一个空格显示。
例如,代码:

 <p>HTML中所有文字内容之间有多少空     格   都会被折叠
     成一个空格
        显示
 </p>

浏览器显示
在这里插入图片描述

(三)HTML属性

HTML标签可以添加属性,属性可以提供关于HTML元素的更多信息

1.书写位置:

必须写在开始标签或者单标签之内,与标签名之间用空格进行分隔。
例如:

<div class="kuai" ></div>

以上<div>标签有一属性class,其属性值自定义为kuai

<img class="tu">

以上<img>标签有一属性class,其属性值自定义为tu

2.属性包含:

(1)属性名(key)
(2)属性值(value)

★属性名与属性值之间的写法,通常被称为键值对写法。
html标签属性的键值对写法可以以公式表示为 k=“v”。
(补充:XHTML要求属性值必须写在双引号内部)
比如完整写在p标签中为:
<p k="v"></p>

3.一个标签内部可以设置多个不同的属性

属性和属性之间用空格进行分隔,每个属性的键值对写法都是k="v"
<p k="v" k="v" k="v"></p>

4.部分属性可以设置多个属性值

所有属性值都必须书写在同一对双引号中,值与值之间使用空格分隔。
<p k="v1 v2 v3"></p>

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

倏存

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值