HTML 基础

HTML文档的基本结构

核心标记说明

<html>…</html>：HTML文档的根标记，包含head和body两部分，所有内容需置于其中。
<body>…</body>：文档主体区域，网页显示的内容均放在此标记内。
<head>…</head>：文档头部，提供元数据，不显示在浏览器窗口。可包含<title>（页面标题）、<meta>（字符集、文档类型等）、外部脚本/样式链接等。

编写HTML网页文档的方法

HTML文档为纯文本文件，支持以下编辑器：

Visual Studio Code (VS Code)：微软开发的免费开源编辑器，跨平台支持。
Sublime Text：轻量级且功能强大，支持多重选择、代码折叠和自动补全。
Adobe Dreamweaver：专业网页设计工具，支持可视化编辑和代码编辑，提供实时预览等功能。
Brackets：Adobe开源编辑器，专注前端开发，支持实时预览。
Atom：GitHub开发的免费开源编辑器，跨平台，支持插件扩展和主题切换。
CoffeeCup HTML Editor：功能丰富，适用于初学者和专业开发者。
Pinegrow：支持响应式设计，可拖放可视化编辑，同步编辑HTML、CSS和JavaScript。

标记(Tags)和元素（Elements）

核心概念

标记：HTML中具有特定意义的符号，置于三角括号中，多数成对出现（开始/结束标记）。
元素：HTML标记与标记间内容的组合（如<p>文本</p>）。网页中所有内容均以元素形式存在。
元素唯一性：即使标记和内容相同，重复出现仍视为不同元素，浏览器会分配唯一ID。

示例：计算body内元素个数

<body>
  <a href="box.html"><img src="xxwlzx/cup.gif" border="0" align="left" /></a>
  <p>图片的说明内容</p><hr/>
  <p>图片的说明内容</p>
</body>

答案：5个（1个a元素、1个img元素、2个p元素、1个hr元素）。

带有属性的HTML元素的结构

元素属性需通过等号连接名称和值，多个属性用空格分隔。
示例：<img src="bird.jpg" alt="photo of bird">

常见错误及修正

错误：<img "birthday.jpg " /> → 缺少src属性名
正确：<img src="birthday.jpg" />
错误：<i> Congratulations! <i> → 结束标记错误
正确：<i> Congratulations! </i>
错误：<a href="file.html">linked text</a href="file.html"> → 结束标记含属性
正确：<a href="file.html">linked text</a>
错误：<p>This is a new paragraph<\p> → 斜杠方向错误
正确：<p>This is a new paragraph</p>

HTML标记的分类

分类总表

分类	标记名称	核心作用与说明	语法示例
头部标记	title	定义网页标题，影响SEO	`<title>我的网页标题</title>`
	meta	提供文档元数据（字符编码、关键词等）	`<meta charset="UTF-8">` / `<meta name="keywords" content="HTML,教程">`
	link	关联外部资源（CSS、图标等）	`<link rel="stylesheet" href="style.css">` / `<link rel="icon" href="favicon.ico">`
	style	嵌入内部CSS样式	`<style>body { color: #333; }</style>`
	script	引入或嵌入JavaScript代码	`<script src="script.js"></script>` / `<script>alert('Hello');</script>`
文本标记	font（废弃）	设置文本字体、大小、颜色（推荐用CSS替代）	`<font face="微软雅黑" size="3" color="red">文本</font>`
	b	文本加粗（仅视觉效果）	`<b>加粗文本</b>`
	i	文本斜体（仅视觉效果）	`<i>斜体文本</i>`
	u	文本下划线（仅视觉效果）	`<u>带下划线文本</u>`
	strong	文本加粗（语义强调，内容重要）	`<strong>重要文本</strong>`
段落标记	p	定义段落，自动保留间距	`<p>这是一个段落</p>`
	hn（n=1-6）	标题层级（h1最高，h6最低）	`<h1>一级标题</h1>` / `<h3>三级标题</h3>`
	pre	保留文本原始格式（空格、换行）	`<pre>function test() { return 1; }</pre>`
	marquee（废弃）	文本/图像滚动（推荐用CSS/JS替代）	`<marquee direction="left">滚动文本</marquee>`
	br	强制换行（单标签）	`<p>第一行<br>第二行</p>`
	hr	插入水平分隔线（单标签）	`<hr>`
