HTML方法的简单总结

最新推荐文章于 2023-03-27 12:17:24 发布

死妖阿

最新推荐文章于 2023-03-27 12:17:24 发布

阅读量922

点赞数 1

文章标签： html 前端 web

本文链接：https://blog.csdn.net/m0_49297422/article/details/114556354

版权

HTML方法的简单总结

1.HTML的简单描述
2.简单写一个HTML的小实例（使用VS code开发软件）
3.文档分析和标签组成
4.HTML文档相关说明

1.HTML的简单描述

HTML是超文本标记语言（HyperText Markup Language）的缩写。我们用 HTML 来构建 Web 页面即所谓的网页。超文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。

网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。

静态网页文件扩展名：.html 或 .htm(第二个不建议使用)。

HTML 不是一种编程语言，而是一种标记语言 (markup language)。

2.简单写一个HTML的小实例（使用VS code开发软件）

VS Code（推荐开发软件）
推荐使用VS Code，微软推出的开源文本编辑器，异常的强大，请官网下载（ VS Code 最新版）安装。

运行该软件后，点击软件界面左侧第五个图标即可进行插件安装。推荐安装以下插件：Auto Close Tag、Auto Rename Tag、Code Runner、IntelliSense for CSS、Material Icon、Open HTML in Browser、Path Intelligence等。

运行code后，请注意在File -> Auto Save 选中，如此code将自动保存我们的代码。
输入一个感叹号在文本上再点击tab键可快速生成下面代码：

<!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>Document</title>
</head>
<body>
    
</body>
</html>

实例代码：

<!--文档声明可以不要-->
<!DOCTYPE html>
<html lang="en">
<head>
    <!--选择的字符编码，建议选择utf-8-->
    <meta charset="UTF-8">
    <!--网页的图标-->
    <link rel="shortcut icon" href="返回顶部.gif" type="image/x-icon">
    <!--网页标题-->
    <title>我的web网页标题</title>
</head>
<body>
    <h1>
        第一个标题
    </h1>
    <p>
        第一行
    </p>
</body>
</html>

右击后点击Open with live Sever（前面有需要的插件如果没有下载就没有Open with live Sever）：

Web 浏览器如 Chrome、 Firefox、Edge、Safari 、Baidu等用来读取 HTML 文件并呈现出来。
结果如图：
使用浏览器打开

3.文档分析和标签组成

1.< !DOCTYPE html>: 声明文档类型。出于历史原因需要，现在可有可无。
< html>< /html>: < html>元素。这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。

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

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

4.< link rel=“shortcut icon” href=“favicon.ico” type=“image/x-icon”>: 指定页面的图标，出现在浏览器标签上。(试一试：你可随意下载一个.ico图标文件到工作目录中)

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

6.< body></ body>: 元素。包含你能在页面看到的所有内容，包括文本，图片，音频，游戏等等。

HTML 标记包含一些规定的"元素"（更多的可进菜鸟教程学习）：https://www.runoob.com/html/html-elements.html

4.HTML文档相关说明

(1)说明

注释

为了将一段 HTML 中的内容置为注释，你需要将其用特殊的记号< !- - 和 - - >包括起来，比如：

<p>我在注释外，可以显示！</p>
<!-- <p>我在注释内！不显示</p> -->

空元素

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

<!-- 换行 -->
<p>下一个<br>换行</p> 
<!-- 水平分割线 -->
<hr>
<!-- 输入框 -->
<input>

元素的属性

元素是可以有相关属性的。属性包含元素的额外信息，这些信息不会在浏览器中显示出来。

<!-- 带属性的段落输入框 -->
<p title="这是个title属性">鼠标移上来会显示（这是个title属性）！</p>
<!-- 带属性的输入框 -->
<input type="text">
<input type="password">

