【web学习1】HTML学习

HTML学习-初步

一、前言
二、HTML是什么？
三、HTML构成
四、HTML基础
附1：设置vscode默认浏览器为Google
附2：设置自动保存
五、小结

一、前言

HTML+ CSS + JavaScript → Web 程序
工具：VScode编辑器，Google浏览器

一个网页就好像一幢房子，HTML结构就是钢筋混泥土的墙，一幢房子如果没有钢筋混泥土的墙那就是一堆废砖头，也就称不上是房子了。

CSS是装饰材料，是油漆，是用来装饰房子的。CSS如果没有HTML结构那也就什么都不是了，没有了实际使用价值。

而JavaScript就是房屋的开关，用来进行互动，产生动态效果。

二、HTML是什么？

HTML是超文本标记语言（HyperText Markup Language）
不是一种编程语言，而是一种标记语言，标记语言是一套标记标签 (markup tag)
HTML 文档包含了HTML 标签及文本内容，HTML文档也叫做 web 页面

三、HTML构成

（1）HTML标签

<标签>内容<标签>

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签

（2）HTML元素

“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签

（3）HTML结构

在这里插入图片描述
<!DOCTYPE html> 声明文档类型。出于历史原因需要，现在可有可无。

<html></html> html元素。这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。

<head></head> head元素。这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。

<meta charset="utf-8"> 这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它，并且它能在以后避免很多其他问题。

<title></title> 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。

<body></body> body元素。包含你能在页面看到的所有内容，包括文本，图片，音频，游戏等等。
在这里插入图片描述

这是一个可视化的html页面，但只有body中的白色部分可以被显示出来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落</p>
    <p>这是另一个段落</p>
</body>
</html>

效果如下：

在这里插入图片描述
可见确实只有白色部分得到了显示。

四、HTML基础

（1）标题 head

HTML 标题（Heading）是通过 h1~h6 标签来定义的

确保将 HTML 标题标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。

（2）段落 p

HTML 段落是通过标签 <p> 来定义的
如果希望在不产生一个新段落的情况下进行换行，则使用 <br> 标签：

<p>这个<br>段落<br>演示了分行的效果</p>

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

（3）链接 a

HTML 链接是通过标签 <a> 来定义的
语法：

<a href="https://www.baidu.com/" target="_blank">百度一下</a>

说明：

href即为要跳转去的地址 URL（Uniform Resorce Locator)
target属性为_blank表示在新的页面打开超链接（默认是在当前页面打开即_self）
超链接标签包含的内容（当前为文字"百度一下"）即为显示在页面上供用户点击的

默认情况：

一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。

在超链接这里有一个关键的知识点：锚点

锚点，也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。
先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。

具体地，通过下面的方式可以通过锚点实现跳转。

<!-- 文档其余部分 -->
<!-- 文档其余部分 -->
<h2 id="C4">第一章 XXXX</h2>
<!-- 文档其余部分 -->
<!-- 文档其余部分 -->
<!-- 文档其余部分 -->
<a href="#C4">跳到第一章</a>
<!-- 文档其余部分 -->
<!-- 文档其余部分 -->

小问题：经常在某些网站上看到一个浮动图标显示"回到页首"，它是如何实现的？

一、使用 button 标签

在 body 中输入如下代码：

<button onclick="location='https://www.baidu.com'" type="button">回到首页</button>

实现以下效果：点击回到首页按钮，跳转至一个网页，这里设置的是百度，只需要更换为首页网址即可。

在这里插入图片描述
二、在样式中直接添加

<input type="button" value="回到首页" onclick="location='https://www.baidu.com'">

这其实与第一种方法无异，但是明显第一种更加强大，因为它可以放置内容在里面。

（4）图像 img

HTML 图像是通过标签 <img> 来定义的
语法：

<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">

说明：

src属性为要显示图片文件的位置 URL，即图片文件的路径
alt属性当获取图片出现问题时显示的文字（占位符）
可为图片指定高宽度，但不建议（可能导致图片变形）

对于小尺寸的图片，现在可采用 base64 编码进行，可提高页面加载速度，提升用户体验。
图片转base64编码在线使用
Base64 是一种基于 64 个可打印字符来表示二进制数据的表示方法。常用于在通常处理文本数据的场合，表示、传输、存储一些二进制数据，包括 MIME 的电子邮件及 XML 的一些复杂数据。
图片的 BASE64 编码就是可以将一幅图片数据编码成一串字符串，使用该字符串代替图片地址，从而不需要使用图片的 URL 地址。

将图片存到本地文件夹中，其他用户访问时可能看不到，
因此，将图片转化为网址超链接的形式，用户体验感更加。

图片的存储大小对网页的加载有重要的影响，从而影响用户体验。因此，在不明显改变图片质量的情况下压缩图片是提高 Web站点速度的重要手段。
可以采用webp格式图片。

（5）表格 Table

表格由 <table> 标签来定义。
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

标签	描述
<table>	定义表格
<th>	定义表格的表头
<tr>	定义表格的行
<td>	定义表格单元
<caption>	定义表格标题
<colgroup>	定义表格列的组
<col>	定义用于表格列的属性
<thead>	定义表格的页眉
<tbody>	定义表格的主体
<tfoot>	定义表格的页脚

以如下代码为例：

<table border="1">
    <!-- <table> //不加边框 -->
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
        <tr>
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
    </table>

