当前位置： 首页 > news >正文

全面介绍HTML的语法！轻松写出网页

news 2026/2/8 0:31:59

文章目录

  • heading(标题)
  • paragraph(段落)
  • link(超链接)
  • image
  • map(映射)
  • table(表格)
  • list(列表)
  • layout(分块)
  • form(表单)
    • 更多输入:
    • datalist
    • autocomplete
    • autofocus
    • multiple
    • novalidate
    • pattern
    • placeholder
    • required
  • head(首部)
    • title
    • base
    • link
    • style
    • meta
    • script
    • noscript
  • iframe

HTML，即Hypertext Markup Language(超文本标记语言), 是网页显示的核心语言.
HTML中最重要的要素是tag(标签). 所有的关键词都被一组标签包含.

<!doctype html>  
<html class="no-js" lang="">  
<body>  <h1>My First Heading</h1>  <p>My first paragraph.</p>  
</body>  
</html>

例如<p>和</p>, 分别标志着内容的开始和结束.

浏览器通过HTML tag对网页内容进行解析, 并显示成我们看到的样子.

HTML 文档 = 网页

Tag作用介绍:

heading(标题)

<h1>,<h2>,...,<h6>

paragraph(段落)

<p>

link(超链接)

<a>

用href指定跳转的链接

<a href="http://www.w3school.com.cn/>访问W3School</a>

标签之间的内容是显示在页面上的文字

image

<img>

<img src="iron.png" alt="Yellow Star" width="192" height="192">

  • src: 图片的路径

  • alt: 图片加载失败时显示的文字

  • width, height: 长,宽

    在原生HTML中, 长宽用字符串表示

map(映射)

<map>和<area>配套使用

<img src="./img/life.png" alt="Life" usemap="#lifemap" width="650" height="451">  
<map name="lifemap">  <area shape="rect" coords="10,208,155,338" alt="AirPods" href="./airpods.html">  <area shape="rect" coords="214,65,364,365" alt="iPhone" href="./iPhone.html">  <area shape="circle" coords="570,291,75" alt="Coffee" href="./coffee.html">  
</map>

image.png
<map>:

  • name: 映射的名字
    <area>:
  • shape: 区域的形状
  • coords: 坐标
    • rect: 左下角和右上角
    • circle: 中心, 半径
  • href: 点击后跳转到的页面

table(表格)

<table>
<th> (table heading)
<tr> (table row)
<td> (table data)

list(列表)

<ul> 无序列表
<ol> 有序列表
<li> 列表中的每一项(包括无序和有序列表)
<dl> 定义列表
<dt> term(术语)
<dd> description(解释)

layout(分块)

<div>

<div id = "nav">London<br>Paris<br>Tokyo<br>
</div>

<br> 换行符

div id:

  • header 标题
  • nav 导航栏
  • section 章节部分
  • footer 脚注

form(表单)

<form action="404.html" method="GET">  User name:<br>  <input type="text" name="username">  User password:<br>  <input type="password" name="psw">  <input type="radio" name="sex" value="male" checked>Male  <input type="radio" name="sex" value="female">Female  <input type="checkbox" name="vehicle" value="Bike">I have a bike  <input type="checkbox" name="vehicle" value="Car">I have a car  <input type="button" onclick="alert('Hello World!')" value="Click Me!">  <input type="submit" value="Submit">  
</form>

form:

  • action: 表单提交时将数据发送到的目标页面
  • method: 数据传输方式

<input>: 输入框
type属性:

  • text: 文本输入框
    • name: 标识名称, 用来通过该名称检索输入的值
  • password: 密码输入框，输入的内容将被掩码，用于输入密码等敏感信息。
  • radio: 单选按钮, name属性相同的按钮属于同一组
    • value: 选中的值
    • checked: 默认选中
  • checkbox: 复选框
  • button: 按钮
    • onclick: 按下按钮后触发的事件.
      在本例中是弹出一个警示框
    • value: 按钮显示的文字
      • submit: 提交, 用于提交表单数据到服务器(axtion属性指定的目标页面)

更多输入:

  • number
<form>  Quantity (between 1 and 5):  <input type="number" name="quantity" min="1" max="5" step="2" value="3">  
</form>
  • date