(2)标题

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

  <h1>This is heading 1</h1>
  <p>This is text 1.</p>
  <br>
  <h2>This is heading 2</h2>
  <p>This is text 2.</p>
  <br>
  <h3>This is heading 3</h3>
  <p>This is text 3.</p>
  <br>
  <h4>This is heading 4</h4>
  <p>This is text 4.</p>
  <br>
  <h5>This is heading 5</h5>
  <p>This is text 5.</p>
  <br>
  <h6>This is heading 6</h6>
  <p>This is text 6.</p>

(3)文本格式

 <p>可以使用标记标记<mark>高亮</mark>显示文本</p>
  <p><del>这行文本将被视为已删除的文本.</del></p>
  <p><s>这行文字将被视为不再准确</s></p>
  <p><ins>这一行文本将被视为文档的补充</ins></p>
  <p><u>这行文字将显示为下划线</u></p>
  <p><small>这行文字应被视为精细印刷品</small></p>
  <p><strong>此行显示为粗体文本</strong></p>
  <p><em>此行显示为斜体文本</em></p>

运行结果：

可以使用标记标记高亮显示文本

~~这行文本将被视为已删除的文本.~~

~~这行文字将被视为不再准确~~

这一行文本将被视为文档的补充

这行文字将显示为下划线

这行文字应被视为精细印刷品

此行显示为粗体文本

此行显示为斜体文本

标签分析：< mark >可以加深颜色，< del >和< s >划除文字，< ins>和< u>是文字下面加下划线，< small >使文字变小，< strong>让文字加粗，< em>让文字改变成斜体。

(4)超链接

超链接的语法：

<a href="https://www.jd.com/" target="_blank">京东商城</a>

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

锚点：
锚点，也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。元素的id值必须是唯一的，也即页面不能再有其它元素的id值为c，超链接中的地址需要有#符号。

<h1 id="c">顶部</h1>
  <p>点击回到顶部即可返回</p>
  <p>点击回到顶部即可返回</p>
  <p>点击回到顶部即可返回</p>
  <p>点击回到顶部即可返回</p>
  <p>点击回到顶部即可返回</p>
  <p>点击回到顶部即可返回</p>
  <p>点击回到顶部即可返回</p>
  <p>点击回到顶部即可返回</p>
  <p>点击回到顶部即可返回</p>
  <p>点击回到顶部即可返回</p>
  <p>点击回到顶部即可返回</p>
  <p>点击回到顶部即可返回</p>
  <p>点击回到顶部即可返回</p>
  <p>点击回到顶部即可返回</p>
  <p>点击回到顶部即可返回</p>
  <p>点击回到顶部即可返回</p>
  <p>点击回到顶部即可返回</p>
  <p>点击回到顶部即可返回</p>
  <a href="#c">回到顶部</a>

效果如下：

顶部

点击回到顶部即可返回

回到顶部

(5)图片及文件路径

<img src="https://www.jd.com/favicon.ico" alt="JD Logo" width="38" height="38">

图片：

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

文件路径:

为获取图片文件，我们需要指定该文件位于何处，这称为文件路径。文件路径有相对路径和绝对路径两种。

上面图片的例子即为绝对路径。下面是相对路径的例子：

例子	解释
< img src=“picture.jpg”>	该图片文件与当前文档在同一目录中
< img src="./images/picture.jpg">	该图片文件在当前目录下的images目录中
< img src="…/picture.jpg">	该图片文件在上一级目录中

(6)表格

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

<table>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Age</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
  </table>

结果如下：

Firstname	Lastname	Age
	Smith	25
Eve	Jackson	19

(7)列表

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

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

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

结果：

Coffee
Tea
Milk

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

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

结果：

Coffee
Tea
Milk

(8)表单

当网站需要获取我们的一些信息如：用户名、密码、选择买什么、买多少、提出意见等等时，我们就需要使用表单（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>

（更多的html知识可进菜鸟教程学习）：https://www.runoob.com/html/html-elements.html

死妖阿

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
HTML方法的简单总结

HTML方法的简单总结HTML的简单描述简单写一个HTML的3HTML的简单描述HTML是超文本标记语言（HyperText Markup Language）的缩写。我们用 HTML 来构建 Web 页面即所谓的网页。简单写一个HTML的3
复制链接

扫一扫