HTML学习笔记_网页设计html笔记-CSDN博客

本文链接：https://blog.csdn.net/m0_67081814/article/details/126409578

文章目录

第一章网页概念
第二章 HTML标签
第三章 HTML常用标签（重点）
第四章表格
第五章表单

第一章网页概念

1.1 什么是网页

网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。
网页是网站中的一页，通常是HTML格式的文件，它要通过浏览器来阅读。
网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页常以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML文件。

1.2 什么是HTML（重点）

HTML指的是超文本标记语言(Hyper Text Markup Language)，它是用来描述网页的一种语言。
HTML不是一种编程语言，而是一种标记语言(markup Language)。
标记语言是一套标记标签(markup Language)。
HTML使用标记标签来描述网页

所谓超文本，有2层含义：
1. 它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。
2. 它还可以从一个文件跳转到另外一个文件，与世界各地主机的文件链接（超级链接文本）。

1.3 网页的形成

网页是由网页元素组成的，这些元素是利用 html 标签描述出来，然后通过浏览器解析来显示给用户的。
在这里插入图片描述

1.4 常用浏览器内核

浏览器内核（渲染引擎）：负责读取网页内容，整理信息，计算网页的显示方式并显示页面。

浏览器	内核	备注
IE	Trident	IE（2022年6月16日退役）、360极速浏览器、百度浏览器使用该内核
firefox	Gecko	火狐浏览器内核
Safari	Webkit	苹果浏览器内核
chrome / Opera	Blink	chrome / Opera浏览器内核，Blink其实是 Webkit 的分支

1.5 WEB标准（重点）

Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C(万维网联盟)是国际最著名的标准化组织。

为什么需要Web标准
浏览器不同，它们显示页面或者排版就有些差异。

遵循Web标准除了可以让不同的开发人员写出的页面更标准、更外观统一，还有以下优点：
- 让Web的发展前景更广阔
- 内容能被更广泛的设备访问
- 更容易被搜索引擎搜索
- 降低网站流量费用
- 使网站更易于维护
- 提高页面浏览速度
Web 标准的构成
主要包括结构(Structure)、表现(Presentation)、和行为(Behavior)三个方面。

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

第二章 HTML标签

2.1 HTML的基本语法

HTML 标签是由尖括号包围的关键词，例如<html>。
HTML 标签通常是成对出现的，例如 <html>和</html>，我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。
有些特殊的标签必须是单个标签（极少情况），例如<br/>,<hr/>，我们称为单标签。

2.2 HTML的标签关系

可以分为两种：包含关系与并列关系

2.2.1 包含关系

<!-- 包含关系又称父子关系 -->
<html>
	<haed><head>
</html>

2.2.2 并列关系

<html>
	<!-- 并列关系又称兄弟关系 -->
	<head></head>
	<body></body>
</html>

2.3 HTML的骨架结构

<!-- 声明标签 -->
<!DOCTYPE html>
<!-- 页面中最大的标签 根标签 -->
<html lang="en">
	<!-- 头部标签 -->
	<head>
 	 	<meta charset="UTF-8">
 	 	<!-- 标题标签 -->
 		<title>Document</title>
	</head>
	<!-- 文档的主体 -->
	<body>
	</body>
</html>

2.4 标签规范

单标签（空标记）

<标记名/>
<标记名 属性="属性值"/>
例如:<br/>

双标记（常规标记)

<标记名><标记名/>
<标记名 属性="属性值"></标记名>
例如:<head></head>

标记也可以叫标签或叫元素

2.5 文档类型声明标签和lang以及字符集

2.5.1 <!DOCTYPE>

<!DOCTYPE>文档类型声明标签，作用就是告诉浏览器要按照哪一种HTML标准来进行编写页面
<!DOCTYPE>不是一个HTML标签，它就是文档类型声明标签。

<!DOCTYPE html>

这句代码的是意思是：当前页面采取的是HTML5版本来显示网页。
<!DOCTYPE>声明必需是在HTML文档的第一行，位于<html>标签之前
在这里插入图片描述

2.5.2 lang

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

<html lang="en"></html>

