HTML学习总结

最新推荐文章于 2022-07-10 02:07:49 发布

小蛋夫斯基

最新推荐文章于 2022-07-10 02:07:49 发布

阅读量128

点赞数 1

文章标签： html 学习前端

本文链接：https://blog.csdn.net/qq_51726811/article/details/125697458

版权

HTML

1 HTML定义

HTML是超文本标记语言（HyperText Markup Language）的缩写。它定义了网页内容的含义和结构。

2 HTML文档结构

第一个页面
 第一个页面结果

3 HTML 文档结构分析

3.1 HTML元素（elements）

元素一般由一对标签构成，标签（markup）

3.2 剖析一个 HTML 元素

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

3.3 示例详细说明

整个HTML文档都是在<html>和</html>中
<html>和</html>中嵌套了<head>和</head>还有<body>和</body>
<html>这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。
<body>包含你能在页面看到的所有内容，包括文本，图片，音频，游戏等等.

4 HTML 文档相关说明

4.1 注释

为了将一段 HTML 中的内容置为注释，你需要将其用特殊的记号<!–和–>包括起来
快捷键ctrl和/

4.2 空元素

只有一个开始标签
<br> <hr> <a> <img>
空元素
 空元素结果

4.3 元素属性

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

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

属性元素
 属性元素结果

说明:<input type=“text”>的text意思为输入框的输入内容为文本格式；password意思为输入框的输入内容为密码格式。
复选框: type=“checkbox”
隐藏值: type=“hidden”
文件上传: type=“file”
图片提交按钮: type=“image”
按钮: type=“button”
单选按钮: type=“radio”
重置清空表单: type=“reset”
提交按钮: type=“submit”

5 标题

HTML 提供了从大到小6级标题 : <h1> <h6>
标题
 标题结果

6 文本格式

<p>
可以用<font> <big> <center>，但并不推荐。
文本格式
 文本格式结果

7 超链接

7.1 超链接语法

超链接是页面与页面的跳转
超链接
 超链接结果
说明：

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

7.2 锚点

锚点标记页面的某个元素或位置，实现页面内跳转。
先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。
元素的id值必须是唯一的，也即页面不能再有其它元素的id值为C4
超链接中的地址需要有#符号
锚点
 锚点结果

8图片及文件路径 img

8.1图片

*src属性为要显示图片文件的位置 URL，即图片文件的路径
*alt属性当获取图片出现问题时显示的文字（占位符）
*可为图片指定高宽度，但不建议（可能导致图片变形）
*提示：对于小尺寸的图片，现在可采用 base64 编码进行，可提高页面加载速度，提升用户体验。

8.2文件路径

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

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

例子

解释

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

9表格

有时，页面的内容需要用表格来进行呈现。我们使用<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>是表头的单元（将会加粗显示）
显示如下：

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

表格

10列表

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

无序列表

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

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

<ul type="square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

有序列表

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

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

<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

列表1
列表2
列表3

11表单

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

表单

提示：
当提交时，表单中没有name属性的元素将不会提交，比如上面工作日期的选择器。有name属性的元素其value的值将提交给服务器。