效果如下：
在这里插入图片描述
border显示边框，可以在这里设置粗细，或者取消

（6）列表 List

HTML支持有序、无序、定义列表。

1、无序列表
无序列表是一个项目的列表，使用 <ul> 标签，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
以如下代码为例：

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

效果如下：
在这里插入图片描述
2、有序列表
有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
以如下代码为例：

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

效果如下：
在这里插入图片描述
3、自定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

以如下代码为例：

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

效果如下：
在这里插入图片描述
附：列表标签

标签	描述
<ol>	定义有序列表
<ul>	定义无序列表
<li>	定义列表项
<dl>	定义列表
<dt>	自定义列表项目
<dd>	定义自定列表项描述

（7）表单 Form

HTML 表单用于收集用户的输入信息。
HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。
表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox）等等。

以如下代码为例进行说明：

<form>
  <!-- 文本框，注意有 placeholder 提示符 -->
  用户名：<br>
  <input type="text" name="name" placeholder="请输入用户名"><br>
  <!-- 密码框 -->
  密码：<br>
  <input type="password" name="ps" placeholder="请输入密码"><br>
  年龄：<br>
  <!-- 数字输入框，注意 min 和 value 属性-->
  <input type="number" name="age" min="18" value="18"><br>
  <!-- 单选按钮, 注意 checked 属性 -->
  性别：<br>
  <input type="radio" name="gender" value="male" checked> 男<br>
  <input type="radio" name="gender" value="female"> 女<br>
  <input type="radio" name="gender" value="other"> 其它<br>
  <!-- 下拉列表，注意 selected 属性 -->
  党派：<br>
  <select name="party">
    <option value="D">民主党</option>
    <option value="R" selected>共和党</option>
    <option value="N">无党派</option>
  </select><br>
  <!-- 多选框 -->
  您有哪些交通工具：<br>
  <input type="checkbox" name="vehicle1" value="Bike"> 自行车<br>
  <input type="checkbox" name="vehicle2" value="Motocycle" checked> 摩托车<br>
  <input type="checkbox" name="vehicle3" value="Car"> 轿车<br>
  <input type="checkbox" name="vehicle4" value="Jet"> 飞机<br>
  <!-- 日期选择器 -->
  您的工作日期：<br>
  <input type="date"><br>
  <!-- 文件选择器 -->
  上传您的照片:<br>
  <input type="file" name="photo"><br>
  <!-- 文本输入区域，注意 rows 和 cols 属性 -->
  您的建议：<br>
  <textarea name="message" rows="5" cols="30">
    The cat was playing in the garden.
  </textarea><br><hr>
  <!-- 表单提交/重置按钮，将表单中的数据取消或传输给服务器端进行处理 -->
  <input type="submit" value="提 交">
  <input type="reset" value="重 置">
</form>

效果如下所示：
在这里插入图片描述

附：表单标签

标签	描述
<form>	定义供用户输入的表单
<input>	定义输入域
<textarea>	定义文本域，一个多行的输入控件
<label>	定义<input>标签，一般为输入标题
<fieldset>	定义了一组相关的表单元素，并使用外框包含起来
<legend>	定义了 <fieldset> 元素的标题
<select>	定义了下拉选项列表
<optgroup>	定义选项组
<option>	定义下拉列表中的选项
<button>	定义一个点击按钮
<datalist>	指定一个预先定义的输入控件选项列表
<keygen>	定义了表单的密钥对生成器字段
<output>	定义一个计算结果

（8）其他补充

HTML的元素可以用 区块 或 内联 的方式显示。

区块元素
区块元素在浏览器显示时，通常会以新行来开始（和结束）。如：<h1>, <pre>, <ul>, <table>，<div> 等。

<h2>区块元素</h2>
<div>Hello</div>
<div>World</div>
<p>单独一行</p>

内联元素
内联元素相反，他们总是一个接一个进行显示，不会新起一行。如： <span>, <input>, <td>, <a>, <img>等。

<h3>下面的元素将在一行中显示</h3>
<span>姓名：</span>
<input name="username">
<span>哈哈哈</span>
<a href="https://google.com/">Google</a>
<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg">

预设格式
如果想在网页中展示一首诗或一些特别格式的文本，那么可以使用<pre>标签。
这样页面会保持在代码中的撰写格式。

特殊字符
在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，必须在 HTML 源代码中使用字符实体。

以如下代码为例：

<p>有多&nbsp;&nbsp;&nbsp;远，滚&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;多远！</p>
<hr>
<h2>test.html</h2>
<pre>
  &lt;h1&gt;这是个一级标题&lt;/h1&gt;
  &lt;p&gt;这是一个段落&lt;p&gt;
  &lt;a href="https://twitter.com/"&gt;眼见何事，情系何处，身处何方，心思何人&lt;/a&gt;
<pre>

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

附1：设置vscode默认浏览器为Google

要素1：电脑具备Google浏览器
要素2：在vscode扩展中安装 live server（浏览器实时刷新的插件）
扩展 → live server → 设置 → 扩展设置

找到Custom Browser 选中下列表中的 chrome
要素3：在vscode扩展中安装 open in browser（右键就能运行的插件）
同样找到填写chrome即可

之后就可以使用Google浏览器查看生成的网页了，同时可以借助Google的开发者工具进行调试。