HTML学习笔记

cheerio_inf

已于 2022-07-21 11:04:53 修改

阅读量741

点赞数 2

文章标签： html 前端

于 2022-07-20 23:39:51 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_66749281/article/details/125900642

版权

生活中，我们常常会浏览网页，网页渗透到我们生活的方方面面。

一、什么是网页(Web)？

网页是前端开发人员写的，通过浏览器才能访问阅读的页面
网页是网站的”一页“。
文件扩展名为.html

二、什么是HTML？

HTML是用来描述网页结构的一种语言，是Web最基本构件块，它定义了Web内容的含义和结构。

HTML指的是超文本标记语言(Hyper Text Markup Language)，“超文本”是指在单个网站内或网站之间将网页相互连接起来的链接。
HTML不是一种编程语言，而是一种标记语言(markup language)，由一系列标记组成。

三、Web的组成部分

Web的组成部分

四、HTML的基础标签

标签的一些格式规定：

常规标记，也叫双标记。其基本格式为:
1. <标记></标记>
2. <标记属性=“属性值” 属性=“属性值”></标记>
如<head></head>
空标记，也叫单标记。其基本格式为:
1. </标记>
2. <标记属性=“属性值” />
如<br /> (换行)，“/”可以省略。

下面我们在例子中通过10个注释认识HTML，首先创建一个test.html文件：

<!DOCTYPE html> <!-- ❗️注释 1 -->
<html lang="en"> <!-- ❗️注释 2 -->

<head> <!-- ❗️注释 3 -->
  <meta charset="UTF-8"> <!-- ❗️注释 4 -->
  <title>前端一万小时</title> <!-- ❗️注释 5 -->
</head>

<body>
  <img src="HTML 图片" alt="HTML 首页图"> <!-- ❗️注释 6 -->

  <!-- 以下我们来写这个页面 --> <!-- ❗️注释 7 -->
  <h1>① HTML 基础</h1> <!-- ❗️注释 8 -->
  <p>本知识学习用时：2 小时……</p> <!-- ❗️注释 9 -->
  <p>前言：学习前端我们有个比喻：先打地基……<br> <!-- ❗️注释 10 -->
    那接下来的系列文章，我们开始我们的……
  </p>
  <hr> <!-- ❗️注释 11 -->
  <h2>1 认识 HTML</h2>
  <p>在《Oli's 前端一万小时》之……</p>
</body>

</html>

网页运行预览图如下：

例一的页面

相关注释：

每个页面都要从 DOCTYPE 开始，它为浏览器指定这个页面的文档类型，以便浏览器更正确的显示 HTML。只要按照这样的格式和位置写，那么浏览器就会认为你在使用标准 HTML。
💡必须以 <html> 标记开始我们的页面，以 </html> 标记结束，注意要多出一个"/"。对于<html>元素，页面中的所有内容都嵌套在这个元素中。

💡 <html> 的一个属性“lang”，其含义为language，意在告诉浏览器我们是用什么语言写的网页。可以为浏览器的翻译功能提供提示，如下图所示：
只有 <head> 和 <body> 元素能直接放在 <html> 元素里：
- <head> 里主要放一些与当前页面内容无关、但承载一些对页面描述的标记——可以设置它的 meta、title等，也可以放置 CSS语句，这些部分不会被用户看到；
  在vscode中，可以输入html:5和回车键来快速创建格式，如下图所示：
- <body> 里边放的是和页面内容相关的元素，即你想让用户看到的内容。
💡 <meta> 标签可以包含我们要告诉浏览器关于我们页面的一些信息。

💡“charset” 是 <meta> 标记的属性，我们可以在 charset 属性中指定字符编码。

💡“UTF-8”是charset属性的属性值，是互联网上使用最广泛的一种Unicode(通用字符集)的实现方式。使编码无国界，这样就可以显示世界上所有文化的字符了——不管字母、数字还是中文、阿拉伯文等等。
<title> 就是我们经常说的网站标题。
💡 <img> 元素，img=image 图像。我们知道，HTML 页面是一个纯文本，图像无法作为页面的一部分直接显示出来的，都是通过外部引入（链接）的方式来展现。

💡我们浏览器在看到这个元素时，会做的处理不是像看到 <h1> 或 <p> 元素那样直接在页面上显示相关内容，而是需要先到 Web 服务器去获取这个图像，然后再显示出来。

💡Web 常用的图像格式有 JPEG、PNG 和 GIF：
- JPEG：最适合保存照片和其他复杂图像；
- PNG 或 GIF：最适合保存 LOGO 和其他包含单色、线条或文本的简单图形。
💡<img> 有两个必要的属性——src 和 alt。
- src：是 source 的缩写，意指这个图像来源自哪里，可以是本地的图片路径，也可以是图片的URL；
- alt：是alternative的缩写，主要是为了规避——例如因网速差、硬件设备限制等外部因素，我们的浏览器不能很好的显示出图像，那 alt 后边的文本将会取代图像告诉用户这里会是什么东西，如例子就是展示的缺失图像后页面的样子。
用来写我们的注释，便于我们阅读、修改等。这部分所有内容都不会被浏览器显示出来。
这里用一个 <h1> 开始标记，来说明这句话是一个一级标题。我们的标题可以往下分到 <h6> ，实际工作中，一般到 <h3>。

