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

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

news 2025/10/29 10:10:42

文章目录

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>

<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属性指定的目标页面)

datalist

<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: 段落文字颜色

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

数学建模【相关性模型】

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

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

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

一、题目给你一个字符串数组，请你将字母异位词组合在一起。可以按任意顺序返回结果列表。字母异位词是由重新排列源单词的所有字母得到的一个新单词。示例 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.在电影的世界里，计算机科学不仅是一门严谨的学科，更是一种富有戏剧张力和人文思考的艺术载体。 2.电影作为现代文化的重要载体，常常以其丰富的想象力和视觉表现力来探讨计算机科学和技术的各种前沿主题。 3.电影中的程序员角色往往…...

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

linux提权之sudo风暴

🍬 博主介绍👨‍🎓 博主介绍：大家好，我是 hacker-routing ，很高兴认识大家~ ✨主攻领域：【渗透领域】【应急响应】【Java】【VulnHub靶场复现】【面试分析】 🎉点赞➕评论➕收藏 …...

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

数据结构之：跳表

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

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

matlab 线性四分之一车体模型

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

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

LeetCode第二题: 两数相加

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

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

web组态插件

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

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

Android14 InputManager-InputManagerService环境的构造

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

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

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

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

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

matlab倒立摆小车LQR控制动画

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

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

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

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

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

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

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

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

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

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

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

rabbitmq知识梳理

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

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

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

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

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

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

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

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

半监督节点分类-graph learning

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

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

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 （1）连接查询（JOIN） 内连接（INNER JOIN）：返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/10/24 14:20:29