HTML学习

1 网页相关概念

1.1 网页

  • 网站是指在因特网上根据一定规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。
  • 网页是网站的一“页”，通常是 HTML 格式文件，通过浏览器阅读。
  • 网页是构成网站的基本元素，通常由图片、链接、文字、声音、视频等素材组成。
  • HTML：超文本标记语言（Hyper Text Markup Language），一种用来描述网页的语言。

1.2 常用浏览器

谷歌（Chrome）、火狐（Firefox）、Edge、IE、苹果（Safari）、Opera 等。

浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

浏览器 内核 备注
IE Trident IE、猎豹安全、360浏览器、百度浏览器
Firefox Gecko 火狐浏览器内核
Safari Webkit 苹果浏览器内核
Chrome Blink Chrome/Opera 浏览器内核（Webkit 的分支）

1.3 Web标准

Web标准是由 W3C 组织和其他标准化组织制定的一系列标准的集合，W3C（World Wide Web Consortium，万维网联盟）是国际最著名的标准化组织。

Web标准主要包括 结构（Structure）、表现（Presentation）、行为（Behavior） 三个方面。

标准 说明
结构 用于对网页元素进行整理和分类，主要是 HTML
表现 用于设置网页元素的版式、颜色、大小等外观样式，主要指 CSS
行为 指网页模型的定义及交互的编写，主要是 JavaScript

Web 标准提出的最佳体验方案：结构、样式、行为相分离。

2 HTML语法

2.1 基本语法概述

  1. HTML 标签是由尖括号包围的关键词，如 <html>。
  2. HTML 标签通常成对出现，如 <html></html>，称为双标签，分别是开始和结束标签。
  3. 有些特殊的标签必须是单个标签（极少情况），如 <br />，称为单标签。

标签关系：包含和并列

<!-- 包含 -->
<head>
    <title></title>
</head>

<!-- 并列 -->
<head></head>
<body></body>

2.2 基本结构标签

也被称为骨架标签，页面内容就是在这些基本标签上书写。

标签名 定义 说明
<html></html> HTML 标签 页面中最大的标签，称为根标签
<head></head> 文档头部 在 <head> 标签中必须要设置的标签是 <title>
<title></title> 文档标题 页面属于自己的网页标题
<body></body> 文档主体 元素包含文档的所有内容 
<html>
    <head>
        <title> This is title </title>
    </head>
    <body>
        This is a sentence.
    </body>
</html>
  • <!DOCTYPE> 文档类型声明标签 —— 告诉浏览器使用哪种 HTML 版本显示网页。
    • <!DOCTYPE> 声明位于文档最前面，在 <html> 标签之前。
    • <!DOCTYPE> 不是一个 HTML 标签，它就是文档类型声明标签。
    • <!DOCTYPE html> 表示当前页面采用的是 HTML5 版本显示页面。
  • lang 语言种类 —— 用来定义当前文档显示的语言。
    • en 定义语言为英语， zh-CN 定义语言为中文。
    • 对于文档显示而言，定义成 en 的文档也可以显示中文，反之同理。
  • charset 字符集 —— 字符集（Character set）是多个字符的集合，以便计算机能够识别和存储各种文字。
    • GB2312 表示简体中文。
    • BIG5 表示繁体中文。
    • GBK 包含了简体中文和繁体中文。
    • UTF-8 为万国码，基本包含了全世界所有国家需要用到的字符。
<!DOCTYPE html>         
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

2.3 HTML 常用标签

2.3.1 标题标签 <h1> - <h6>

h: head

标签语义：作为标题使用，并且依据重要性递减。

特点

  1. 文字变粗，字号变大。
  2. 标题独占一行。

2.3.2 段落 <p> 和换行 <br /> 标签

p: paragraph

标签语义：将 HTML 文档划分成若干段落。

特点

  1. 段落中的文本或根据浏览器窗口大小自动换行。
  2. 段落之间有空隙。

br: break

标签语义：强制换行。

特点

  1. <br /> 是一个单标签。
  2. <br /> 标签只是强制换行，间隔不变。

2.3.4 文本格式化标签

标签语义：突出重要性，比普通文字更重要

语义 标签 说明
加粗 <strong></strong> 或 <b></b> 推荐使用前者，标签加粗，语义更强烈
倾斜 <em></em> 或 <i></i> 推荐使用前者，标签加粗，语义更强烈
删除线 <del></del> 或 <s></s> 推荐使用前者，标签加粗，语义更强烈
下划线 <ins></ins> 或 <u></u> 推荐使用前者，标签加粗，语义更强烈