标题大小

<p> 是 “paragraph” 段落的意思。所以这里 <p> 开启一个段落。
<br> 元素，是我们 HTML 中专门用来换行的元素。“br”=“break” 间断，换行的意思。
<hr> 画出一条水平线。

其他一些常见的文本标签：

加粗：<strong></strong> <b></b>
倾斜：<em></em> <i></i>
删除线：<del></del> <s></s>
下划线：<u></u>
上标：<sup></sup>
下标：<sub></sub>

可以尝试用以上所学标签完成如下的页面：
初级HTML

五、标签属性与属性值

所有HTML元素都可以有属性。
属性提供有关元素的附加信息。
属性在标签内指定，通常以名称+值的形式出现。

💡如在上面的例子中，<html>标签就含有属性lang，其属性值为en；<meta>标签含有属性charset，其属性值为UTF-8；标签含有属性src和alt，其属性值分别是图像的来源和纯文本代替内容。
💡我们可以对 <hr> 标签设置多个属性，来达到我们想要的效果，如下面的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <hr color="green">
    <hr color="yellow">
    <hr color="red">
    <hr color="green" width="300">
    <hr color="green" width="600">
    <hr color="red" width="600" align="left">
    <hr color="red" width="600" align="right">
    <hr noshade>
</body>
</html>

<hr> 有width（宽度）、color（颜色）、align（对齐方式）、noshade（取消阴影）等属性，其中noshade没有属性值，上面例子的页面展示为：
hr页面展示

六、列表标签

💡列表标签是HTML的一个重要标签，分为有序列表和无序列表，下面是两种列表的代码实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
	<!-- 有序列表 -->
    <ol>
        <li>第一项</li>
        <li>第二项</li>
    </ol>
    <!-- 无序列表 -->
    <ul>
        <li>第一项</li>
        <li>第二项</li>
    </ul>
</body>
</html>

在这里插入图片描述
💡<ul>标签和<ol>标签内只能嵌套<li>标签，<li>标签内可以嵌套任意标签。

💡若想要有序列表实现以A为计数标记，且从第四位开始计数，或改变无序列表的样式。可以给 <ol> 或 <ul> 添加属性实现：

<!-- A(按字母排序)、a(按小写字母排序)、I(罗马字母排序)、i(小写罗马字母排序) -->
<ol type="A" star="4">
  <li>第一项</li>
  <li>第二项</li>
</ol>
<!-- disc(实心圆点)、circle(空心圆点)、square(实心方块)、none(无项目符号) -->
<ul type="square">
  <li>第1项</li>
  <li>第2项</li>
</ul>

在这里插入图片描述

七、div、span标签

<div> 和 <span> 都是我们常用的盒子标签。

div标签

💡div标签是块级元素。每对div标签里的内容都可以占据一行，不会其他标签在一行显示；

💡div标签总是从新行开始显示；

💡div标签可以设置宽高，且还可以设置标签之间的距离（外边距和内边距）；

span标签

💡span标签是行内元素。span标签元素会和其他标签元素会在一行显示（块级元素除外），不会另起一行显示；

💡span标签的宽度、高度都无法设置，它的宽高受其本身内容（文字、图片）控制，随着内容的宽高改变而改变；

💡span标签无法控制外边距和内边距，虽然可以设置左右的外边距和内边距，但上下的外边距和内边距无法设置；

💡span标签里只能容纳文本或者是其他的行内元素，不能容纳块级元素；

div和span的区别

div标签是块级元素，每个div标签都会从新行开始显示，占据一行；
div标签内可以添加其他的标签元素；
span标签是行内元素，会在一行显示；
span标签内只能添加行内元素的标签或文本。

八、video和audio标签

💡 <video> 标签用于在网页上显示视频，如下面代码。

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

其中.ogg是音频文件格式。
在这里插入图片描述

💡 <audio> 元素用于在网页上播放音频文件，如下面代码。

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

在这里插入图片描述
💡 <video>和<audio>都可以添加属性 autoplay 来设置自动播放，也可以再添加 mute 属性，使自动播放禁音。

九、a和iframe标签

<a href=“点击后跳转的链接” title=“鼠标悬停时显示的提示信息” target=“_blank“> 显示的内容 </a>

💡a标签是定义网页的超链接，是用在从一个页面往另一个页面的超链接；

💡a标签中最重要的一个属性是href属性，也是a标签必须的一个属性，因为href属性定义的是链接的目标；

💡a标签还可以设置title属性，表示鼠标悬停上去后所显示的提示信息；

💡a标签还有一个target属性容易遗忘，其属性值可以为：
target属性值

<iframe src="dhttps://www.youkuaiyun.com/" height="200" width="300" title="Iframe Example"></iframe>