<form>  
Date:  
<input type="date" name="bday" min="2000-01-02"><br>  
Month:  
<input type="month" name="bday" min="2000-01-02"><br>  
Week:  
<input type="week" name="bday" min="2000-01-02"><br>  
Time:  
<input type="time" name="bday" min="2000-01-02"><br>  
Date & Time:  
<input type="datetime-local" name="bday" min="2000-01-02"><br>  
</form>
  • color
<input type="color" name="favcolor">
  • range
<input type="range" name="points" min="0" max="10" step="2" value="6">

image.png

  • emial, url

会检查格式

datalist

<select>, <option>

<label>  <select name="cars">  <option value="volvo">Volvo</option>  <option value="saab">Saab</option>  <option value="fiat">Fiat</option>  <option value="audi">Audi</option>  </select>  
</label>

label: 标签

autocomplete

规定form或input域具有自动完成功能

autofocus

域自动获得焦点

multiple

域中可以输入多个值

novalidate

提交表单时不验证form或input域

pattern

用于验证input域的模式

  <input type="text" id="fname" name="fname" pattern="[A-Z]{3}" title="3 letters">

其中pattern规定的是正则表达式

placeholder

域期待的值

required

非空

  <input type="text" id="fname" name="fname" required="required">

head(首部)

包含有Script(页面脚本), CSS(样式表), metadata(元数据)

标签描述
<head>定义关于文档的信息
<title>定义文档标题
<base>定义页面上所有链接的默认地址或默认目标
<link>定义文档域外部资源之间的关系
<meta>定义关于HTML脚本的元数据
<script>定义客户端脚本
<style>定义文档的样式信息

title

<title>Examples of HTML5</title>

Pasted image 20240226212145

base

<head><base href="http://www.w3school.com.cn/images/" />  <base target="_blank" />
</head>

link

<head>  <link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

style

<head>  <style type="text/css">  body {background-color:yellow}    p {color:blue}  </style>  
</head>

body: 文档背景颜色
p: 段落文字颜色

meta

不会显示在页面上,但是被机器读取
meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

<head>  <meta name="description" content="Free Web tutorials on HTML, CSS, XML" />  <meta name="keywords" content="HTML, CSS, XML" />  <meta charset="UTF-8"/></head>

script

使用javaScript脚本可以直接更改页面
如

<p id="demo"></p>  
<script>  document.getElementById("demo").innerHTML = "Hello JavaScript!";  document.getElementById("demo").style.fontSize = "25px";  document.getElementById("demo").style.color = "red";  document.getElementById("demo").style.backgroundColor = "yellow";  
</script>

noscript

替代内容,显示给浏览器中禁用了脚本的用户

iframe

Inline Frame, 内联框

<iframe src="http://www.w3school.com.cn/example/html/demo_iframe.html" name="iframe_a"></iframe>

当然,这些都是最原生的HTML语法. 现在使用的HTML5增加了一下特色:

  • canvas(画布)
  • video and audio(视频\音频)
  • local storage
  • Application Cache(应用程序缓存)
  • server-sent event(服务器发射事件)
  • SVG(Scalable Vector Graphics, 可变向量图)

内容过于丰富,下次再介绍.

相关文章：

全面介绍HTML的语法！轻松写出网页

文章目录 heading(标题)paragraph(段落)link(超链接)imagemap(映射)table(表格)list(列表)layout(分块)form(表单)更多输入:datalistautocompleteautofocusmultiplenovalidatepatternplaceholderrequired head(首部)titlebaselinkstylemetascriptnoscript iframe HTML&#xff…...

编程日记 2024/2/27 6:36:40

数学建模【相关性模型】

一、相关性模型简介 相关性模型并不是指一个具体的模型&#xff0c;而是一类模型&#xff0c;这一类模型用来判断变量之间是否具有相关性。一般来说&#xff0c;分析两个变量之间是否具有相关性&#xff0c;我们根据数据服从的分布和数据所具有的特点选择使用pearson&#xff…...

编程日记 2024/2/27 6:33:36

「优选算法刷题」：字母异位词分组

一、题目 给你一个字符串数组&#xff0c;请你将 字母异位词 组合在一起。可以按任意顺序返回结果列表。 字母异位词 是由重新排列源单词的所有字母得到的一个新单词。 示例 1: 输入: strs ["eat", "tea", "tan", "ate", "na…...

