本文详细介绍了HTML的基本概念，包括HTML标签的使用、标签的关系、页面结构如html、head、body标签的作用，以及doctype声明、lang属性和charset属性的意义。此外，还讲解了常见的文本格式化标签、图像标签、链接标签的用法，以及路径和属性的设定。文章强调了理解每个标签的语义对于编写清晰页面结构的重要性。
一.什么是HTML标签?
HTML标签是由尖括号包围的关键词 例如<html/>
2.HTML标签通常是成对出现的,第一个标签是开始标签,第二个标签是结束标签,也叫双标签哦
3.也有一些特殊的标签,单标签 : <br />
二.标签关系
双标签中的标签关系可以分为包含关系和并列关系两种
其中包含关系也可以称为父子关系
并列关系可以称为兄弟关系
HTML页面也叫HTML文档
以下几个标签 叫做基本的结构标签 也称为 骨架标签,页面内容也是在这些基本标签上书写的
| <html></html> | HTML标签 | 页面中最大的标签,也称为根标签 |
| <head></head> | 文档的头部 | 注意在head标签中我们必须设置title标签 |
| <title></title> | 文档的标题 | 页面有自己的页面标题 |
| <body></body> | 文档的主体 | 页面的内容 基本都是放到body里面 |
<!DOCTYPE html>的含义是什么?
1.<!DOCTYPE html> 的意思是:当前页面采取的是HTML5版本来显示网页
2.<!DOCTYPE html>声明在文档最前面,处在<html>标签之前
3.<!DOCTYPE html> 不是一个HTML标签,它是文档类型的声明
在<html></html> 即根标签之内的标签才是HTML标签
<html lang="en">的含义是什么?
其中的lang代表语言种类,同时用来定义当前文档显示的语言
en定义语言为英语
zh-CN定义语言为中文
但是对于文档显示来说,定义成en的文档也可以显示中文,定义成zh-CN的文档也可以显示英文
<meta charset="UTF-8">的含义是什么?
字符集(Character set)是多个字符的集合.以便计算机能够识别和存储各种文字
在<html>标签中可以通过<meta>标签的charset属性来规定HTML文档应该使用那种字符编码
UTF-8被称为万国码,基本包含了全世界所有国家需要用到的字符
一般情况下,统一使用UTF-8编码,不要写成"utf8"或者"UTF8".
作用:可以防止出现乱码的情况
如何学习HTML标签?
学习HTML标签重点是记住每个标签的语义.即标签的含义,说白了就是这个标签是用来干嘛的
好处: 选择合适的标签可以让页面结构更清晰
常用的标签:
标题标签
1. h1到h6 重要性逐级递减 即 h1标签中的文字最 "重要"
2. 一行显示 即每个标题都独占一行
段落标签
作用:是为了把文字分段,使文字有条理的显示处理
<p>标签用于定义段落,它可以将整个网页分为若干段落
p:使单词paragraph的缩写即段落
特点:
1.文本在一个段落中会根据浏览器窗口的大小自动换行
2.段落和段落之间有空隙
换行标签
一般情况下 一个段落文字从左到右排列,直到浏览器窗口的右端. 但是换行标签<br/>可以使文本强制换行显示,
br:是break的缩写
<br/>是个单标签
换行标签和段落标签的不同?
换行标签只是简单的开始新的一行,跟段落不一样,段落之间会插入垂直的间距
文本格式化标签
在页面中,有时候需要为文字设置粗体,斜体或者下划线等效果,时候可以使用
文本格式化标签的语义(即作用): 突出重要性,使标签内的内容比普通文字更突出
| 语义 | 标签 | 说明 |
| 加粗 | <strong></strong> 或者 <b></b> | 更推荐使用<strong>标签加粗 语义更强烈 |
| 倾斜 | <em></em> 或者 <i></i> | 更推荐使用<em>标签加粗 语义更强烈 |
| 删除线 | <del></del>或者<s></s> | 更推荐使用<del>标签加粗 语义更强烈 |
| 下划线 | <ins></ins>或者 <u></u> | 更推荐使用<ins> |
特殊的标签<div>和<span>
<div>和<span>没有语义 就是一个盒子,用来装内容
div: 是divsion的缩写 是分割,分区的含义
span: 是跨度,跨距的意思
div和span盒子都是用于布局的
特点:
<div>标签用来布局,但是现在一行只能放一个<div>. 可以视作一个大盒子
<span>标签也用来布局,可以一行堆放. 可以视作小盒子
图像标签和路径
1.图像标签
在HTML标签中,<img>标签用于定域HTML页面中的图像
例子 <img src="图像URL"/>
src是<img>标签的必须属性,它用于指定图像文件的路径和文件名
什么是属性?
简单理解就是属于这个图像标签的特性
| 属性 | 属性值 | 说明 |
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本.图像不能显示的文字 |
| title | 文本 | 提示文本.鼠标放到图片上,显示的文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框粗细 一般都是通过CSS去设定 |
图像标签需要注意的要点:
1.图像标签可以拥有多个属性,但是必须写在标签名的后面
2.属性之间不分先后顺序,标签名与属性,属性与属性之间均以空格发分开
3.属性采取的键值对的格式,即key="value"的格式,属性="属性值"
路径:
相对路径:以引用文件所在位置为参考基础,简单的来说,图片相对于HTML页面的位置
绝对路径:是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径
例如: 电脑中的某个路径"D:\Idea 大前端\.idea" 或者 完整的网络地址 https://blog.csdn.net/IDApprentice?type=blog
(盘符是 DOS 、 WINDOWS 系统对于磁盘存储设备的 标识符 )
链接标签
在HTML中<a>标签用于定义超链接,作用是从一个页面链接到另一个页面
1.语法规范
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
a:是anchor缩写 意为 锚
有两个属性:
| 属性 | 作用 |
| href | 是必须的属性,用于指定链接目标的url地址,当为标签应用href属性时,它就具有了超链接的功能 |
| target | 用于指定链接页面的打开方式,其中_self为默认值 (是以当前窗口打开页面)._blank为在新窗口打开方式 |
链接分类:
1.外部链接必须以http:// 开头
2.内部链接:网站内部页面之间的互相链接,直接链接内部网页名称即可,例如:<a href="index.html">首页</a>
3.空链接 使用 # 代替
4.下载链接:如果href里面地址是一个文件或者压缩包,会下载这个文件
5,网页元素链接:在网页中的各种网页元素,比如文本,音频,图像,视频等都可以添加超链接
6.锚点链接:点击锚点链接.可以快速定位到页面中的某个位置
第一步 在链接文本的href属性中,设置属性值为#名字的形式,如<a href="#two">加油</a>
第二步 找到目标位置标签.里面添加一个id属性 = 刚才的名字. 如 : <h3 id = "#two">我可以</h3>
注释标签: 比如 <!-- -->
这个标签是给我们程序员自己看的
一些特殊的字符:
412
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
