HTML学习总结

最新推荐文章于 2023-07-05 11:18:20 发布

好码赛克

最新推荐文章于 2023-07-05 11:18:20 发布

阅读量319

点赞数

本文链接：https://blog.csdn.net/Ether113/article/details/117908412

版权

HTML学习总结

HTML元素
剖析 HTML 文档
文档相关说明
标题
链接
文本格式
图片及文件路径 img
表格
列表
表单
其他

HTML是超文本标记语言（HyperText Markup Language）的缩写,我们用 HTML 来构建 Web 页面即所谓的网页。
HTML 是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。
HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。在浏览器中看到的任何网页背后都是一个 HTML 文档，只要在网页上点击鼠标右键->查看源代码（用控制台工具也可）就可看到。

HTML元素

HTML 使用"标记"（markup）来注明文本、图片和其他内容，以便于在浏览器中显示。HTML 标记包含一些规定的"元素"如 <head>，<title>，<body>，<header>，<footer>，<article>，<section>，<p>，<div>，<span>，<img>，<aside>，<audio>，<canvas>，<datalist>，<details>，<embed>，<nav>，<output>，<progress>，<video>等等。
如下所示的一个用于展示段落的元素：

 <p>我只吃甜的</p>

  开始标签——<p>
  结束标签——</p>
  内容——我只吃甜的
  元素——<p>我只吃甜的</p>

开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
内容（Content）：元素的内容，本例中就是所输入的文本本身。
元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

剖析 HTML 文档

新建一个后缀名为html 的文件

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <title>只吃甜粽子</title>
</head>
<body>
  <h1>粽子有甜有咸</h1>
  <p>我只吃甜的</p>
</body>
</html>

用浏览器打开查看效果
1. <!DOCTYPE html>: 声明文档类型。出于历史原因需要，现在可有可无。
2. <html></html>：这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。
3. <head></head>: 这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。
4. <meta charset="utf-8">: 这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它，并且它能在以后避免很多其他问题。
5. <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">: 指定页面的图标，出现在浏览器标签上。
6. <title></title>: 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。
7. <body></body>: 包含你能在页面看到的所有内容，包括文本，图片，音频，游戏等等。

文档相关说明

注释
如同大部分的编程语言一样，在 HTML 中有一种可用的机制来在代码中书写注释。注释是被浏览器忽略的，而且是对用户不可见的。
为了将一段 HTML 中的内容置为注释，将其用特殊的记号包括起来
给刚刚的html文件加上注释

<!DOCTYPE html>
<!-- 声明文档类型。出于历史原因需要，现在可有可无。 -->
<html>
<head>
  <meta charset="utf-8">
  <!-- 这个元素设置文档使用utf-8字符集编码 -->
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <title>只吃甜粽子</title>
</head>
<body>
  <h1>粽子有甜有咸</h1>
  <p>我只吃甜的</p>
</body>
</html>

查看结果，用户不可见：
空元素

一般来说，元素都拥有开始标签，内容，结束标签。但有一些元素只有一个开始标签，通常用来在此元素所在位置插入/嵌入一些东西，如<br>, <hr>, <input>, <img>, <a>等等。我们称其为空元素

元素的属性
元素是可以有相关属性的。属性包含元素的额外信息，这些信息不会在浏览器中显示出来。
一个属性必须包含如下内容：

（1）一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)
（2）属性名称，后面跟着一个 = 号。
（3）一个属性值，由一对引号 “” 引起来。

标题

HTML 提供了从大到小6级标题，分别是：<h1> ~ <h6>，如下所示

<p>粽子，由粽叶包裹糯米蒸制而成的食品，是中国汉族传统节庆食物之一。</p>
<hr>
<h2>甜粽子</h2>
<p>北方的粽子，多是糯米所做，蘸白糖或红糖食用。</p>
<hr>

（标题放在head里）

链接

超链接语法
说明：