列表标记	ul	无序列表	`<ul><li>列表项1</li><li>列表项2</li></ul>`
	ol	有序列表（数字/字母编号）	`<ol type="A"><li>选项1</li><li>选项2</li></ol>`
	li	列表项（嵌套于ul/ol中）	`<li>列表内容</li>`
	dl	定义列表（术语-解释结构）	`<dl><dt>HTML</dt><dd>超文本标记语言</dd></dl>`
	dt	定义列表中的“术语”	`<dt>CSS</dt>`
	dd	定义列表中“术语”的“解释”	`<dd>层叠样式表</dd>`
超链接标记	a	超链接（页面跳转、锚点、邮箱等）	`<a href="page.html" target="_blank">链接文本</a>` / `<a href="#top">回到顶部</a>`
	map	图像映射（划分可点击区域）	`<map name="imgMap"><area ...></map>`
	area	图像映射中的可点击区域	`<area shape="rect" coords="0,0,100,50" href="link.html" alt="区域">`
图像及媒体	img	插入图像	`<img src="pic.jpg" alt="图片描述" width="200">`
	embed	嵌入外部媒体（视频、音频、插件）	`<embed src="video.mp4" type="video/mp4">`
	object	嵌入外部资源（PDF、插件），支持降级内容	`<object data="doc.pdf"><p>不支持PDF预览</p></object>`
表格标记	table	表格容器	`<table border="1"><tr><td>单元格</td></tr></table>`
	tr	表格中的一行	`<tr><th>表头</th><td>数据</td></tr>`
	td	表格中的普通单元格	`<td>单元格内容</td>`
	th	表格中的表头单元格（居中加粗）	`<th>姓名</th>`
	tbody	表格主体部分（与thead/tfoot配合）	`<tbody><tr><td>数据行</td></tr></tbody>`
表单标记	form	表单容器（数据提交）	`<form action="submit.php" method="post">...</form>`
	input	表单控件（文本、密码、按钮等）	`<input type="text" name="username">` / `<input type="checkbox" checked>`
	textarea	多行文本输入框	`<textarea rows="5" cols="30">默认文本</textarea>`
	select	下拉选择框	`<select><option>选项1</option></select>`
	option	下拉选择框中的选项	`<option value="1" selected>默认选项</option>`
	fieldset	表单元素分组	`<fieldset><legend>用户信息</legend>...</fieldset>`
	legend	fieldset分组的标题	`<legend>登录信息</legend>`
框架标记	frameset（废弃）	框架集（分割页面为多个框架，替代body）	`<frameset cols="20%,*"><frame src="left.html"></frameset>`
	frame（废弃）	框架集中的单个框架	`<frame src="main.html" name="mainFrame">`
	iframe	嵌入式框架（页面中嵌入另一个文档）	`<iframe src="https://example.com" width="500" height="300"></iframe>`
容器标记	div	块级容器（页面布局分区）	`<div class="header">头部内容</div>`
	span	行内容器（包裹行内元素/文本）	`<p>这是<span style="color:red">红色</span>文本</p>`

标记出现形式分类

单标记：<br />、<hr />、<img />、<input />、<meta />、<link />
配对标记：大部分标记（如<p>…</p>、<div>…</div>）
成组标记：table、form、ul、ol、dl、frameset、fieldset及其子标记

行内元素和块级元素

核心区别

行内元素(inline)：从左到右并排排列，窗口容纳不下时换行。
块级元素(block)：占据一整行，元素间自动换行（从上到下排列）。

嵌套规则

块级元素可包含行内元素或其他块级元素。
行内元素仅可包含行内元素，不可包含块级元素。
<p>元素内部不能包含其他块级元素。

常见元素分类

行内元素：a、img、font、b、i、u、span、input
块级元素：p、div、hn、pre、hr、ul、ol、li、form

记忆法

行内元素：所有文本标记、链接标记、图像标记。
块级元素：所有段落标记、列表标记。

示例

<body>
  <b>粗体文字</b>
  <p>图片的标题</p><p>图片的说明内容</p>
  <b>粗体文字</b>
  <b>粗体文字</b>
</body>

显示效果：

常见的HTML标记的属性

公共属性

id、title、border（边框）、src（链接文件路径）、style（引入CSS行内样式）、name

特有属性

<a>：href（链接目标）、target（窗口打开方式）
<input>：type（元素类型）、size（含义随type变化）

HTML存在的问题和Web标准

HTML的问题

HTML最初用于描述文档结构，后新增外观控制相关标记和属性，导致结构与表现混淆，两者均难以优化。

Web标准核心