在这里插入图片描述

2.5.3 字符编码

字符集是多个字符的集合，以便计算机能够识别和存储各种文字。
在<head>标签内，可以通过 <meta> 标签的 charset 属性来规定HTML文档应该使用哪种字符编码。

<meta charset="UTF-8">

在这里插入图片描述

注意：上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用"UTF-8"编码，不要写成"utf-8"或"UTF8"。

2.5.4 mate

meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
<meta> 标签始终位于< head >元素中。
元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务
编码的设置
mate标签属性：

字符编码设置
<meta charset="UTF-8">
IE的设置
<meta http-equiv="X-UA-Compatible" content="IE=edge">
显示的设置
<meta name="viewport" content="width=device-width, initial-scale=1.0">
便于搜索引擎优化的
<meta name="title" content="HTML,CSS,Javascript">
页面的描述 便于搜索引擎优化的
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
关键字的指定便于搜索引擎优化的
<meta name="keywords" content="HTML, CSS, XML" />
页面作者
<meta name="author" content="相遇是春风十里">
页面缓存的设置
<meta http-equiv="Cache-Control" content="max-age=10080">

第三章 HTML常用标签（重点）

3.1 注释标签

<!-- 我是一个注释 -->

3.2 标题标签

作为标题使用，并且依据重要性递减。

  <h1>一级标题</h1>
  <h2>二级标题</h2>
  <h3>三级标题</h3>
  <h4>四级标题</h4>
  <h5>五级标题</h5>
  <h6>六级标题</h6>
  <!-- 注意:一个网页中的h1最好只设置一个。-->

特点：

文本标题自带加粗功能，有自己的文本大小
一个标题独占一行，有默认间距。

效果：
在这里插入图片描述

3.3 段落标签

可以把HTML文档分割为若干段落

<p>我是一个段落</p>
<p>我是一个段落</p>

特点：

文本在一个段落中会根据浏览器窗口的大小自动换行
段落与段落之间有间距

效果：
在这里插入图片描述

3.4 换行标签

强制换行

内容1<br/>内容2
注:换行是一个空标记，它具有强制换行作用

特点：

<br/>是个单标签
<br/>标签只是简单的开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

效果：
在这里插入图片描述

3.5 水平线标签

我是水平线
<hr/>
我是水平线
<!-- 注:hr也是一个空标记-->

效果：
在这里插入图片描述

3.6 加粗标签

<b>加粗内容</b>
<strong>强调加粗内容</strong> (推荐使用)

效果：
在这里插入图片描述

3.7 倾斜标签

<i>倾斜内容</i>
<em>强调倾斜</em>（推荐使用）

效果：
在这里插入图片描述

3.8 删除线标签

<s>内容删除线</s>
<del>强调内容删除线</del>（推荐使用）

效果：
在这里插入图片描述

3.9 文本下划线标签

<u>文本内容下划线</u>

效果：
在这里插入图片描述

3.10 上标和下标

我是<sup>上标</sup>
我是<sub>下标</sub>

效果：
在这里插入图片描述

3.11 div和span标签

3.11.1 div

div，没有具体的含义，用来划分页面区域，独占一行。

<div>第一个div</div>
<div>第二个div</div>
<div>第三个div</div>

特点：

<div>标签用来布局，但是现在一行只能放一个<div>。

效果：
在这里插入图片描述

3.11.2 span

span，没有实际意义，主要应用在对于文本独立修饰的时候，内容有多宽就占多宽的空间距离。

<h3>这里是一段<span>老长的文字</span>了<h3>

特点：

<span>标签用来布局，一行上可以多个<span>。

效果：
在这里插入图片描述
注：红字为span里的内容

3.12 图像标签和路径

3.12.1 图像标签

<img src="图像URL" alt="" title="" ale="" width="" height="">

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

图像标签的其他属性：

属性	属性值	描述
src	图片路径	必须属性
alt	文本	图片不显示（加载失败）后的提示信息
title	文本	鼠标悬停在图片上显示的提示信息
width	像素	设置图片的宽度
height	像素	设置图片的高度
border	像素	设置图片的边框粗细