编程日记 2024/2/27 6:30:33

【教程】 iOS混淆加固原理篇

目录 摘要 引言 正文 1. 加固的缘由 2. 编译过程 3. 加固类型 1) 字符串混淆 2) 类名、方法名混淆 3) 程序结构混淆加密 4) 反调试、反注入等一些主动保护策略 4. 逆向工具 5. OLLVM 6. IPA guard 7. 代码虚拟化 总结 摘要 本文介绍了iOS应用程序混淆加固的缘由…...

编程日记 2024/2/27 6:29:33

《银幕上的编码传奇：计算机科学与科技精神的光影盛宴》

目录 1.在电影的世界里&#xff0c;计算机科学不仅是一门严谨的学科&#xff0c;更是一种富有戏剧张力和人文思考的艺术载体。 2.电影作为现代文化的重要载体&#xff0c;常常以其丰富的想象力和视觉表现力来探讨计算机科学和技术的各种前沿主题。 3.电影中的程序员角色往往…...

编程日记 2024/2/27 6:28:32

linux提权之sudo风暴

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【Java】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收藏 …...

编程日记 2024/2/27 6:26:30

数据结构之：跳表

跳表&#xff08;Skip List&#xff09;是一种概率性数据结构&#xff0c;它通过在普通有序链表的基础上增加多级索引层来实现快速的查找、插入和删除操作。跳表的效率可以与平衡树相媲美&#xff0c;其操作的时间复杂度也是O(log n)&#xff0c;但跳表的结构更简单&#xff0c…...

编程日记 2024/2/27 6:25:29

matlab 线性四分之一车体模型

1、内容简介 略 57-可以交流、咨询、答疑 路面采用公式积分来获得&#xff0c;计算了车体位移、非悬架位移、动载荷等参数 2、内容说明 略 3、仿真分析 略 线性四分之一车体模型_哔哩哔哩_bilibili 4、参考论文 略...

编程日记 2024/2/27 6:24:28

LeetCode第二题: 两数相加

文章目录 题目描述示例 解题思路 - 迭代法Go语言实现 - 迭代法算法分析 解题思路 - 模拟法Go语言实现 - 模拟法算法分析 解题思路 - 优化模拟法主要方法其他方法的考虑 ‍ 题目描述 给出两个非空的链表用来表示两个非负的整数。其中&#xff0c;它们各自的位数是按照逆序的方…...

编程日记 2024/2/27 6:21:26

web组态插件

插件演示地址&#xff1a;http://www.byzt.net 关于组态软件&#xff0c;首先要从组态的概念开始说起。 什么是组态 组态&#xff08;Configure&#xff09;的概念来自于20世纪70年代中期出现的第一代集散控制系统&#xff08;Distributed Control System&#xff09;&#xf…...

编程日记 2024/2/27 6:18:23

Android14 InputManager-InputManagerService环境的构造

IMS分为Java层与Native层两个部分&#xff0c;其启动过程是从Java部分的初始化开始&#xff0c;进而完成Native部分的初始化。 □创建新的IMS对象。 □调用IMS对象的start&#xff08;&#xff09;函数完成启动 同其他系统服务一样&#xff0c;IMS在SystemServer中的ServerT…...

编程日记 2024/2/27 6:16:20

搜维尔科技：【周刊】适用于虚拟现实VR中的OptiTrack

适用于 VR 的 OptiTrack 我们通过优化对虚拟现实跟踪最重要的性能指标&#xff0c;打造世界上最准确、最易于使用的广域 VR 跟踪器。其结果是为任何头戴式显示器 (HMD) 或洞穴自动沉浸式环境提供超低延迟、极其流畅的跟踪。 OptiTrack 主动式 OptiTrack 世界领先的跟踪精度和…...

编程日记 2024/2/27 6:11:15

matlab倒立摆小车LQR控制动画

1、内容简介 略 54-可以交流、咨询、答疑 2、内容说明 略 摆杆长度为 L&#xff0c;质量为 m 的单级倒立摆(摆杆的质心在杆的中心处)&#xff0c;小车的质量为 M。在水平方向施加控制力 u&#xff0c;相对参考系产生位移为 y。为了简化问题并且保其实质不变&#xff0c;忽…...