网页由结构、表现、行为组成，实现三者分离：

结构：用XHTML（适配XML的HTML新版本）描述文档语义。
表现：用CSS控制文档外观。
行为：用JavaScript实现交互与操作效果。

各部分定义

内容：页面传达的核心信息（数据、文档、图片等）。
如：忆江南(1)唐.白居易江南好，风景旧曾谙。(2)日出江花红胜火，春来江水绿如蓝，(3)能不忆江南。作者介绍772－846 ，字乐天，太原人。唐德宗朝进士
结构：对内容进行格式化分类（标题、段落、列表等）。
标题忆江南(1)
作者唐.白居易
正文
江南好，风景旧曾谙。(2)
日出江花红胜火，春来江水绿如蓝，(3)
能不忆江南。
节1作者介绍
772－846 ，字乐天，太原人。唐德宗朝进士
表现：改变内容外观的样式（字体、颜色、背景等）。
行为：内容对事件的响应（鼠标点击、表单验证等）。

网页的四层结构

Web标准的实现语言

结构标准语言：XML、XHTML、HTML
表现标准语言：CSS（Cascading Style Sheets，层叠样式表）
行为标准语言：JavaScript

XHTML与HTML的区别

XHTML文档第一行必须有DOCTYPE声明（如过渡型、严格型、框架型）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

可通过xmlns定义命名空间（如<html xmlns="http://www.w3.org/1999/xhtml">），支持自定义标记。
必须包含html、head、body、title元素。
额外标记要求：
- 标记名和属性名必须小写。
- 属性值必须用双引号包裹。
- 所有标记（含单标记）必须封闭。
- 不允许省略属性值（如<input checked />错误）。

网页中添加文本的方法

直接写文本

<div>文本</div>、<td>文本</td>、<body>文本</body>、<li>文本</li>

段落标记`<p>`

格式化文本，段落间自动分行：

<p>第一段文本</p>
<p>第二段文本</p>

标题标记`<hn>`（n=1-6）

定义标题字体，n值越大字越小，文本加粗显示：

<h1>第1号标题字体</h1>
<h3>第3号标题字体</h3>
<h5 align="center">第5号标题字体（居中）</h5>

预格式化标记`<pre>`

保留文本原始格式（空格、换行、定位符）：

<pre>
  网页设计师这一职业在今后来说还是有需求的。
    因为随着网络越来越普及，
        像我国的房地产市场
</pre>

示例：标题与段落组合

<body>
  <h1 align="center">1号标题</h1>
  <p>第一段</p>
  <h3>3号标题</h3>
  <p>第二段</p>
  <h5 align="right">5号标题</h5>
  <p align="right">第三段</p>
</body>

文本的换行与不换行

强制换行`<br />`

<body>
  电子商务顾名思义就是在internet上做生意，<br />商品展示，广告宣传、发布供求信息等活动实现的途径就是网页。
</body>

强制不换行`<nobr>`

常用于英文人名等场景：

<nobr>Bill Gates</nobr>

综合示例

<body>
    <h3>以下是直接写文本的情况：</h3>
    星期一、星期二、星期三、星期四、
    星期五、星期六、星期日。
    <h3>以下是使用了三个换行标记的情况：</h3>
    星期一、星期二、<br />星期三、星期四、<br />
    星期五、星期六、星期日。<br />
    <h3>以下使用分段标记（分为两段）：</h3>
    <p>星期一、星期二、星期三、</p>
    <p>星期四、星期五、星期六、星期日。</p>
    <h3>以下使用预格式：</h3>
    <pre>    星期一、星期二、星期三、星期四、
    星期五、星期六、星期日。  </pre>
</body>

文本中的空格

默认规则

标记（<pre>除外）内字符前的空格被忽略。
字符间空格仅保留1个，回车视为空格。
块级元素之间忽略所有空格。

多个空格输入

需插入 （表示一个半角空格）：

<body>
    图书管理系统：<br/>
    1.添加图书 <br/>
    2.查询图书 <br/>
    3.删除图书 <br/>
    4.修改图书 <br/>
    
    图书管理系统：<br/>
    &nbsp; &nbsp;1.添加图书 <br/>
    &nbsp; &nbsp; &nbsp; &nbsp;2.查询图书 <br/>
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;3.删除图书 <br/>
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;4.修改图书 <br/>
</body>

文本中的转义字符

核心规则

HTML中部分字符（如<）有特殊含义，需用转义字符显示，格式为&字符专用名称;或&#字符代号;。

