HTML学习总结_html结论-CSDN博客

本文链接：https://blog.csdn.net/syjy211/article/details/116357520

HTML学习总结

HTML简介

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

HTML文档结构

HTML 使用"标记"（markup）来注明文本、图片和其他内容，以便于在浏览器中显示。HTML是有一个个的元素组成的，而元素则一般是由一对标签构成。

元素组成

开始标签：包含元素的名称，被左、右角括号所包围。表示元素从这里开始或者开始起作用。
结束标签：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾。
内容：元素的内容。
示例：

在这里插入图片描述
<h1>为开始标签，</h1>为结束标签，“一级标题”为内容，组合起来这就是一个完整的元素。

部分元素标签介绍：

<!DOCTYPE html>: 声明文档类型。出于历史原因需要，现在可有可无。
<html> </html>:这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。
<head></head>: <head>元素。这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。

<meta charset="utf-8">: 这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它，并且它能在以后避免很多其他问题。
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">: 指定页面的图标，出现在浏览器标签上。
<title>: 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。
<body></body>: <body>元素。包含你能在页面看到的所有内容，包括文本，图片，音频，游戏等等。

空元素：部分元素只有一个标签，这些元素通常用来向元素所在位置插入一些东西，比如<br> <hr><input>等。

标题

在HTML中提供了从大到小的六级标题，从<h1>~<h6>。

在这里插入图片描述

文本格式

HTML为文本提供了部分格式，如下：

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

结果如下：

标记文本

~~已删除文本~~

~~文本不准确~~

补充文本

下划线

小字体

加粗文本

斜体文本

文档插入

超链接

<a href="https://www.bilibili.com/" target="_blank">bilibili</a>

bilibili

图片插入

<img src="https://i-blog.csdnimg.cn/blog_migrate/a7c529cbaa27654f122b8fabe030672a.png" alt="pixabay" width="200" height="200">

src后为图片地址，alt后为图片显示错误时显示的字符，后面是长和宽。
表格当页面内容需要使用表格时，一般采用<table>标签。

 <table>
    <tr>
      <th>姓</th>
      <th>名</th>
      <th>年龄</th>
    </tr>
    <tr>
      <td>x</td>
      <td>xx</td>
      <td>xx</td>
    </tr>
  </table>

姓	名	年龄
x	xx	xx

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