HTML

HTML

一、基础篇

1、基本框架

标签语法

分类：双标签（包裹内容），单标签

例：

加粗文字或者加粗文字

layout: HTML
title: HTML
date: 2024-10-29 14:22:59
tags:

水平分隔线

基本骨架

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>

</body>
</html>

标签关系

父子关系（嵌套）

​ 向后缩进：Tab

​ 向前缩进：Shift+Tab

兄弟关系（并列）

注释

​

​ 快捷键：Ctrl+/

2、标签

标题标签

特点

​ h1~h6

​ 加粗，占一行

​ h1只用一次

语法

​

一级标题

段落标签p

特点

​ 占一行，有间隙

语法

​

文本

换行与水平标签

换行

​

水平线

​

文本格式化标签

加粗

​ 或

倾斜

​ 或

下划线

​ 或

删除线

​ 或

图像标签img

语法
1
<img src="图片的URL" alt="替换文本" title="提示文本" width="图片宽度" height="图片高度">

src

​ src用于指定图像位置和名称(必选)

​ 若是将图片放至html文件同一目录下

​ src=”./相对路径” 其中./表示当前目录

alt

​ 图片无法显示时显示的文字

title

​ 鼠标悬停在图片上时显示的文字

width

​ 宽度

height

​ 高度

超链接标签a

语法
1
2
<a href="URL" target="">文本</a>
<a href="./相对路径" target="">文本</a><!--打开本地文件-->

href

​ URL或路径

​ 填#为空链接

target

​ “_self”在当前窗口打开(默认)

​ “_blank” 在新窗口打开

音频标签audio

语法
1
<audio src="URL"></audio>
必须属性

src

​ 支持MP3、Ogg、Wav

可选属性

controls

​ 作用：显示音频控制面板(开始暂停，音量控制)

loop

​ 循环播放

autoplay

​ 自动播放

muted

​ 默认静音

preload=””

​ 作用：指定页面加载时音频文件的预加载行为

​ “auto”浏览器决定最佳加载方式

​ “metadata”只载入元数据

​ “none”不加载

volume=””

​ 设置音量，范围由0.0到1.0

视频标签video

语法
1
<video src="URL"></video>
必须属性

src

​ 支持MP4、WebM、Ogg

可选属性

controls

loop

muted

autoplay

​ (有的浏览器仅支持在静音状态下自动播放)

列表标签ul/ol

作用

布局内容排列整齐的区域

分类

无序列表(最常用)

  • 内容1
  • 内容2
1
2
3
4
5
<ul>
    <li>第一项</li>
    <li>第二项</li>
    ...
</ul>

有序列表

  1. 内容1

  2. 内容2

    1
    2
    3
    4
    <ol>
        <li></li>
        ...
    </ol>

    ​

定义列表

表头一 表头二
内容1 内容2 
1
2
3
4
5
6
<dl>
    <dt>标题一</dt>
    <dd>描述一</dd>
    ...

</dl>

表格标签table

语法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<table border="">
    <thead>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
            ...
        </tr>
    </thead>
    
    <tbody>
        <tr>
            <td>内容1</td>
            <td>内容2</td>
            ...
        </tr>
        ...
    </tbody>
    
    <tfoot>
        <tr>
            ...
        </tr>
    </tfoot>
</table>

border=”数字”

规定边框，数字越大，边框越粗

合并单元格

步骤：
1.明确合并目标
2.保留左上角单元格，添加属性(取值为数字，表示要合并的单元格的数量)
跨行合并(竖着)：保留最上单元格，添加属性rowspan=”合并的单元格的数量”
跨列合并(横着)：保留最左单元格，添加属性colspan=”合并的单元格的数量”
3.删除其他单元格

表单form

用途

收集用户信息

如：登录页面、注册页面、搜索区域

语法
1
2
3
4
<form action="">
	<!--控件-->
    ...
</form>
input标签
1
<input type="" placeholder="提示信息">

type属性值：

text 文本框（单行文本）

password 密码框