常用转义字符表

常用标点与符号

字符	转义代码（实体名称）	转义代码（实体编号）	说明
'	'	'	单引号
"	"	"	双引号
&	&	&	和号
<	<	<	小于号
>	>	>	大于号
®	®	®	注册商标符号
©	©	©	版权符号
™	™	™	商标符号
§	§	§	章节符号
¶	¶	¶	段落符号

数学符号

字符	转义代码（实体名称）	转义代码（实体编号）	说明
±	±	±	正负号
×	×	×	乘号
÷	÷	÷	除号
=	=	=	等号
≠	≠	≠	不等于号
≤	≤	≤	小于等于号
≥	≥	≥	大于等于号
∞	∞	∞	无穷大符号
√	√	√	平方根符号

货币符号

字符	转义代码（实体名称）	转义代码（实体编号）	说明
¥	¥	¥	日元符号
$	$	$	美元符号
€	€	€	欧元符号
£	£	£	英镑符号
¢	¢	¢	分币符号

空格与排版符号

字符	转义代码（实体名称）	转义代码（实体编号）	说明
普通空格			不换行空格
半角空格			半个字符宽度空格
全角空格			一个字符宽度空格
窄空格			窄空格（1/6em）
换行符			换行符

箭头符号

字符	转义代码（实体名称）	转义代码（实体编号）	说明
←	←	←	左箭头
→	→	→	右箭头
↑	↑	↑	上箭头
↓	↓	↓	下箭头
↔	↔	↔	左右箭头
↵	↵	↵	回车箭头

示例

<body>
  <div>
    &lt;div>是一个块级标签
  </div>
</body>

显示效果：

跑马灯`<marquee>`标记（已过时）

使文本在浏览器中滚动，核心属性如下：

behavior：滚动方式（alternate来回滚动、scroll循环滚动、slide滚动停止）。
direction：滚动方向（上下左右）。
loop：滚动次数（0为无限滚动）。
scrollamount：滚动速度。
scrolldelay：滚动间隔时间。

示例：

<marquee direction="up" behavior="scroll" scrollamount="10" scrolldelay="4" loop="-1" align="middle" onmouseover=this.stop() onmouseout=this.start() height="120">
  &nbsp;&nbsp;测试:网页设计与制作学习：可以将swf文件下载下来用flash播放器全屏播放以达到最好效果，也可以在IE浏览器中按F11键达到全屏效果.
</marquee>

水平线标记`<hr />`

插入水平线，核心属性：

size：水平线厚度。
color：水平线颜色。
width：水平线宽度（默认单位为像素）。
noshade：无阴影效果。

示例：

<body>
  1111
  <hr size="3" width="85%" color="red" noshade="noshade" align="center" />
  2222
</body>

文本修饰标记

`<font>`标记

定义文字字体、大小、颜色：

<font face="微软雅黑" size="3" color="#0066CC">文本内容</font>

face：字体名称。
size：字体大小（正整数，值越大字越大）。
color：字体颜色。

加粗、倾斜与下划线

加粗：<b>加粗文本</b>、<strong>重要文本</strong>
倾斜：<i>斜体文本</i>
下划线：<u>带下划线文本</u>
组合修饰：<b><font color="red" size="5">红色五号粗体文本</font></b>

上标`<sup>`和下标`<sub>`

用于数学公式或分子式：

H<sub>2</sub>O  X<sup>2</sup>

显示效果：

由于字体标记属于对文本外观进行修饰的标记，是由于当时CSS语言尚未出现时html定义的表现的范畴，随着CSS的出现，这些表现功能均可以由CSS完成，所以不含有语义的字体标记慢慢过时了。

列表标记

HTML支持无序列表、有序列表、定义列表三种类型。

无序列表`<ul>`+`<li>`

<ul id="nav">
  <li><a href="">文章</a>
    <ul>
      <li><a href="">CSS教程</a></li>
      <li><a href="">DOM教程</a></li>
      <li><a href="">XML教程</a></li>
    </ul>
  </li>
  <li><a href="">参考</a>
    <ul>
      <li><a href="">XHTML</a></li>
      <li><a href="">XML</a></li>
      <li><a href="">CSS</a></li>
    </ul>
  </li>
</ul>

有序列表`<ol>`+`<li>`

<ul id="nav">
  <li><a href="">文章</a>
    <ol>
      <li><a href="">CSS教程</a></li>
      <li><a href="">DOM教程</a></li>
      <li><a href="">XML教程</a></li>
      <li><a href="">Flash教程</a></li>
    </ol>
  </li>
