HTML基础知识点 (上)

一.什么是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.youkuaiyun.com/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>

 

注释标签: 比如 <!--      -->

这个标签是给我们程序员自己看的

一些特殊的字符: