HTML入门笔记

概述

HTML（超文本标记语言—HyperText Markup Language）是构成 Web 世界的基础，是一种用来告知浏览器如何组织页面的标记语言。

超文本 Hypertext：指连接单个或多个网站间的网页链接，通过这些链接可以访问互联网中的内容。

标记 Markup：用于注明文本、图片等内容，以便在浏览器中正确显示，例如 <head>、<body> 等。

网页的构成

HTML：通常用来定义网页内容的含义和基本结构
CSS：通常用来描述网页的表现与展示效果
JavaScript：通常用来执行网页的功能与行为

组成

属性

HTML 标签可以拥有属性：

属性：属于标签，用于修饰标签，提供额外的效果。
定义：属性一般定义在起始标签内部。
格式：以属性=属性值的形式出现。
引号：属性值通常用 '' 或 "" 括起来，不加引号也是可以的（但不建议）。

例如：

<h1 align="center">开始学习 Java Web</h1>

在这个例子中，align 属性表示水平对齐方式，赋值为 center 表示居中。

结构

文档结构包含以下几个主要部分：

1、文档声明：<!DOCTYPE html> 声明当前 HTML 版本，指示浏览器以 HTML5 渲染页面。
2、html 根标签：所有内容都需放在 <html> 标签内部。
3、文档头部配置：使用 <head> 标签定义页面的配置信息，包括外部文件引入和元数据。

<meta charset="utf-8">：设置文档字符集为 UTF-8。
<title>：定义文档标题，在浏览器标签中显示，并用于页面收藏。

4、文档显示内容：<body> 标签内的内容将在浏览器中显示。

HTML语法

注释方式

在 HTML 中，注释的语法是使用 。这段内容在浏览器中不会被显示，主要用于代码说明或记录。

    <!-- <h1>hello world</h1> -->
    <h1>hello world</h1>

基本元素

空元素

一些元素只有一个标签，称为空元素。它们在开始标签中进行关闭。例如：

第一行文档<br/> 
第二行文档<br/>

嵌套元素

将元素放置在其他元素内部的行为被称为嵌套。例如：

<h2><u>二级标题</u></h2>

块元素与行内元素

在 HTML 中，有两种重要的元素类别：块级元素和行内元素。

块级元素：独占一行。块级元素以块的形式展示，会导致换行。常见的块级元素包括 <p>、<hr>、<li>、<div> 等。
行内元素：不会导致换行。行内元素通常出现在块级元素内部，只环绕文档内容的一小部分。常见的行内元素有 <b>、<a>、<i>、<span> 等。

注意：块级元素不能嵌套在行内元素中，但可以嵌套在其他块级元素中。

常用标签

<div>：一个通用的块级内容容器，没有特殊语义，通常用于分组和样式化。常用属性包括 id、style 和 class。
<span>：一个通用的行内内容容器，也没有特殊语义，常用于对元素进行样式处理。

基本属性

标签属性用于扩展标签，提供额外信息，不会直接出现在内容中，但可以改变标签的行为或提供数据。属性总是以 name="value" 的格式展示。

属性规则

属性名：同一标签中，属性名不得重复。
大小写：属性和属性值对大小写不敏感。建议使用小写。
引号：双引号最常用，但单引号也可以。

常用属性

属性名	作用
class	定义元素类名，用于选择和访问特定元素
id	定义元素唯一标识符，在整个文档中必须唯一
name	定义元素名称，可用于提交表单的字段
value	定义元素内显示的默认值
style	定义CSS样式，覆盖之前设置的样式

特殊字符

在HTML中，某些字符具有特殊含义，因此需要使用字符实体来表示。

原义字符	等价字符引用
<	`<`
>	`>`
"	`"`
'	`'`
&	`&`
空格	` `

文本标签

文本内容标签用于设置文字的基本样式和结构。