<a href="https://baike.baidu.com/item/%E7%B2%BD%E5%AD%90/5999?fr=aladdin" target="_blank">百度百科：粽子</a>

（1）href即为要跳转去的地址 URL（Uniform Resorce Locator)
（2）target属性为_blank表示在新的页面打开超链接（默认是在当前页面打开即_self）
（3）超链接标签包含的内容（当前为文字"百度一下"）即为显示在页面上供用户点击的
锚点
锚点，也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。

<a href="#make">跳到制法</a>
<h3 id="make">制作方法</h3>
<p>粽馅的调味：咸肉粽要先将新鲜的猪肉用少许味精、白糖、酒、盐、生抽拌匀反复揉擦至调味品渗入猪肉再包。
  <br>
  粽子的捆扎：豆沙粽不宜捆得太紧，防止米粒挤进豆沙中，如果煮不透会出现夹生现象。咸肉粽如果用肥猪肉不宜扎紧、松紧适度即可。如果用瘦猪肉就要扎紧，因为瘦肉熟了以后会收缩，粽馅的肥汁会漏入水中，不能保持粽子的肥糯。
  <br>
  粽的烹煮：煮粽子一定要水滚以后才落粽子，水要浸过粽面，待重新滚起以后再用旺火煮3个小时左右即可。在煮粽过程中不要添生水。要留意枧水粽不能和其它粽子一同煮。煮好以后趁热取出。吃时打开粽叶，粽香喷鼻，入口油而不腻，糯而不粘，咸甜适中，香嫩鲜美是为上品。
  <br>
  粽的选材：粽叶包粽子的叶子在不同地区，有着地域差距因地而异，南方多用箬叶竹，或者苇叶，我国海南岛地区还会使用一种岭南特有的植物“柊叶”作为裹粽的粽叶，形状通常是三角形，呈角锥状或方锥状。在中原地区包粽子的叶子多为槲叶，包出来呈长方体。</p>

文本格式

我们需要知道的文本格式标签如下：

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

图片及文件路径 img

在页面插入一张图片如下：

<img src="https://seikim.com/i/2021/06/15/k4r98w.png" alt="zong1" width="400" height="400"/>

说明：
（1）src属性为要显示图片文件的位置 URL，即图片文件的路径
（2）alt属性当获取图片出现问题时显示的文字（占位符）
（3）可为图片指定高宽度，但不建议（可能导致图片变形）
文件路径
为获取图片文件，我们需要指定该文件位于何处，这称为文件路径。文件路径有相对路径和绝对路径两种。
上面图片的例子即为绝对路径。下面是相对路径的例子：
<img src="picture.jpg"> 该图片文件与当前文档在同一目录中
<imgsrc="./images/picture.jpg">该图片文件在当前目录下的images目录中
<img src="../picture.jpg"> 该图片文件在上一级目录中

表格

有时，页面的内容需要用表格来进行呈现。我们使用<table>等标签即可：

 <table>
    <tr>
      <th>秘方粽</th>
      <th>原料</th>
      <th>做法</th>
    </tr>
    <tr>
      <td>（美味刨冰可口粽）</td>
      <td>粽子、冰块、红豆沙</td>
      <td>略</td>
    </tr>
    <tr>
      <td>（红烧猪手粽）</td>
      <td>粽子、食用油、香辣豆豉酱、葱花、猪蹄</td>
      <td>略</td>
    </tr>
  </table>

列表

我们也可以使用列表来呈现内容，分为无序列表和有序列表。
无序列表

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

无序列表使用<ul>标签，默认使用实心圆点作为每项的标志，其它的标志可以是空心圆circle，实心方块square以及不出现标志。

有序列表

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

有序列表使用<ol>标签，默认使用数字作为每项的标志，其它的标志可以是大写字母A，小写字母a，罗马字母i等。

表单

当网站需要获取我们的一些信息如：用户名、密码、选择买什么、买多少、提出意见等等时，我们就需要使用表单（form）来让用户填写或选择。

输入如下代码进行学习：

<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>