</ul>

定义列表`<dl>`+`<dt>`+`<dd>`

<dl>
  <dt>湖南城市</dt>
  <dd>长沙</dd>
  <dd>衡阳</dd>
  <dd>常德</dd>
</dl>
<dl>
  <dt>湖北城市</dt>
  <dd>武汉</dd>
  <dd>襄樊</dd>
  <dd>宜昌</dd>
</dl>

超链接标记`<a>`

超链接通过URL定位目标信息，实现页面跳转、资源访问等功能。

URL分类

绝对URL：完整路径（如http://www.hyshopgo.com/download/download.gif）。
相对URL：相对于当前页面的路径（同目录news.htm、子目录yule/news.htm、上级目录../news.htm）。

超链接的种类

按源对象划分

文本链接：<a href="index.htm" target="_blank">首页</a>
图像链接：<a href="index.htm"><img src="images/info.gif" title="返回首页" border="0" /></a>（border="0"去除默认边框）
文本图像混合链接：<a href="brand1.htm"><img src="green.gif" /><br />格力空调1型</a>

热区链接：

<img src="images/163227.png" width="600" height="518" border="0" usemap="#Map" />
<map name="Map" id="Map">
  <area shape="rect" coords="51,131,188,183" href="default.asp" />
  <area shape="rect" coords="313,129,450,180" href="#h3" />
</map>

按`href`取值划分

链接到网页/文件：
- 内部链接：<a href="../index.htm">返回首页</a>
- 外部链接：<a href="http://www.163.com">网易网站</a>
- 下载链接：<a href="software/wybook.rar">点击下载</a>
电子邮件链接：<a href="mailto:xiaoli@163.com">给我留言</a>（前缀mailto:）

锚链接（页内/页间跳转）：

<a id="yyyy"></a> <!-- 定义锚点 -->
<a href="#yyyy">跳转到锚点</a> <!-- 页内跳转 -->
<a href="intro.htm#yyyy">跳转到其他页面锚点</a> <!-- 页间跳转 -->

空链接和脚本链接：
- 空链接：<a href="#">返回顶部</a>
- 脚本链接：<a href="JavaScript:alert('确定删除吗')">删除</a>

超链接的打开方式（`target`属性）

_self：本窗口打开（默认）。
_blank：新窗口打开。
_parent：父窗口打开（框架页中使用）。
_top：整个窗口打开（框架页中使用）。

超链接的`title`属性

鼠标停留时显示说明文字：

<p><a href="定义列表.html" title="格力太阳能喜获国家免检产品称号">格力太阳能喜获&#8230;</a></p>

超链接制作原则

优先使用相对链接，避免绝对链接。
链接目标尽量简化（如http://www.hynu.cn而非完整路径）。

图像标记`<img>`

插入方式

直接插入：<img src="图像文件名" />（可被拖动选中）。
背景嵌入：通过CSS实现（无法被选中，推荐使用）。

支持的图像格式

JPG：适合大尺寸真彩色图片，有损压缩。
GIF：适合小尺寸图片，无损压缩，支持动画和全透明。
PNG：支持Alpha透明，IE6不兼容。

核心属性

img的属性	含义
src	图片文件的URL地址
alt	图片无法显示时的替换文字
title	鼠标停留时的说明文字
align	图片对齐方式（默认基线对齐）
width、height	图片在网页中的宽和高

单元格中插入图像（无间隙）

<td width="768" height="132"><img src="images/info.gif" /></td>

要求：单元格宽高与图片一致，<td>与</td>间无空格/换行。

多媒体元素插入标记

插入音频

<body>
  <audio src="1.mp3" controls="controls" autoplay="autoplay" loop="loop">
  </audio>
</body>

插入视频

<body>
  <video src="1.mp4" width="276" height="218" autoplay="false" controls="controls"></video>
</body>

核心属性表

通用属性

属性名	作用说明	取值示例
src	指定媒体文件路径	src="video.mp4" / src="music.mp3"
controls	显示默认播放控件	无需取值
autoplay	页面加载后自动播放	无需取值
muted	默认静音播放	无需取值
loop	自动循环播放	无需取值
preload	预加载策略	auto / none / metadata
width/height	播放容器宽高	width="600" / height="400"

video专属属性

