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

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

news 2025/7/7 1:53:06

文章目录

  • 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

Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

编程新知 2025/6/26 20:21:28

华为云Flexus+DeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...

编程新知 2025/7/6 3:14:03

高防服务器能够抵御哪些网络攻击呢？

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

编程新知 2025/7/5 16:13:17

sipsak：SIP瑞士军刀！全参数详细教程！Kali Linux教程！

简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求&#xff0c;并检查收到的响应。它以以下模式之一…...

编程新知 2025/7/6 19:16:54

CRMEB 中 PHP 短信扩展开发：涵盖一号通、阿里云、腾讯云、创蓝

目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为&#xff1a;一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...

编程新知 2025/6/15 16:44:42

【p2p、分布式，区块链笔记 MESH】Bluetooth蓝牙通信 BLE Mesh协议的拓扑结构 定向转发机制

目录 节点的功能承载层&#xff08;GATT/Adv&#xff09;局限性&#xff1a; 拓扑关系定向转发机制定向转发意义 CG 节点的功能 节点的功能由节点支持的特性和功能决定。所有节点都能够发送和接收网格消息。节点还可以选择支持一个或多个附加功能&#xff0c;如 Configuration …...

编程新知 2025/7/4 20:41:08

HTML版英语学习系统

HTML版英语学习系统 这是一个完全免费、无需安装、功能完整的英语学习工具&#xff0c;使用HTML CSS JavaScript实现。 功能 文本朗读练习 - 输入英文文章&#xff0c;系统朗读帮助练习听力和发音&#xff0c;适合跟读练习&#xff0c;模仿学习&#xff1b;实时词典查询 - 双…...

编程新知 2025/7/7 0:11:16

构建Docker镜像的Dockerfile文件详解

文章目录 前言Dockerfile 案例docker build1. 基本构建2. 指定 Dockerfile 路径3. 设置构建时变量4. 不使用缓存5. 删除中间容器6. 拉取最新基础镜像7. 静默输出完整示例 docker runDockerFile 入门syntax指定构造器FROM基础镜像RUN命令注释COPY复制ENV设置环境变量EXPOSE暴露端…...

编程新知 2025/7/4 14:54:07

Centos 7 服务器部署多网站

一、准备工作 安装 Apache bash sudo yum install httpd -y sudo systemctl start httpd sudo systemctl enable httpd创建网站目录 假设部署 2 个网站&#xff0c;目录结构如下&#xff1a; bash sudo mkdir -p /var/www/site1/html sudo mkdir -p /var/www/site2/html添加测试…...

编程新知 2025/7/5 11:16:32

Ubuntu 可执行程序自启动方法

使用 autostart&#xff08;适用于桌面环境&#xff09; 适用于 GNOME/KDE 桌面环境&#xff08;如 Ubuntu 图形界面&#xff09; 1. 创建 .desktop 文件 sudo vi ~/.config/autostart/my_laser.desktop[Desktop Entry] TypeApplication NameMy Laser Program Execbash -c &…...

编程新知 2025/7/5 12:39:04