💡 <iframe> 标签用于在网页中显示网页，如下图所示。
在这里插入图片描述

十、table标签

<table> 标签定义 HTML 表格。简单的 HTML 表格由 <table> 元素以及一个或多个<tr>、<th> 或 <td> 元素组成。

如下面的例子：

<table border="1">
  <tr>
    <!-- colspan合并同一行的两个单元格 -->
    <th colspan="2">表格属性</th>
  </tr>
  <tr>
    <td>宽度/高度</td>
    <td>width/height</td>
  </tr>
  <tr>
    <td>边框</td>
    <td>border</td>
  </tr>
  <tr>
    <td>边框颜色</td>
    <td>bordercolor</td>
  </tr>
  <tr>
    <td>背景颜色</td>
    <td>bgcolor</td>
  </tr>
  <tr>
  	<td>水平对齐</td>
    <td>align</td>
  </tr>
  <tr>
  	<td>单元格之间的距离</td>
    <td>cellpacing</td>
  </tr>
  <tr>
  	<td>单元格与内容之间的距离</td>
    <td>cellpadding</td>
  </tr>
</table>

表格属性
💡<tr> 属性：高度(height)、背景颜色(bgcolor)、文字水平对齐(align=“left或right或center”)、文字垂直对齐 (valign=“top或middle或bottom")

💡<td> 属性：宽度(width)、高度(height)、背景颜色(bgcolor)、文字水平对齐(align=“left或right或center”)、文字垂直对齐(valign=“top或middle或bottom")

十一、表单标签

表单的作用：收集用户信息。

<form method=“get或者post” action=“向何处发送表单数据” target=“_self”>
  <!-- post是向服务器传送数据 -->
  <input type="text" placeholder="请输入信息" name="username" value="id">
  <!-- 
	属性       type             定义input的类型
  	属性       placeholder      描述输入字段预期值的简短的提示信息。兼容到IE8以上
    属性       name             必须设置，否则在提交表单时，用户在其中输入的数据不会被发送给服务器
  	属性       value			   表单预设值
	-->
</form>

form的属性：
<form> 标签可以表示一个表单，其属性有method、action、target等。
💡method 属性指定提交表单数据时要使用的 HTTP 方法，get为表单数据作为 URL 变量，post作为 HTTP 后事务发送，具体可以等接触到JavaScript时进行学习。
💡action属性定义了提交表单时要执行的操作。通常，当用户单击提交按钮时，表单数据会发送到服务器上的文件。如action="action_page.php"表示表单数据被发送到名为“action_page.php”的文件中。

input的属性：
<input>标签表现为用户的输入，包含type、placeholder、name、value等属性。
💡type 属性的属性值有如下：

类型	描述
text	常规文字输入
radio	单选按钮输入（选择多个选择之一）
submit	提交按钮
password	密码输入
reset	清空已填内容
checkbox	选项中选择零个或更多选项
color	选择颜色
date	选择日期
email	输入电子邮件
file	输入文件
number	输入数字
range	确定精确值不重要的数字（如滑块控件）

💡placeholder属性，描述输入字段预期值的简短的提示信息。兼容到IE8以上。
在这里插入图片描述

💡name 属性，必须设置，否则在提交表单时，用户在其中输入的数据不会被发送给服务器。
💡value 属性，给表单一个预设值，如图所示。
在这里插入图片描述
label标签：

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>

💡 <label> 标签为 input 元素定义标注（标记）

💡 label 元素为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件，浏览器就会自动将焦点转到和标签相关的表单控件上。

💡 <label> 标签的 for 属性应当与相关元素的 id 属性相同。

select标签：

<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
  <option value="volvo" selected>Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

如下图所示，<select>标签定义了一个下拉列表，<option>包含了各个选项。要定义预选选项，请将selected属性添加到选项的后面，如上面Volvo选项。
select标签
使用 size 属性指定可见值的数量。

使用该 multiple 属性允许用户选择多个值。

<select id="cars" name="cars" size="4" multiple>

多选项
textarea标签：

<textarea> 元素定义了一个多行输入字段（一个文本区域）

<textarea name="message" rows="5" cols="30">
The cat was playing in the garden.
</textarea>

在这里插入图片描述
💡该rows属性指定文本区域中可见的行数。
💡该cols属性指定文本区域的可见宽度。

fieldset和legend元素：
💡该<fieldset>元素用于对表单中的相关数据进行分组。
💡该<legend>元素定义了该元素的标题<fieldset> 。

<form action="/action_page.php">
 <fieldset>
  <legend>Personalia:</legend>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
 </fieldset>
</form>

在这里插入图片描述

输入属性：

💡 readonly属性指定输入字段是只读的。
💡 disabled属性指定应禁用输入字段。
💡 size属性指定输入字段的可见宽度（以字符为单位）。
💡 maxlength属性指定输入字段中允许的最大字符数。
💡 min和max属性指定输入字段的最小值和最大值，常用于数字、日期等。