HTML学习笔记

最新推荐文章于 2024-07-10 01:10:22 发布

ALL秃

最新推荐文章于 2024-07-10 01:10:22 发布

阅读量329

点赞数

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

本文链接：https://blog.csdn.net/qq_48814205/article/details/119575298

版权

尚学堂HTML学习笔记

摘要由CSDN通过智能技术生成

1 HTML简介

1.1 基本概念

HTML全称为超文本标记语言（Hyper Text Markup Language），是一种用来描述网页的语言。HTML不是一种编程语言，而是一种标记语言，它使用一套标记标签来描述网页。
HTML文档包含HTML标签和文本。HTML文档也叫做web页面。
HTML由浏览器解析执行，由上往下，由左往右。
HTML由标签组成，标签是由<>包含的关键词。
标签分为两种：双标签、单标签。
双标签由开始标记<>和结束标记</>组成，内容包括在开始标记和结束标记之间。例如：<p>内容</p>。
单标签没有结束标记，在右尖括号之前加一个/表示结束，没有内容。例如：<meta/>。
HTML5标准下，HTML标签不区分大小写，建议小写。
从开始标记到结束标记之间的所有内容叫做元素。元素之间可以嵌套。
例如：<p>content</p>是一个元素，其中<p>是元素的开始，content是元素的内容，</p>是元素的结束。
元素分为两种：块级元素、行内元素。
HTML标签具有属性，用来描述标签。属性的语法为属性名="属性值"。
双标签的属性写在开始标记中，单标签的属性写在/之前。
一个标签可以有多个属性，多个属性之间用空格隔开，不区分前后顺序。
HTML注释的语法为，注释内容可以换行。注释之间不能相互嵌套。

1.2 基本结构

<!DOCTYPE html>
<html>
<head>
	<mata charset="UTF-8"/>
	<title></title>
</head>
<body></body>
</html>

<!DOCTYPE html>：文档类型声明。
<html></html>：HTML文档的所有内容写在html标签之间。
<head></head>：网页的描述性信息。
<body></body>：网页的主体内容。

1.2.1 DOCTYPE

<!DOCTYPE html>：文档类型声明，不是HTML标签，作用是让浏览器按照当前标准解析代码。

HTML5的文档类型声明：<!DOCTYPE html>。

1.2.2 head标签

head标签中可以包含的标签如下所示。

<title></title>标签：设置网页标题。
<meta/>标签。
charset属性：设置网页的字符集。中文开发常用UTF-8。
name、content属性：设置网页的描述信息，不会显示在页面上，可以用于提高网页在搜索引擎中的排名。
<link/>标签：引入外部资源。
rel属性：设置引入内容的类型。icon表示标题上的图标，stylesheet表示样式表。
href属性：设置要引入的内容的路径。

2 HTML基本内容

2.1 标题

标题标签：<h1></h1>、<h2></h2>、<h3></h3>、<h4></h4>、<h5></h5>、<h6></h6>

h1字号最大，从h1往h6逐级递减。默认水平居左、加粗。

align属性：设置元素内容的水平对齐方式，取值可以为left、center、rignt。

2.2 段落

段落标签：<p></p>

align属性：设置元素内容的水平对齐方式，默认值为left。

2.3 换行

换行标签：<br/>

2.4 水平线

水平线标签：<hr/>

hr标签的属性：

color：设置线条颜色
width：设置线条的水平长度
size：设置水平线的垂直高度
align：设置水平线的水平对齐方式，默认值为center

2.5 图片

图片标签：<img/>

img标签的属性：

src：设置图片路径，不可省略
alt：设置图片无法显示时的提示文字
title：设置鼠标悬停在图片上时的提示文字
width：设置图片宽度
height：设置图片高度

当width和height只设置其中一个时，另一个属性等比例变化。

2.6 超链接

超链接标签：<a></a>

a标签中的内容是超链接在网页中显示的内容，可以是文字、图片等。

a标签的属性：

href：跳转路径，不可省略
target：设置跳转方式。_self表示在原窗口打开，_blank表示在新窗口打开。默认值是_self。
name：设置锚点

href属性值为#时叫做空链接，表示跳转到页面顶部。

锚点用于跳转到页面中的特定位置。锚点有以下两种类型。

从a标签跳转到a标签
在要跳转到的a标签设置name属性值。在要点击的超链接处，在href属性中加入#+name值。例如：

<a href="#here">点击</a>
<a href="" name="here">跳转到我</a>

从a标签跳转到块级元素
在要跳转到的块级元素设置id属性值。在要点击的超链接处，在href属性中加入#+id值。例如：

<a

最低0.47元/天解锁文章