HTML（上）_html上-CSDN博客

本文链接：https://blog.csdn.net/Leprehuan/article/details/117410012

HTML 超文本标记语言

HTML标准与发展历史

<HTML5.0></br>

如何书写HTML5.0标准网页

1、创建文件，文件后缀一定是.html #.htm旧版本网页

2、文件第一行加一句声明《！DOCTYPE》

声明：当前网页按HTML5.0标准来书写

3、中间基本结构

<html> #根标签在文件中最外标签

<head> </head> #网页头部标签全局定义，编码

<body> </body> #网页主体：用户可见区域

</html>

4、如果书写完成网页怎么运行【浏览器】

PC端常用浏览器：

（2）head 头部标签：定义全局标签功能特殊--重点

<title></title> 网页标题：中间文字显示在浏览器标签左上角

#通常：保存网站名称

网页

1.1什么是网页

网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合

网页是网站中的一“页”，通常是HTML格式的文件，他要通过浏览器来阅读，构成网站的基本要素（包括图片，链接，文字，音乐，视频）

1.2什么是HTML

HTML（Hyper Markup Language）指的是超文本标记语言，它是用来描述网页的语言.

不是一种编程语言，而是一种标记语言（MarkUp language）

标记语言是一套标签（MarkUp tag）

所谓超文本，2层含义：

1、它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）

2、它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）

web标准

1.1web标准的构成

主要包括结构（Structure）、表现（Presentetion）和行为（Behavior）三个方面。

标准	说明
结构	结构用于对网页元素进行整理和分类，现阶段主要学的是HTML
表现	表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS
行为	行为是指网页模型的定义及交互的编写，现阶段主要学的是javascript

HTML语法规范

1.1语法规范

1、HTML标签是由尖括号包围的关键词，例如<html>

2、HTML标签通常是成对出现的，例如<html>和</html>,我们称为双标签，标签中的第一个标签是开始标签，第二个标签是结束标签

3、有些特殊的标签必须是单个标签（极少情况），例如<br />.我们称为单标签

1.2 标签关系

双标签关系：包含关系和并列关系

HTML基本结构标签

1.1 第一个HTML

每个网页都会有一个基本结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写

标签名	定义	说明
<html> </html>	HTML标签	页面中最大的标签，我们称为根标签
<head> </head>	文档的头部	注意head标签中我们必须要设置的标签是title
<tltle> </title>	文档的标题	让网页拥有一个属于自己的标题
<body> </body>	文档的主体	元素包含文档的所有内容，页面内容基本都是放到body里面的

1.2、

<!DOCTYPE html> 文档类型声明标签

<html lang="en"> 用来定义当前文档的显示语言

1、en 定义语言为英语

2、zh-CN定义语言为中文

简单来说定义en就是英文网页定义zh-CN就是中文网页

1.3、字符集（Character set ）

多个字符的集合，以便计算机能够识别和存储各种文字

在<head>标签内，可以通过<meta>标签的属性来规定HTML文档应该使用哪种字符集

<meta charset="UTF-8">

charset 常用的值：GB2312、BIG5、GBK、UTF-8,其中UTF-8也被称为万国码，基本包括了全世界所有国家需要用到的字符

HTML常用标签(上）

1.1、标签语义:标签是用来干什么的

根据标签的语义，在合适的地方给一个最合理的标签，可以让页面结构更清晰

（1）标题标签<h1>-<h6>

单词head的缩写，意为头部标题

    <h1>标题一共六级选</h1>
    <h2>文字加粗一行显</h2>
    <h3>由大到小依次减</h3>
    <h4>从重到轻随之变</h4>
    <h5>语法规范书写后</h5>
    <h6>具体效果刷新见</h6>

（2）段落和换行标签

在网页中，要把文字有条理的显示出来，就需要将这些文字分段显示，在HTML标签中，<p>标签用于定义段落，他可以将整个网页分为若干个段落

<p> 我是一个段落标签 <p>

我是一个换行标签<br />

（3）文本格式化标签

在网页中，有时需要为文字设置粗体，斜体或下划线等效果，这时就需要用到HTML中的文本格式标签，使文字以特殊的方式显示。

标签语义：突出重要性，比普通文字更重要

语义	标签	说明
加粗	<strong></strong>或者<b></b>	更推荐使用<strong>标签，语义更强烈
倾斜	<em></em>或者<i></i>	更推荐使用<em>标签，语义更强烈
删除线	<del></del>或者<s></s>	更推荐<del></del>标签，语义更强烈
下划线	<ins></ins>或者<u></u>	更推荐使用<ins>标签，语义更强烈

（4）<div>和<span>标签

<div>和<span>标签是没有语义的，就是一个盒子，用来装内容

<div>我是一个div标签，我一个人单独占一行</div>
<span>我是一个span标签，一行可以放多个</span>

（5）图像标签和路径

1>、图像标签

<img src = "图像URL"  />

src 是<img>标签的必须属性，它表示图片的

图像标签的其他属性

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图像不能显示的文字
title	文本	提示文本，鼠标放在图像上显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图片的边框粗细

图像标签使用是的注意点：

①图像标签可以拥有多个属性，必须写在标签名的后面。

②属性之间不分先后顺序，标签名与属性，属性与属性之间均以空格分开。

③属性采用键值对的格式，即key = "value"的格式，属性=“属性值”

2>、路径（前期铺垫知识）

实际工作中，我们文件不能随便乱放，否则用起来很难快速的找到他们，因此我们需要一个文件夹来管理他们。

目录文件夹：就是普通的文件夹，里面只不过存放了我们做页面所需要的的相关素材，比如html文件，图片等。

②VScode打开文件夹（目录文件夹）

③页面中的图片会非常多，通常我们会新建一个文件夹来存放图像文件（images）,这时再查找图像就需采用

“路径”的方式来指定图像的位置

路径分为：

相对路径：以引用文件所在的位置为参考基础，而建立出的目录路径

在这里简单来说，图片相对于HTML页面的位置

相对路径的分类	符号	说明
同一级路径		图像文件位于HTML文件同一级如<img src="baudu.gif" />
下一级路径	/	图像文件位于HTML文件下一级如<img src="images/baidu.gif" />
上一级路径	../	图像文件位于HTML文件上一级如<img src="../baidu.gif" />

绝对路径:是指目录下的绝对位置，直接到达目标位置，通常从盘符开始的路径。或者网络地址

（6）超链接标签

在HTML标签中，<a>标签用于定义超链接，作用是从一个页面链接到另外一个页面

①超链接的语法格式

<a href = "跳转页面"   target = "目标窗口的弹出方式> 文本或图像 </a>

<a> 单词anchor：意为:锚

两个属性的作用

属性	作用
href	用于指定莲姐目标的url地址，（必须属性）当为标签应用href属性时，它就具有超链接的功能
target	用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式

②超链接的分类

外部链接：例如<a href = "http://www.qq.com">腾讯</ a>

内部链接：网站内部页面之间的互相链接，直接链接内部页面名称即可，例如：<a href = "index.html">首页</a>.

空链接：如果当时没有确定链接目标时，<a href = "#">首页</ a>

下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件。

网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接

锚点链接：点我们点击的链接可以快速定位到页面的某个位置

* 在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two">第2集</a>

** 找到目标位置标签，里面添加一个id属性=刚才的名字，如：<h3 id ="two">第2集介绍</h3>

（7）注释标签

<!--注释语句-->      快捷键ctrl + /

特殊字符：

  < >

空格小于号大于号