属性名	作用说明	取值示例
poster	视频封面图	poster="cover.png"
playsinline	页面内播放（适配移动端）	无需取值
controlslist	自定义控件	controlslist="nodownload"

audio专属属性

属性名	作用说明	取值示例
controlslist	自定义音频控件	controlslist="nodownload"

容器标记`<div>`和`<span>`

核心区别

<div>：块级容器，默认占据整行，用于页面布局分区。
<span>：行内容器，占据宽度由内容决定，用于包裹行内元素/文本。

示例

<body>
  <div style="background-color:#3399ff">块状区域1</div>
  <div style="background-color:#99ccff">块状区域2</div>
  <span style="background-color:#ffccff">行间区域1</span>
  <span style="background-color:#993399">行间区域2</span>
</body>

显示效果：

表格标记`<table>`、`<tr>`、`<td>`

表格用于网页布局，核心标记为<table>（容器）、<tr>（行）、<td>（单元格）。

表格基本结构

<body>
    <table>
        <tr>
            <th>Menu item</th>
            <th>Calories</th>
            <th>Fat(g)</th>
        </tr>
        <tr>
            <td>Chicken Soup</td>
            <td>120</td>
            <td>2</td>
        </tr>
        <tr>
            <td>Caesar Salad</td>
            <td>400</td>
            <td>26</td>
        </tr>
    </table>
</body>

`<table>`的常见属性

table的属性	含义
border	边框宽度
bordercolor	边框颜色
bgcolor	背景色
background	背景图像
cellspacing	单元格间距
cellpadding	单元格内边距
width/height	表格宽高（像素或百分比）
align	水平对齐方式

`<td>`的常见属性

td的属性	含义
bgcolor	单元格背景色
background	单元格背景图像
align/valign	内容水平/垂直对齐方式
colspan/rowspan	合并列/合并行
width/height	单元格宽高

示例 1

<body>
    <table border="20">
        <tr>  
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
    </table>
    <br />
    <table border="0">
        <tr>  
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
    </table>
    <br />
    <table border="20" bordercolor="#0099FF">
        <tr>  
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
    </table>
    <br />
    <table border="20" bgcolor="#9933CC"  bordercolor="#0099FF">
        <tr>  
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
    </table>
    <br />
    <table border="20"  cellspacing="10" bordercolor="#0099FF">
        <tr>  
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
    </table>
    
</body>

示例 2

<body>
    <table border="20" align="center" cellpadding="10" cellspacing="10" bordercolor="#0099FF">
        <tr>  
            <td bgcolor="#99CCFF">row 1, cell 1</td>
            <td bgcolor="#99CCFF">row 1, cell 2</td>
        </tr>
        <tr bgcolor="#99CCFF">  
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
    </table>
    <br />
    <table border="20" align="center" cellpadding="10" cellspacing="10" bordercolor="#0099FF">
        <tr>  
            <td bgcolor="#99CCFF">row 1, cell 1</td>
            <td bgcolor="#99CCFF">row 1, cell 2</td>
        </tr>
        <tr>  
            <td bgcolor="#99CCFF">row 1, cell 1</td>
            <td bgcolor="#99CCFF">row 1, cell 2</td>
        </tr>
    </table>
    <br />
    <table border="20" align="center" cellpadding="10" cellspacing="10" bordercolor="#0099FF">
        <tbody bgcolor="#99CCFF">
            <tr>  
                <td>row 1, cell 1</td>
                <td>row 1, cell 2</td>
            </tr>
            <tr>  
                <td>row 1, cell 1</td>
                <td>row 1, cell 2</td>
            </tr>
        </tbody>            
    </table>
</body>

表格标题`<caption>`

<body>
    <table border="1">
        <caption>Nutritional Information</caption>
        <tr>
            <th>Food</th>
            <th>Calories</th>
            <th>Fat</th>
            <th>Carbohydrates</th>
            <th>Protein</th>
        </tr>
        <tr>
            <td>Apple</td>
            <td>95</td>
            <td>0.2</td>
            <td>25.6</td>
            <td>0.0</td>
        </tr>
        <tr>
            <td>Banana</td>
            <td>89</td>
            <td>0.3</td>
            <td>23.1</td>
            <td>0.2</td>
        </tr>
    </table>
</body>

表格`rules`属性

控制边框显示方式：

all：显示所有边框。
cols：仅显示列边框。
rows：仅显示行边框。

示例：

<body>
    <table rules="all">
        <tr>  
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
    </table>
    <br />
    <table rules="cols">
        <tr>
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
    </table>
    <br />
    <table rules="rows">
        <tr>
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
    </table>
    
