笔记一、HTML基础入门

m0_69224248

已于 2023-10-12 09:39:16 修改

阅读量41

点赞数

文章标签：笔记

于 2023-09-13 11:57:53 首次发布

本文链接：https://blog.csdn.net/m0_69224248/article/details/132847265

版权

一、万维网

WWW，中文名为“万维网”，简称为“Web”或“W3”，本质上是一个由许多互相链接的超文本组成的系统，是无数个网络站点和网页的集合，主要通过互联网访问（网页的开头部分总是http:// 或者https://）。

二、资源

在这个系统中，每个被访问的事物我们称为 “资源” ；通过一个全局的 统一资源标识符（URI）标识；这些资源可以通过超文本传输协议传送给用户，用户主要是通过点击链接来获得资源的。

三、HTML

（一）HTML

HTML是一种文本类的、解释执行的标记语言，描述并定义了一个网页的内容和基本布局。

HTML 即超文本标记语言 (Hyper Text Markup Language)
Hypertext，有两个特点：一个是链接相关联的文件；另一个是内容含多媒体对象的文件。
HTML 不是一种编程语言，而是一种标记语言 ，通常使用的是一套标记标签 来描述网页。
HTML 文档包含了HTML 标签及文本内容，也被称为Web页面。

注意：

（1）HTML（负责页面结构）、CSS（页面的样式、美化页面）、JavaScript（赋予行为）是前端开发的三大语言，也被称为“前端三剑客”。

（2）Web 浏览器的作用主要是读取 HTML 文档，以网页的形式显示出来。需要注意的是浏览器不会去显示 HTML 标签，而是根据标签去解释页面的内容。

（二）HTML编译环境

1. 扩展名为 html 或 htm 的文件也叫网页文件，本质上是文本类型的文件，网页中的图片、动画等资源都是通过网页文件的HTML元素链接的，与网页文件分开存储。

2. HTML语言编写的文件是标准的ASCII文本文件，因此可以使用任意一种文本编辑器打开或编辑HTML文件。

（三）HTML版本

HTML5 声明：<!DOCTYPE html>

（四）HTML标签

HTML标记标签通常也被称为 HTML标签 ，或 HTML元素，每个标签都可以有相应的属性，页面中的内容就是通过 HTML 标签标记的，HTML 标签有以下几个特点：

HTML标签是由尖括号加上被包围的关键词构成，比如 <html>、<body>等
HTML标签通常是成对出现的，比如<html>和</html>、<head>和</head>、<body>和</body>等。
有一类不是成对出现的标签，我们称为 “空标签”，如：<br /> 等
标签对中的第一个标签是开始标签（开放标签），第二个标签是结束标签（闭合标签）
<html> 与 </html> 之间的内容用来描述一个网页
<head> 与 </head> 是网页的头部元素，可包含脚本，可以指示浏览器在何处可以找到样式表，可以提供元信息等（一个HTML5文档中只能包含一对，内容不会显示在页面中）
<meta /> 标签用来提供有关页面的元信息，如页面字符集
<title> 与 </title> 用来描述网页的标题，只包含文本内容，不包含标签
<body> 与 </body> 之间的内容是呈现给浏览者浏览内容
<p> 与 </p> 为段落标签

例如：<p>我的猫咪脾气爆</p>

开始标签：包含元素的名称，被大于号、小于号所包围，表示元素从这里开始或者开始起作用。
结束标签：与开始标签相似，只是其在元素名之前包含了一个斜杠，这表示着元素的结尾
内容：元素的内容，例中就是所输入的文本本身。
元素：开始标签、结束标签与内容相结合，便是一个完整的元素。

元素也可以有属性，属性应该包含：

在属性与元素名称（或上一个属性，如果有超过一个属性的话）之间的空格符。
属性的名称，并接上一个等号。
由引号所包围的属性值。

1.常用标签

（1）根元素<html>

在HTML中，<html> 元素表示一个HTML文档的根（顶级元素），所以它也被称为根元素。所有的其他元素必须是此元素的后代。

<html lang="zh">表示浏览器默认使用操作系统设置的中文语言，<html lang="en">表示浏览器默认使用操作系统设置的英文语言。

（2）文档元数据

文档元数据含有页面的相关信息，包括样式、脚本及数据，可以帮助一些软件更好地运用和渲染页面，通常我们将这些元数据定义在 <head> 元素中。

<meta> ：可提供有关页面的元信息，比如页面字符集、针对搜索引擎和更新频度的描述和关键词等。
```
<meta charset="UTF-8">
```
<link> ：定义文档与外部资源的关系，用于链接一个外部样式表。

注意：几个常用的属性：

rel：指两个文档之间的关系，专门用来链接到相关元素上的，如 <a>、<area>、<form> 或 <link> 元素上，rel 的属性值也是“链接类型”的代称。设置为stylesheet表示是样式调用。

href：意思是超文本引用。href 属性的值可以是任何有效文档的相对或绝对URL，包括片段标识符和JavaScript代码段。例如 <a> 标签的 href 属性用于指定超链接目标的URL。

src：指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置。

<script> ：用于定义客户端脚本，比如 JavaScript，可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。
<style> ：包含文档的样式信息或者文档的部分内容。默认情况下，是CSS的格式。
<title> ：定义文档的标题，显示在浏览器的标题栏或标签页上。它只可以包含文本，若是包含有标签，则包含的任何标签都不会被解释。

2.块级元素

又名块元素，和其对应的是内联元素名行内元素。块级元素在浏览器显示时，通常会独占一行，以新行来开始（和结束），相邻的块级元素将会在不同行显示。

块级元素的特点：

独占一行，总是从新的一行开始；
高度，行高以及外边距和内边距都可控制；
如果没有设置宽度，那么它的宽度是容器的100%；
自身可以容纳其他块元素和内联元素

（1）基本的块级标签

<h1>~<h6 >：标题标签，用来定义 HTML 标题。等级逐渐降低，字体加粗。
<p >：用来创建一个段落，自动在其前后创建一些空白空间。
<hr/> ：水平线标签，没有结束标签，表示段落级元素之间的主题转换，被定义为语义上的。

（2）用于布局的块级标签

<ol> ：有序列表 ,<li>表示各列表项
<ul> ：无序列表
<dl> : 定义列表
<table> ：表格标签，默认无边框，用border设置，<dt>表示术语</dt>，<dd>表示术语的具体描述</dd>,<tr></tr>表示行，<td></td>表示表格数据，<th>表头内容，且加粗</th>，<caption>表格标题</caption> 注意：<td> </td> 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中，<tr> </tr> 标签用于定义表格中的行，必须嵌套在 <table> </table>标签中。
<form> ：表单标签，<input/>表示输入内容项
<div> ：用来布局的主要标签，是一个通用型的流内容容器，它在语义上不代表任何特定类型的内容，它可以被用来对其它元素进行分组，常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。