标签名	作用
p	表示文本的一个段落
h	表示文档标题，`<h1>–<h6>`，呈现六个不同的级别的标题
hr	表示段落级元素之间的主题转换，通常显示为水平线
li	表示列表里的条目，常用于 `ul` 和 `ol`
ul	表示无序列表，可包含多个元素，无编号显示
ol	表示有序列表，通常渲染为带编号的列表
em	表示文本着重，通常用斜体显示
strong	表示文本重要性，通常用粗体显示
i	表示斜体
b	表示加粗文本

使用文本标签的效果示例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>文本标签示例</title>
</head>
<body>

<h1>这是主标题</h1>
<p>这是一个段落，包含 <strong>重要信息</strong> 和 <em>强调文本</em>。</p>
<hr>
<h2>这是副标题</h2>
<p>以下是一个无序列表：</p>
<ul>
    <li>无序列表项 1</li>
    <li>无序列表项 2</li>
    <li>无序列表项 3</li>
</ul>
<p>以下是一个有序列表：</p>
<ol>
    <li>有序列表项 1</li>
    <li>有序列表项 2</li>
    <li>有序列表项 3</li>
</ol>

<p>这是 <i>斜体文本</i> 和 <b>加粗文本</b> 的示例。</p>

</body>
</html>

图片标签

<img> 标签用于在网页中显示图片。以下是使用该标签的示例及其属性说明：

<img src="../img/b.jpg" width="400" height="200" alt="描述文本" title="悬停提示文本" />

属性说明

属性名	作用
src	指定图片的路径。
title	鼠标悬停时显示的提示文本。
alt	图片无法显示时的替代文本描述。
height	指定图片的高度。
width	指定图片的宽度。

超链接标签

超链接使用 <a> 标签，主要用于实现页面之间的跳转。以下是基本用法示例：

<a href="https://www.baidu.com/" target="_blank" title="点击访问示例网站">访问示例网站</a>

属性说明

属性名	作用
href	指定链接目标的URL。
target	指定链接打开的方式（如新窗口或同窗口）。
title	鼠标悬停时显示的提示文本。

表单标签

表单概述

<form> 标签是一个用于收集用户输入并提交给 Web 服务器的容器。

<form>
    <!-- 表单元素 -->
</form>

常用属性：

action：指定表单提交的 URL。
method：提交方式，常见值为 GET 和 POST。
autocomplete：自动补全输入内容。

GET 和 POST 的区别

GET：数据附加在 URL 中，适合获取数据；不安全且有长度限制。
POST：数据在表单体中，适合传输敏感或大量数据；较安全且无大小限制。

表单元素

常用的表单元素标签包括：

标签名	作用	备注
label	表单元素的说明，配合表单元素使用	for属性值为相关表单元素id属性值
input	表单中输入控件，多种输入类型，用于接受来自用户数据	type属性值决定输入类型
button	页面中可点击的按钮，可以配合表单进行提交	type属性值决定按钮类型
select	表单的控件，下拉选项菜单	与option配合实用
optgroup	option的分组标签	与option配合实用
option	select的子标签，表示一个选项
textarea	表示多行纯文本编辑控件
fieldset	用来对表单中的控制元素进行分组(也包括 label 元素)
legend	用于表示它的fieldset内容的标题。	fieldset 的子元素

按钮控件

<button> 标签通过 type 属性控制行为：

button：自定义按钮。
submit：提交表单。
reset：重置表单。

输入控件 <input>

在HTML表单中，input控件的type属性是最重要的设置之一。不同的type属性值对应不同的输入字段类型，决定了用户如何输入数据以及浏览器如何展示控件。

输入控件基本概念

label标签：用于描述表单字段。for属性与input标签的id属性相对应，确保点击标签时焦点跳转到对应的输入框。
input标签：定义用户可以输入数据的区域。可通过不同的type属性，设定不同的输入方式。

input标签常见属性

type: 指定输入类型，如text、password、email等。
id: 该元素的唯一标识符，通常与label的for属性配合使用。
name: 该字段在提交时的名称，表单数据以键值对的形式提交，name是键。
value: 定义输入字段的初始值。
placeholder: 显示提示文本，当输入为空时出现。
required: 该字段是否为必填项。
readonly: 是否只读，用户无法修改输入框内容。
disabled: 禁用输入框，用户无法操作且值不会提交到服务器。
autocomplete: 控制是否开启自动补全功能，可设为off关闭。