</body>

表单标记`form`、`input`、`select`、`option`

表单用于收集用户信息，实现网页互动功能，需配合服务器端程序处理数据。

表单基本结构

<body>
  <form name="form1" method="post" action="a.asp">
    <p>请输入您的姓名:<br><input type="text" name="name" id="name"></p>
    <p>请问你的性别:<br>
      <input type="radio" name="sex" value="male">男
      <input type="radio" name="sex" value="female">女
    </p>
    <p>你喜欢做些什么:<br>
      <input type="checkbox" name="hobby" value="book">看书
      <input type="checkbox" name="hobby" value="net">上网
      <input type="checkbox" name="hobby" value="sleep">睡觉
    </p>
    <p>我要留言:<br><textarea name="comments" id="comments" cols="30" rows="4"></textarea></p>
    <p><input type="submit" value="Submit"></p>
  </form>
</body>

表单与表格组合（排版优化）

<body>
  <form name="form1" method="post" action="a.asp">
    <table width="88%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td align="center">用户名：</td>
        <td height="28"><input name="user" type="text" maxlength="10" size="12" /></td>
      </tr>
      <tr>
        <td height="28" align="center">密 码 ： </td>
        <td><input name="pwd" type="password" value="" size="12" /></td>
      </tr>
      <tr>
        <td height="32">&nbsp; <input type="submit" name="Submit" value="提交" /></td>
        <td>&nbsp; <input type="reset" name="Submit2" value="重置" /></td>
      </tr>
    </table>
  </form>
</body>

核心标记说明

`<form>`标记属性

属性	含义
action	处理表单数据的动态网页URL
method	数据提交方式（post/get）
enctype	编码类型（文件上传时设为multipart/form-data）
name/id	表单名称（接收页面仅识别name属性）
target	接收页打开方式（同`<a>`标记）

`<input>`标记（`type`属性取值）

type属性值	描述
text	文本域
password	密码域（输入内容隐藏）
file	文件域（用于上传文件）
checkbox	复选框（可多选）
radio	单选框（同一组name值相同，仅可选一个）
button	普通按钮（需配合JavaScript）
submit	提交按钮（提交表单数据）
reset	重置按钮（恢复初始值）
hidden	隐藏域（存储隐藏数据）
image	图像按钮（功能同submit）

单选框

<body>
    <input type="radio" name="gender" value="F"/>女性  
    <input type="radio" name="gender" value="M" checked="checked" />男性
</body>

checked属性设定初始时单选按钮哪项处于选定状态，同一组单选按钮name属性的值必须相同，这样这一组单选框中只有一个能被选中。

复选框

<body>
    <input name="checkbox" type="checkbox" value="1" checked="checked" />看书  
    <input name="checkbox2" type="checkbox" value="2" />上网  
    <input type="checkbox" name="checkbox3" value="3" checked="checked"/>听音乐
</body>

文件域

<input type="file" name=“upfile" />

供上传文件用，需要服务器端的上传组件配合。文件域对表单标记form有特殊要求，method必须设为post，MIME类型必须为multipart/form-data

按钮

提交按钮(type="submit")
将表单中所有具有name属性的元素内容发送到服务器端指定的应用程序
重置按钮(type="reset")
用户在填写表单时，若希望重新填写，单击该按钮将使全部表单元素的值还原为初始值
普通按钮(type="button")
该按钮没有内在行为，但可用javascript为其指定动作

图像域

即图像按钮，用一张图片做按钮，功能和提交按钮相同

<input type="image" name=“tijiao" src="images/yjt.gif" />

`<select>`和`<option>`标记（下拉/列表框）

<body>
  <select name="select" id="select" size="3" multiple>
    <option value="1">湖南</option>
    <option value="2">广东</option>
    <option value="3">江苏</option>
    <option value="4">四川</option>
  </select>
</body>

size：列表框显示行数（无则为下拉框）。
multiple：允许多选。

`<textarea>`标记（多行文本域）

<textarea name="comments" cols="40" rows="4" wrap="virtual">默认文本</textarea>

cols：每行字符数。
rows：显示行数。
wrap：换行方式（virtual/physical/nowrap）。

`<fieldset>`和`<legend>`标记（字段集分组）

