前端学习: HTML 学习-优快云博客

本文链接：https://blog.youkuaiyun.com/poppick/article/details/51038780

本文介绍了HTML的基本概念、常用标签及其用途，包括标题、段落、图像、链接等，并讲解了如何利用表格、表单进行页面布局及数据收集。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考自http://www.w3school.com.cn/html/index.asp

一, 最简单的HTML

HTML不是变成语言, 而是标记语言, 使用标签来解释页面的内容. 换句话说, 与xml, json等类似, html只是用来描述网页的数据, 对其的解析由浏览器完成.
出于对各种情况的考虑, 浏览器咋对html进行解析时, 并不要求其格式完整, 而是尽可能地展示其内容, 尽管其标签等可能存在各种各样的错误. 但不推荐这样做
html的内容分为标签和纯文本, 文本为展示内容 , 标签指定了展示格式.

二, 基本概念

元素:
- HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。就是标签内的内容
- 可以为空, 空元素在开始标签中关闭, 例如 <br />
- 大部分元素可以嵌套
- 标签不区分大小写, 没有结束也可以正常显示(不推荐)
属性:
- 例如 <a href="http://www.baidu.com">link</a> 中的href.
- 和标签一样, 属性也不区分大小写
- 最好给属性值加上引号
注释
-

三, 基本标签

标题: <h1> ~ <h6>
- 请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替
- 浏览器会自动在标题前后增加空行
段落 <p>
- <p> this a paragraph </p>
- 浏览器会自动在段落前后增加空行
- 段落的行数依赖于浏览器窗口的大小。如果调节浏览器窗口的大小，将改变段落中的行数
图像 <img>
- <img src="/i/eg_w3shool.gif" width="300" height="120" />
- 动态图(gif)与静态图没有区别, 也可以是网络上的图像
- 用src属性指定图像源, alt指定替换文字(当src取不到时)

水平线 <hr>
换行 <br>
- 当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。有空行需要用<br>表示,
文本格式化
- 一些关于字体的标签一般通过css来控制.
- <pre> 预处理, 可以保留空格换行等, 支持  等转义字符
- 例如 <b> 粗体, <em> 加重等, 详细可以查html阅标准手册
样式:
- 指css, css = Cascading Style Sheets
- 使用 <style>标签, style属性等实现
- 有些html标签也有一些样式功能, 但是更推荐使用css
- 有以下三种实现:
  - 外部样式表. 当样式需要被应用到很多页面的时候，外部样式表将是理想的选择
  - 内部样式表. 一般在<head>中定义. 当单个文件需要特别样式时，就可以使用内部样式表
  - 内联样式. 使用style属性当特殊的样式需要应用到个别元素时，就可以使用内联样式
链接 <a>
- 用href属性指定链接的地址 <a href = "http://www.baidu.com"> link </a>
- 用target属性来定义在何处打开链接
- 可以指向网页中的某个位置, 也可以指向本地文件, 网络地址, 发邮件等
表格 <table>
- 属性 border表示边框
- <tr> 表示一行
- <td> 表示数据, 可以是文本也可以是图像, 段落等
- <th> 表示表头, 一般会加粗居中
列表
- 无序列表: <ul>, 即
- 有序列表: <ol>, 用start属性表示起始数字. 即
- 用<li>标签表示每一列
- 定义列表用 <dl>表示,如
块: 大多数 HTML 元素被定义为块级元素或内联元素
- 块级元素在浏览器显示时，通常会以新行来开始（和结束）
- 内联元素在显示时通常不会以新行开始
- 可以用<div>标识一个块, <span>标识一个内联元素. 它们一般与css仪器使用, 来对一部分内容设置样式
布局:
- 可以通过div, table等进行布局
- 使用id进行布局: 用#指定id, 例如 div#container .... <div id="container">
表单和输入:
- 文本输入框: <input type="text" name="firstn>
- 密码域: <input type="password" name="password">
- 表单是一个包含表单元素的区域。
- 表单使用表单标签（<form>）定义。
- 表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。
- 各种输入: <input>
  - 文本域: <input, type="text">
  - 密码域: <input, type="password">
  - 单选框: <input, type="redio">
  - 复选框: <input, type="checkbox">
  - 下拉列表: <select>
  - 按钮: <input, type="button">
  - 确认按钮 <input, type="submit">
- 数据提交:
  - 当点击确认按钮(submit)后, form会用name属性 = value的方式传给action属性指定的页面, 没有name的输入项不会被传递
  - 传递的方式由method属性指定(get或post)
框架 <frameset>和<frame>:
- 优点:
  - 通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
- 缺点:
  - 开发人员必须同时跟踪更多的HTML文档
  - 很难打印整张页面
- 可以使用内联框架<iframe> 在页面中嵌入另一个html页面
背景:
- 背景用 background属性设置, 可以是颜色, 图片或者网页
- 颜色可以用十六进制数、RGB 值或颜色名
头部:
- 一般可以在头部加入一些title, meta, style等描述性信息
脚本 <script>
- 标签用于定义客户端脚本，比如 JavaScript。script 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。必需的 type 属性规定脚本的 MIME 类型。JavaScript 最常用于图片操作、表单验证以及内容动态更新。
实体: $xxx; 例如空格=   小于号= < 大于号>等
URL:
- URL = Uniform Resource Locator
- ```
格式: scheme://host.domain:port/path/filename
```
  - scheme - 定义因特网服务的类型。最常见的类型是 http
  - host - 定义域主机（http 的默认主机是 www）
  - domain - 定义因特网域名，比如 w3school.com.cn
  - :port - 定义主机上的端口号（http 的默认端口号是 80）
  - path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
  - filename - 定义文档/资源的名称
- URL 编码:
  - URL 只能使用 ASCII 字符集来通过因特网进行发送. 由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。
  - URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。URL 不能包含空格。URL 编码通常使用 + 来替换空格。