【前端】HTML

阿查尔

已于 2025-04-07 15:24:43 修改

阅读量62

点赞数

CC 4.0 BY-SA版权

文章标签：前端 html

于 2025-04-03 12:02:40 首次发布

本文链接：https://blog.csdn.net/m0_50534425/article/details/146964177

文章目录

1. 定义
- 2. 文本元素
3. 链接和导航
4. 媒体元素
5. 语义化元素（HTML5 新增）
6. 表格
7. 表单元素
8. 无语义标签

1. 定义

HTML 是用于创建网页和 Web 应用程序的标准标记语言。它为网页提供结构和内容，而 CSS 负责样式表现，JavaScript 添加交互功能。
新建html文件，可以使用“ ! ”快捷给出基础框架。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档标题</title>
</head>
<body>
    <!-- 页面内容放在这里 -->
    <h1>主标题</h1>
    <p>这是一个段落。</p>
</body>
</html>

2. 文本元素

< h1 >到< h6 >：标题（h1 最重要）
< p >：段落
< span >：行内容器
< br >：换行
< hr >：水平分割线

3. 链接和导航

< a href=“网址” >：超链接
< nav >：导航区域

4. 媒体元素

< img src=“图片.jpg” alt=“描述” >：图片
< video >、< audio >：视频和音频

5. 语义化元素（HTML5 新增）

< header >：页眉
< footer >：页脚
< article >：独立内容
< section >：文档章节
< aside >：侧边栏
< main >：主要内容区

6. 表格

< table >：表格
< tr >：表格行
< td >：表格单元格
< th >：表头单元格

快捷方式：table>tr3>td3

7. 表单元素

表单是让用户输入信息的重要途径
表单域：包含表单元素的区域，重点是 form 标签。
表单控件：输入框、提交按钮等，重点是 input 标签。

< form >：表单容器
描述了要把数据按照什么方式，提交到哪个页面中。

<form action="test.html">
	... [form 的内容]
</form>

< input >：输入框
各种输入控件，单行文本框，按钮，单选框，复选框。
type(必须有)：button、checkbox、text、file、image、password、radio 等.
name：input 名字，尤其是对于单选按钮，具有相同的name才能多选一
value：input中的默认值
< textarea >：多行文本输入
一个大型文本框，可以接受多文本输入。
< button >：按钮
< select >：下拉选择
option 中定义 selected=“selected” 表示默认选中
< label >：表单标签
搭配 input 使用，点击 label 也能选中对应的单选/复选框，能够提升用户体验