<body>
    <form>
        <fieldset>
            <legend>个 人 资 料</legend>
            查询：<input type="text" name="seach" size=20 onfocus="this.value=''" value="请输入关键字" />
            <input type="radio" name="gender" value="F" />女性
            <input type="radio" name="gender" value="M" checked="checked" />男性
        </fieldset>
        <input name="checkbox" type="checkbox" value="1" checked="checked" />看书
        <input name="checkbox2" type="checkbox" value="2" />上网
        <input type="checkbox" name="checkbox3" value="3" checked="checked" />听音乐
    </form>
</body>

头部标记`meta`、`title`、`link`

`<meta>`标记（元信息）

`name`属性

关键字：<meta name="keywords" content="science, relationships, entertaiment">
网站描述：<meta name="description" content="This page is about science, education">

`http-equiv`属性

自动刷新：<meta http-equiv="Refresh" content="2；URL=http://www.webjx.com">（2秒后跳转）
页面过渡动画：<meta http-equiv="Page-Enter" content="revealTrans(duration=5.0, transition=20)">

`<link>`标记（链接外部资源）

链接CSS：<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
链接图标：<link rel="icon" href="favicon.ico" type="image/x-icon" />

`<title>`标记（网页标题）

内容显示在浏览器标题栏，影响SEO：

<title>我的HTML学习笔记</title>

`<base>`标记（基链接）

设置网页中所有相对链接的基准路径：

<base href="http://www.xia8.net/" target="_blank">

posted @ 2025-11-25 09:20 Jing61 阅读(5) 评论(0) 收藏举报

刷新页面返回顶部

Jing61

HTML 基础

HTML 基础

HTML文档的基本结构

核心标记说明

编写HTML网页文档的方法

标记(Tags)和元素（Elements）

核心概念

示例：计算body内元素个数

带有属性的HTML元素的结构

常见错误及修正

HTML标记的分类

分类总表

标记出现形式分类

行内元素和块级元素

核心区别

嵌套规则

常见元素分类

记忆法

示例

常见的HTML标记的属性

公共属性

特有属性

HTML存在的问题和Web标准

HTML的问题

Web标准核心

各部分定义

网页的四层结构

Web标准的实现语言

XHTML与HTML的区别

网页中添加文本的方法

直接写文本

段落标记<p>

标题标记<hn>（n=1-6）

预格式化标记<pre>

示例：标题与段落组合

文本的换行与不换行

强制换行<br />

强制不换行<nobr>

综合示例

文本中的空格

默认规则

多个空格输入

文本中的转义字符

核心规则

常用转义字符表

常用标点与符号

数学符号

货币符号

空格与排版符号

箭头符号

示例

跑马灯<marquee>标记（已过时）

水平线标记<hr />

文本修饰标记

<font>标记

加粗、倾斜与下划线

上标<sup>和下标<sub>

列表标记

无序列表<ul>+<li>

有序列表<ol>+<li>

定义列表<dl>+<dt>+<dd>

超链接标记<a>

URL分类

超链接的种类

按源对象划分

按href取值划分

超链接的打开方式（target属性）

超链接的title属性

超链接制作原则

图像标记<img>

插入方式

支持的图像格式

核心属性

单元格中插入图像（无间隙）

多媒体元素插入标记

插入音频

插入视频

核心属性表

通用属性

段落标记`<p>`

标题标记`<hn>`（n=1-6）

预格式化标记`<pre>`

强制换行`<br />`

强制不换行`<nobr>`

跑马灯`<marquee>`标记（已过时）

水平线标记`<hr />`

`<font>`标记

上标`<sup>`和下标`<sub>`

无序列表`<ul>`+`<li>`

有序列表`<ol>`+`<li>`

定义列表`<dl>`+`<dt>`+`<dd>`

超链接标记`<a>`

按`href`取值划分

超链接的打开方式（`target`属性）

超链接的`title`属性

图像标记`<img>`

容器标记`<div>`和`<span>`

表格标记`<table>`、`<tr>`、`<td>`

`<table>`的常见属性

`<td>`的常见属性

表格标题`<caption>`

表格`rules`属性

表单标记`form`、`input`、`select`、`option`

`<form>`标记属性

`<input>`标记（`type`属性取值）

`<select>`和`<option>`标记（下拉/列表框）

`<textarea>`标记（多行文本域）

`<fieldset>`和`<legend>`标记（字段集分组）

头部标记`meta`、`title`、`link`

`<meta>`标记（元信息）

`name`属性

`http-equiv`属性

`<link>`标记（链接外部资源）

`<title>`标记（网页标题）

`<base>`标记（基链接）