em: emphasized、del: deleted、ins: inserted
i: italic、s: strikethrough、u: underlined

2.3.5 <div> 和 <span> 标签

div: division

没有语义，是用来装内容的“盒子”。

特点

  1. <div> 标签一行只有一个
  2. <span> 标签一行可以有多个

2.3.6 图像标签 <img>

img: image

属性 属性值 说明
src 图片路径 必须属性
alt 文本 替换文本，图像不能显示时的文字
title 文本 提示文本，鼠标放在图像上时显示的文本
width 像素 图像宽度
height 像素 图像高度
border 像素 图像边框粗细

src: source、alt: alter

注意点

  1. 图像标签可以有多个属性，必须写在标签名后。
  2. 属性之间不分先后顺序，标签名与属性，属性之间用空格个分隔。
  3. 属性采用键值对的格式，即 key = "value" 的格式。

2.3.7 路径

相对路径：以引用文件所在位置为参考基础，而建立的目录路径。

相对路径分类 符号 说明
同一级路径 图像文件位于HTML文件同一级，如 <img src="baidu.gif" />
下一级路径 / 图像文件位于HTML文件下一级，如 <img src="images/baidu.gif" />
上一级路径 ../ 图像文件位于HTML文件上一级，如 <img src="../baidu.gif" />

绝对路径：指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
如，"D:\VS_code\html学习\image1" 或完整网络路径 "https://baidu.com/logo.png"

2.3.8 超链接标签 <a>

a: anchor

<a> 标签用于定义超链接，作用是从一个页面链接到另一个页面。

格式：<a href="跳转目标" target="目标窗口弹出方式">文本或图像</a>

属性 作用
href 指定链接目标的 url 地址，必须属性
target 指定链接页面的打开方式，_self 为默认值，当前页面打开，_blank 在新窗口打开

href: hypertext reference

链接分类

  1. 外部链接：如，<a href="http://www.baidu.com" target="_blank">百度</a> 。
  2. 内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可，如 <a href="index.html">首页</a> 。
  3. 空链接：如，<a href="#">关于</a> 。
  4. 下载链接：如果 href 里面的地址是一个文件或者压缩包，会下载该文件。
  5. 网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。
  6. 锚点链接：点击链接，可以快速定位页面的某个位置（空链接可跳转顶部）。
    • 在链接文本的 href 属性中，设置属性值为 #id 的格式，如，<a href="#two">第2集</a> 。
    • 找到目标位置标签，里面添加一个 id 属性，如，<h3 id="two">第2集介绍<h3> 。

2.3.9 注释标签和特殊字符

注释
如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的文字，就需要使用注释标签 <!-- 注释语句 --> 。

特殊字符
在HTML页面中，一些特殊的符号很难或不方便直接使用，可以使用下面代码代替。

特殊字符 描述 字符代码
  空格 &nbsp;
< 小于 &lt;
> 大于 &gt;
& 和 &amp;
¥ 日币 &yen;
© 版权 &copy;
® 注册商标 &reg;
° 度 &deg;
± 正负号 &plusmn;
× 乘号 &times;
÷ 除号 &divide;
² 平方 &sup2;
³ 立方 &sup3;

nbsp: no-break space、lt: less than、gt: great than、amp:ampersand、copy: copyright、reg: registration、deg: degree、plusmn: plus-minus sign、sup: superscripted

2.4 表格标签

表格主要用于展示数据，可读性好。

  1. <table></table> 用于定义表格的标签。
  2. <tr></tr> 用于定义表格中的行，必须嵌套在 <table></table>中。
  3. <td></td> 用于定义表格中的单元格，必须嵌套在 <tr></tr> 中。
  4. <th></th> 定义表头单元格，一般位于表格的第一行或第一列，文本内容加粗居中显示。
<table>
  <tr>
    <th>表头</th>
    ...
  </tr>
  <tr>
    <td>内容</td>
    ...
  </tr>
  ...
</table>

tr: table row、td: table data、th: table head

2.4.1 表格属性和结构

<table> 标签中可以设置表格的属性。

属性 属性值 描述
align left、center、right 规定表格相对周围元素的对齐方式
border 1 或 "" 规定表格是否有边框，默认 "" ，无边框
cellpadding 像素 规定单元格边沿与其内容之间的空白，默认 1 像素
cellspacing 像素 规定单元格之间的空白，默认 2 像素
width 像素或百分比 规定表格宽度

