HTML(一)

最新推荐文章于 2024-07-25 11:26:35 发布

小丶小橙子

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量167

点赞数

分类专栏：前端文章标签： html html5

本文链接：https://blog.csdn.net/weixin_45900976/article/details/120546399

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.HTML语法规范

1.1基本语法概述

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

2.HTML标签通常成对出现，如<html>和</html>，我们称为双标签，开始标签和结束标签。

3.有些特殊的标签是单个标签（极少），如<br />，我们称为单标签。

1.2标签关系

双标签关系可以分为了两类：包含关系和并列关系。

包含关系：可以简单理解为父子关系。

<head>
<title> </title>
</head>

并列关系：简单理解为兄弟关系。

<head> </head>
<body> </body>

2.HTML基本结构标签

2.1第一个HTML网页

每个网页都有一个基本的结构标签，也称为骨架标签，页面内容在这些基本标签上书写。HTML页面也称为HTML文档。

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

3.开发工具

3.1文档类型声明标签

<!DOCTYPE>文档类型声明，告诉浏览器使用哪种版本来显示网页。

<!DOCTYPE html> 意思是：当前页面用的HTML5来显示网页。

注：1.<!DOCTYPE>声明位于文档中的最前面的位置，在<html>标签之前。

2.<!DOCTYPE>不是一个HTML标签，它就是文档类型的声明标签。

3.2 lang语言种类

用来定义当前文档显示的语言。

1.en定义语言为英语

2.zh—CN定义语言为中文

这个属性对浏览器和搜索引擎(百度、谷歌等)还是有作用的。

3.3字符集

字符集(character set)是多个字符的集合，以便计算机可以识别和存储各种文字。

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

<meta charset="UTF-8" />

UTF-8:万国码，基本包含全世界所有国家需要用到的字符。一定要写不然容易乱码。

4.HTML常用标签

4.1标签语义

要记住每个标签的语义，即每个标签用来干啥。

4.2标题标签

<h1>-<h6> :一到六级标题，双标签。1-6逐级变小。

特点：1.加了标题的文字会变得加粗，字号放大。

2.一个标题独占一行。

4.3段落和换行标签

<p>用来定义段落。双标签。

特点：1.文本在一个段落中回根据浏览器的窗口的大小自动换行。

2.段落和段落之间保有空隙。

<br />：换行标签。

特点：1.单标签。

2.只是简单的开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

4.4文本格式化标签

在网页中，有时候需要设置文字为粗体、斜体、下划线等效果，这些特殊效果称为文本格式化，可以通过标签来实现。

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

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

4.5<div>和<span>

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

div：division的缩写，表示分割、分区。span：跨度，跨距。

特点：1.<div>标签用来布局，但是一行只能放一个<div>，自己独占一行。大盒子。

2.<span>标签用来布局，一行上可以多个<span>，小盒子。

4.6图像标签和路径（重点）

1.图像标签单标签

在HTML中，<img>标签用于定义HTML页面中的图像。

<img src="图像URL" />

src是<img>标签的必须属性，用于指定图像文件的路径和文件名。

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

注：宽度高度一般设置一个，第二个就等比例缩放了。

图像标签属性注意点：

①图像标签可以拥有多个属性，但必须卸载标签名img的后面

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

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

2.路径

(前期铺垫知识(1)(2))

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

(2)vscode打开目录文件夹

文件——打开文件夹，选择目录文件夹，后期非常方便管理文件。

路径分为相对路径和绝对路径。

1.相对路径：简单来说就是图片相对于HTML页面的位置。

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

2.绝对路径：目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

注意注意：绝对路径里面是 \ 相对路径里面是 /

4.7超链接标签（重点）

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

1.链接的语法格式

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

属性	作用
href	用于指定链接目标的url地址，当标签应用为href时，它就有了超链接的功能。
target	指定链接页面的打开方式，_self为默认值，在当前页面打开，_blank是在新窗口中打开页面。

2.连接分类

1.外部链接

2.内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可，如

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

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

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

6.锚点链接：点击链接以后可以快速定位到页面中的某个位置。

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

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

5.HTML中的注释和特殊字符

5.1注释

注释： 快捷键：CTRL+/

5.2特殊字符

在HTML中，一些特殊符号很难或者不方便直接使用，此时我们可以使用下面的字符来替代。

特殊字符	描述	字符代码
	空格符	&nbsp
<	小于号	&lt
>	大于号	&gt

空格符需要几个就打几个&nbsp。

小丶小橙子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML(一)

1.HTML语法规范1.1基本语法概述1.HTML标签是由尖括号包围的关键词，如<html>.2.HTML标签通常成对出现，如<html>和</html>，我们称为双标签，开始标签和结束标签。3.有些特殊的标签是单个标签（极少），如<br />，我们称为单标签。1.2标签关系双标签关系可以分为了两类：包含关系和并列关系。包含关系：可以简单理解为父子关系。<head><title> </title
复制链接

扫一扫