n-v属性

表单提交时，使用name属性作为键，value属性作为值，多个键值对以&符号分隔，传递到服务器。

常见的type属性值

属性值	作用	示例或说明
`text`	单行文本输入	用于普通文本输入
`password`	密码输入，遮挡输入内容	仅显示掩码而非真实字符
`email`	电子邮件输入	会进行简单的邮箱格式验证
`radio`	单选按钮	在同一组中只能选择一个
`checkbox`	复选框	可以多选，提交时数据为数组
`date`	日期选择	包含年、月、日
`time`	时间选择	仅包含小时和分钟
`datetime-local`	日期时间选择，不含时区	包含年、月、日、时间
`number`	数字输入	允许输入浮点数
`range`	范围选择	可设定最大值、最小值、步长等
`tel`	电话号码输入	支持电话号码格式
`url`	URL输入	自动校验URL格式
`file`	文件上传	支持文件选择和上传
`hidden`	隐藏字段，用户不可见	用于传递隐藏数据

选择控件

<select>标签用于创建下拉列表，允许用户从预定义的选项中选择一个值。每个选项由<option>标签定义。

<select name="">
    <option value="">显示的内容</option>
</select>

选择控件元素

<option>：表示列表中的每个选项。value属性定义选中该选项时提交的值，而option标签内的文本为用户界面上显示的内容。
<optgroup>：用于将下拉列表中的选项进行分组，分组名由label属性指定。

文本域控件

<textarea>标签用于创建多行文本输入框，允许用户输入大量文本。

<textarea name="textarea" rows="10" cols="50">Write something here</textarea>

文本域属性

name: 提交时该文本域的名称。
rows: 文本域的行数。
cols: 文本域的列数，控制宽度。

分组控件

<fieldset>标签用于将表单中的元素分组，通常与<legend>标签一起使用，为组提供一个标题。它可以帮助对表单进行逻辑分割，提高可读性。

分组控件元素

<fieldset>: 定义一组表单控件。
<legend>: 为控件组提供一个标题。
<input>: 使用单选按钮提供“同意”或“不同意”选择。

表格标签

在 HTML 中，表格标签 <table> 用于显示结构化的数据，表格由行（<tr>）和单元格（<td> 或 <th>）组成。

基本属性

<table>: 定义表格容器。
<tr>: 表示表格中的一行（table row）。
<td>: 表格中的单元格（table data）。
<th>: 表头单元格（table header），用于标题栏，通常字体加粗且居中显示。

表格结构

表格结构标签可分为表头（<thead>）、表主体（<tbody>）、表尾（<tfoot>），它们有助于逻辑分割表格内容，提升可读性与布局管理。

标签名	作用	备注
`<thead>`	定义表格的列头的行	一个表格中仅有一个
`<tbody>`	定义表格的主体	用来封装一组表行（`<tr>`）
`<tfoot>`	定义表格的各列汇总行	一个表格中仅有一个

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8" />
    <title>示例</title>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>产品</th>
                <th>价格</th>
                <th>库存</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>手机</td>
                <td>5000元</td>
                <td>200</td>
            </tr>
            <tr>
                <td>笔记本</td>
                <td>8000元</td>
                <td>100</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>合计</td>
                <td colspan="2">库存总量：300</td>
            </tr>
        </tfoot>
    </table>
    
</body>

</html>

跨行跨列

跨行和跨列可以使用以下属性：

rowspan：定义跨行的单元格数。
colspan：定义跨列的单元格数。

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8" />
    <title>示例</title>
</head>