radio 单选框

​ 属性：name=”” 控件名称 控件分组，同组只能选中一个
checked 默认选中 

1
2
<input type="radio" name="">
<input type="gender" name="" checked>

checkbox 多选框

​ 属性：checked

file 上传文件

​ 属性：multiple 文件多选

placeholder(可选属性)：

​ text、password可用

下拉菜单标签
语法

1
2
3
4
5
6
<select>
    <option>选项1</option>
    <option>选项2</option>
    ...

</select>

​ selected 默认选中

文本域标签
作用

​ 多行输入文本的表单控件

语法
1
<textarea>默认提示文字</textarea>
label标签
作用
  • 网页中，某个标签的说明文本
  • 用label标签绑定文字和表单控件的关系，增大表单控件的点击范围
语法

写法一

  • label标签只包裹内容，不包裹表单控件
  • 设置label标签for属性值与表单控件的id属性值相同
1
<input type="radio" id="A"> <label for="A">A</label>

写法二

使用label标签包裹文字和表单控件

1
<label><input type="radio">A</label>
按钮标签
1
<button type"">文本</button>

type属性值

submit 提交按钮，点击提交数据到后台(默认)
reset 重置按钮，点击后将表单控件恢复默认值
button 普通按钮，默认没有功能，配合JavaScript使用

布局标签(容器)

1
2
<div></div><!--独占一行-->
<span></span><!--不换行-->

导航链接标签nav

HTML的<nav>标签用于定义页面中的导航链接部分。这个标签通常用于包含全局导航链接，如网站的主菜单、面包屑导航、搜索表单、分页控件等。使用<nav>标签可以让文档的结构更加清晰，对于搜索引擎优化（SEO）以及提高网站的可访问性都有帮助，因为它让屏幕阅读器和搜索引擎更容易识别页面的导航区域。

基本用法

1
2
3
4
5
6
7
8
<nav>
  <ul>
    <li><a href="#home">首页</a></li>
    <li><a href="#news">新闻</a></li>
    <li><a href="#contact">联系我们</a></li>
    <li><a href="#about">关于我们</a></li>
  </ul>
</nav>

主要特点

  • 语义化：<nav>标签提供了明确的语义，表明其内部包含的是导航性质的链接，有助于搜索引擎和屏幕阅读器理解页面结构。
  • 灵活性：<nav>可以在文档中使用多次，适用于不同类型的导航，如主导航、侧边导航、页脚导航等。
  • 可访问性：结合ARIA（Accessible Rich Internet Applications）属性，可以进一步提高导航区域的可访问性。

ARIA属性增强

有时候，为了增强页面的可访问性，我们可能会向<nav>标签添加ARIA属性，如aria-label或aria-labelledby，来为使用屏幕阅读器的用户提供更多的上下文信息。

1
2
3
4
5
6
7
8
<nav aria-label="主菜单">
  <ul>
    <li><a href="#home">首页</a></li>
    <li><a href="#services">服务</a></li>
    <li><a href="#blog">博客</a></li>
    <li><a href="#contact">联系</a></li>
  </ul>
</nav>

在这个例子中，aria-label="主菜单"为屏幕阅读器提供了额外的信息，帮助用户理解这个<nav>区块的内容。

注意

  • 不要仅仅因为某些元素被频繁用于导航就滥用<nav>标签。它应该用于包裹那些主要的、全局的导航链接。
  • <nav>内部通常包含列表（<ul>/<ol>）和链接（<a>），但这不是硬性规定。根据需求，它也可以包含表单等其他元素。

总之，<nav>标签是HTML5中引入的一个重要元素，用于提高网页结构的语义化和可访问性。正确地使用它，可以让网页对搜索引擎和用户都更加友好。

字符实体

空格 &nbsp
小于号 &lt
大于号 &gt

结尾需加 ;

#学习笔记，前端
HTML
https://fiy-pc.github.io/2024/10/29/HTML/
作者
FIY-pc
发布于
2024年10月29日
许可协议