编程日记 2024/2/27 6:10:13

【C++】类和对象（2）

目录 1. 初始化列表 2.explicit关键字 3. Static成员 3. 友元 3.1友元函数 3.2友元类 4. 内部类 5.匿名对象 1. 初始化列表 在创建对象时&#xff0c;编译器通过调用构造函数&#xff0c;给对象中各个成员变量一个合适的初始值&#xff0c;但是这个过程并不能称为对对…...

编程日记 2024/2/27 6:09:12

用Python实现创建十二星座数据分析图表

下面小编提供的代码中&#xff0c;您已经将pie.render()注释掉&#xff0c;并使用了pie.render_to_file(十二星座.svg)来将饼状图渲染到一个名为十二星座.svg的文件中。这是一个正确的做法&#xff0c;如果您想在文件中保存图表而不是在浏览器中显示它。 成功创建图表&#xf…...

编程日记 2024/2/27 6:08:10

备战蓝桥杯————递归反转单链表的一部分

递归反转单链表已经明白了&#xff0c;递归反转单链表的一部分你知道怎么做吗&#xff1f; 一、反转链表Ⅱ 题目描述 给你单链表的头指针 head 和两个整数 left 和 right &#xff0c;其中 left < right 。请你反转从位置 left 到位置 right 的链表节点&#xff0c;返回 反…...

编程日记 2024/2/27 6:07:09

rabbitmq知识梳理

一.WorkQueues模型 Work queues&#xff0c;任务模型。简单来说就是让多个消费者绑定到一个队列&#xff0c;共同消费队列中的消息。 当消息处理比较耗时的时候&#xff0c;可能生产消息的速度会远远大于消息的消费速度。长此以往&#xff0c;消息就会堆积越来越多&#xff0c…...

编程日记 2024/2/27 6:04:06

【数据结构与算法】动态规划法解题20240227

动态规划法 一、什么是动态规划二、动态规划的解题步骤三、509. 斐波那契数1、动规五部曲&#xff1a; 四、70. 爬楼梯1、动规五部曲&#xff1a; 五、746. 使用最小花费爬楼梯1、动规五部曲&#xff1a; 一、什么是动态规划 动态规划&#xff0c;英文&#xff1a;Dynamic Pro…...

编程日记 2024/2/27 6:03:04

备战蓝桥杯—— 双指针技巧巧答链表2

对于单链表相关的问题&#xff0c;双指针技巧是一种非常广泛且有效的解决方法。以下是一些常见问题以及使用双指针技巧解决&#xff1a; 合并两个有序链表&#xff1a; 使用两个指针分别指向两个链表的头部&#xff0c;逐一比较节点的值&#xff0c;将较小的节点链接到结果链表…...

编程日记 2024/2/27 5:58:58

半监督节点分类-graph learning

半监督节点分类相当于在一个图当中&#xff0c;用一部分节点的类别上已知的&#xff0c;有另外一部分节点的类别是未知的&#xff0c;目标是使用有标签的节点来推断没有标签的节点 注意 半监督节点分类属于直推式学习&#xff0c;直推式学习相当于出现新节点后&#xff0c;需要…...

编程日记 2024/2/27 5:57:56

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

编程新知 2025/11/16 8:24:16

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

编程新知 2025/12/3 9:38:15

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

编程新知 2026/2/6 20:07:35

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

编程新知 2026/2/6 9:48:02

Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

编程新知 2026/1/29 21:20:51

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

编程新知 2026/1/31 12:52:29

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

编程新知 2025/10/4 6:30:56

七、数据库的完整性

七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...

编程新知 2026/2/4 10:28:25

C++.OpenGL （20/64）混合（Blending）

混合（Blending） 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...

编程新知 2026/1/20 5:33:17

tauri项目，如何在rust端读取电脑环境变量

如果想在前端通过调用来获取环境变量的值&#xff0c;可以通过标准的依赖&#xff1a; std::env::var(name).ok() 想在前端通过调用来获取&#xff0c;可以写一个command函数&#xff1a; #[tauri::command] pub fn get_env_var(name: String) -> Result<String, Stri…...

编程新知 2026/2/6 6:05:11