HTML总结

最新推荐文章于 2024-03-18 12:09:27 发布

weixin_48609289

最新推荐文章于 2024-03-18 12:09:27 发布

阅读量279

点赞数

本文链接：https://blog.csdn.net/weixin_48609289/article/details/115096081

版权

HTML学习总结

HTML
撰写 HTML 文档
HTML元素

HTML

HTML是超文本标记语言（HyperText Markup Language）的缩写。我们用 HTML 来构建 Web 页面即所谓的网页；HTML 是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构；除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）；HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。

撰写 HTML 文档

1.首先新建工作目录
在这里插入图片描述
注意：新建文件之前，需要点击下方的Auto Save，这样系统才能保存代码。
2.新建HTML文件
在该文件夹下新建一个后缀名为html 的文件：

3.输入例子中的代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <title>页面标题</title>
</head>
<body>
  <h1>我的第一个Web页</h1>
  <p>当前有点丑：)</p>
</body>
</html>

4.在 code 的编辑区点击鼠标右键即可看到快捷方式将该文件在浏览器中打开（open in browser）
在这里插入图片描述

HTML元素

一个HTML元素

HTML使用“标记”来注明文本、图片和其他内容。HTML标记包含一些规定的“元素”比如：<head><title><body><header><p>等等。一个用于展示段落的元素：
<p>xxx</p>，其中<p>表示开始标签，</p>表示结束标签，“xxx”表示内容，而整个内容就是一个元素。

HTML文档

在前面例子中建立的元素中，各元素分析如下：

<!DOCTYPE html>: 声明文档类型。出于历史原因需要，现在可有可无。
<html></html>: <html>元素。这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。
<head></head>: <head>元素。这个元素包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。
<title></title>: 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。
<body></body>: <body>元素。包含你能在页面看到的所有内容，包括文本，图片，音频，游戏等等。

注释

注释的内容是被浏览器忽略的，对用户不可见，注释的目的就是描述代码是如何工作的和不同部分的代码做了什么等等。为了将一段HTML中的内容置为注释，需要将其用特殊符号包括起来，比如：<p>我在注释外，可以显示！</p>

<!-- <p>我在注释内！浏览器将忽略我</p> -->

注意：输入Ctrl + /即可快捷的进行注释；HTML 不区分标签的大小写，但建议全部使用小写！
如下图所示：
在这里插入图片描述

元素的属性

元素是可以有相关属性的。属性包含元素的额外信息，这些信息不会在浏览器中显示出来。一个属性必须包含如下内容：
1.一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)
2.属性名称，后面跟着一个 = 号。
3.一个属性值，由一对引号 “” 引起来。
HTML 提供了从大到小6级标题，分别是：<h1> ~ <h6>，如下所示：

<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

注意：搜索引擎用标题来索引页面的内容；用户也习惯以标题进行主要内容浏览，以决定是否查看该页面；一级标题<h1>最醒目，应该用于页面的主标题，其次为二级标题，以此类推；不要因为希望醒目，试图使用标题对正文的文字进行放大或加粗。正文文字的醒目可以使用文本格式或 CSS 进行。
我们需要知道的文本格式标签如下：

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

超链接

语法

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

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

注意：元素的id值必须是唯一的，也即页面不能再有其它元素的id值为C4；超链接中的地址需要有#符号
在这里插入图片描述

图片及文件路径 img

要插入图片如下：

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

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

表格Table

我们使用<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>

得到结果如下：
在这里插入图片描述
代码中，<tr>表示行, <td>表示行中的单元, <th>是表头的单元

表单

当网站需要获取我们的一些信息时，我们就需要使用表单（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>