为了更好的表示表格的语义，可以使用表格结构标签 <thead> 和 <tbody> ，将表格划分成头部和主体两大部分。

  1. <thead></thead> 用于定义表格的头部，内部必须有 <th> 标签。
  2. <tbody></tbody> 用于定义表格的主体，主要放数据本体。
  3. 都需要嵌套在 <table> 标签中。

2.4.2 合并单元格

跨行合并：rowspan="合并单元格个数" ，写在最上侧所需合并的单元格中。
跨列合并：colspan="合并单元格个数" ，写在最左侧所需合并的单元格中。

2.5 列表标签

表格主要用来展示数据，列表则主要用于布局。
特点：整洁、有序。

2.5.1 无序列表

<ul> 标签表示页面中项目的无序列表，一般以项目符号呈现列表项，列表项用 <li> 定义。

<h3>音乐三巨头</h3>
<ul>
  <li>许嵩</li>
  <li>徐良</li>
  <li>汪苏泷</li>
</ul>

ul: unordered list、li: list item

  1. 无序列表的各个列表项之间没有顺序级别之分，是并列的。
  2. <ul></ul> 标签中只能嵌套 <li></li> 标签，<li></li> 标签可以容纳任何元素。

2.5.2 有序列表

<ol> 标签用于定义有序列表，列表排序以数字显示，列表项用 <li> 定义，与无序列表类似。

ol: ordered list

2.5.3 自定义列表

自定义列表常用于对术语或名词进行解释和描述，列表项前没有任何项目符号。
<dl> 标签用于定义描述列表（定义列表），<dt> 定义术语，<dd> 定义描述。

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
</dl>

dl: definition list、dt: definition term、dd: definition description

  1. <dl></dl> 标签中只能包含 <dt> 和 <dd> 标签。
  2. <dt> 和 <dd> 个数没有限制，通常是一个 <dt> 对应多个 <dd> 。

2.6 表单标签

收集用户信息，通常由 表单域、表单控件（也称表单元素） 和 提示信息 3 部分构成。

2.6.1 表单域

表单域是一个包含表单元素的区域。用 <form> 标签定义表单域.
在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。

<form action="url地址" method="提交方式" name="表单域名称">
  各种表单控件
</from>
属性 属性值 作用
action url 地址 指定接收并处理表单数据的服务器程序的 url 地址
method get/post 设置表单数据的提交方式
name 名称 指定表单的名称，以区分同一页面中的多个表单域

2.6.2 <input> 表单元素

用于收集用户信息。

<input type="属性值" />
属性值 描述
button 可点击按钮（多数情况下，用于通过JavaScript启动脚本）
checkbox 复选框
file 输入字段和“浏览”按钮，供文件上传
hidden 隐藏的输入字段
image 图像形式的提交按钮
password 密码字段，该字段中的字符被掩码
radio 单选按钮
reset 重置按钮，清除表单中所有数据
submit 提交按钮，把表单中数据发送到服务器
text 单行的输入字段，默认 20 个字符

<input> 标签的其他属性

属性 属性值 描述
name 用户自定义 定义 <input> 元素的名称
value 用户自定义 规定 <input> 元素的值
checked checked 规定此 <input> 元素首次加载时应当被选中
maxlength 正整数 规定输入字段中字符的最大长度
  1. name 和 value 是每个表单元素都有的属性值，主要给后台人员使用。
  2. name 表单元素的名字，要求 单选框 和 复选框 要有 相同的 name 值 。

2.6.3 <label> 标签

为 <input> 元素定义标注（标签）。用于绑定一个表单元素，当点击 <label> 标签内的文本时，浏览器自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验。

<label for="sex"> 男 </label>
<input type="radio" name="sex" value="男" id="sex">
<!-- 核心：<label> 标签的 for 属性应当与相关元素的 id 属性相同。 -->

2.6.4 <select> 表单元素

在页面中，如果有多个选项让用户选择，并且想要节约页面空间，便可使用 <select> 标签控件定义 下拉列表 。

<select>
  <option>选项一</option>
  <option>选项二</option>
  ...
</select>
  1. <select> 中至少包含一对 <option> 。
  2. 在 <option> 中定义 selected="selected" 时，当前项即为默认选中项。

2.6.5 <textarea> 表单元素

用于定义多行文本输入的控件，在用户输入内容较多时使用。

<textarea row="3" cols="20">输入文本内容</textarea>
posted @   王家V  阅读(9)  评论(0)  编辑  收藏  举报
相关博文：
· HTML5 基础学习
· HTML知识总结
· HTML基础
· 前端之HTML
· 前端学习1——HTML
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· Qt个人项目总结 —— MySQL数据库查询与断言
点击右上角即可分享
微信分享提示