<body>
    <table width="400px" border="1px" align="center">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>数学</th>
                <th>语文</th>
            </tr>
        </thead>
    
        <tbody>
            <tr align="center">
                <td>张三</td>
                <td rowspan="2">男</td> <!-- 性别跨两行 -->
                <td>23</td>
                <td colspan="2">90</td> <!-- 数学成绩跨两列 -->
            </tr>
    
            <tr align="center">
                <td>李四</td>
                <td>24</td>
                <td>95</td>
                <td>98</td>
            </tr>
        </tbody>
    
        <tfoot>
            <tr>
                <td colspan="4">总分数：</td> <!-- 合并四列 -->
                <td>373</td>
            </tr>
        </tfoot>
    </table>
    
</body>

</html>

样式布局与 div 标签使用

基本格式

在 HTML 中，样式通常放置在 <head> 标签中，使用 <style> 标签包裹样式规则。每个标签的样式可以通过选择器定义不同的样式属性。

<style>
    标签名 {
        属性名1: 属性值1;
        属性名2: 属性值2;
        属性名3: 属性值3;
    }
</style>

背景格式

背景颜色 (background-color)：用于设置元素的背景颜色。

body {
    background-color: #567895;
}

背景图片 (background-image)：通过 url() 函数指定图片路径，将图片作为背景。

body {
    background-image: url("path-to-image/bg.png");
}

背景重复 (background-repeat)：控制背景图片是否平铺，以及平铺的方向。

body {
    background-image: url("star.png");
    background-repeat: repeat-x; /* 水平重复 */
}

可选值：

no-repeat：不重复背景
repeat-x：水平重复
repeat-y：垂直重复
repeat：双向重复（默认）

div 布局

简单边框布局：为 div 标签设置边框。

使用 class 属性布局：通过 class 属性为 div 标签添加多个样式属性，如宽度、浮动、背景等。

浮动布局：使用 float 属性让元素沿左边或右边浮动，从而实现流体布局。

float: left; /* 左浮动 */
float: right; /* 右浮动 */

使用 clear 清除浮动，避免浮动对页面其他部分的影响：

clear: both;

div 的基本布局示例

语义化标签

HTML5 中引入了语义化标签，这些标签不仅帮助开发者组织和理解页面结构，还能让搜索引擎和辅助技术更好地解析页面的内容。

标签	名称	作用	备注
header	标头元素	表示内容的介绍或标题部分	块级元素，一个文档中可以定义多个 `header` 标签
nav	导航元素	表示页面中的导航链接	用于定义导航栏，通常包含菜单或目录，可嵌套在 `header` 中
article	文章元素	表示独立的内容区域	独立的可重用内容块，常用于文章、博客、新闻条目等
footer	页脚元素	表示页面或内容的底部信息	定义文档或部分的页脚，可以包含版权声明、相关链接等

语义化标签的作用

增强可读性：通过使用语义化标签，代码结构更清晰，其他开发者能够更容易理解页面结构。
SEO 优化：搜索引擎更好地解析语义化标签，从而提升页面的搜索排名。
可访问性增强：语义化标签帮助屏幕阅读器等辅助技术更好地解读页面内容，提升可访问性。

HTML拓展

音频标签

<audio> 标签用于在网页中嵌入音频，是 HTML5 引入的新标签。

常用属性：

属性名	取值	描述
src	URL	音频资源的路径
autoplay	autoplay	音频准备就绪后自动播放
controls	controls	显示播放控件（播放、暂停等按钮）
loop	loop	音频循环播放
preload	preload	音频在页面加载时预加载；如果使用 "autoplay"，则忽略该属性。

示例：

视频标签

<video> 标签用于在网页中嵌入视频，同样是 HTML5 引入的新标签。

常用属性：

属性名	取值	描述
src	URL	要播放的视频的 URL。
width		设置视频播放器的宽度。
height		设置视频播放器的高度。
autoplay	autoplay	视频在加载后自动播放。
controls	controls	显示播放控件。
loop	loop	视频循环播放。
preload	preload	视频在页面加载时预加载。<br />如果使用 "autoplay"，则忽略该属性。
muted	muted	静音播放。
poster	URL	视频加载时显示的封面图片。