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

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

news 文章来源：https://blog.csdn.net/MagicianofLove/article/details/136309357 2024/11/15 17:59:23

文章目录

  • 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

软件文档-运维-开发-管理-资质-评审-招投标-验收

开发文档&#xff1a;这类文档主要用于记录软件的开发过程和细节&#xff0c;包括&#xff1a; 《功能要求》&#xff1a;描述了软件应具备的功能&#xff0c;是软件开发的基础。《投标方案》&#xff1a;向潜在的客户或招标方展示公司的技术和项目实施能力。《需求分析》&…...

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

猫头虎分享已解决Bug || Vue中的TypeError: Cannot read property ‘name‘ of undefined 错误

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …...

编程日记 2024/2/27 5:55:53

技术应用：使用Spring Boot、MyBatis Plus和Dynamic DataSource实现多数据源

引言 在现代的软件开发中&#xff0c;许多应用程序需要同时访问多个数据库。例如&#xff0c;一个电子商务平台可能需要访问多个数据库来存储用户信息、产品信息和订单信息等。在这种情况下&#xff0c;使用多数据源是一种常见的解决方案&#xff0c;它允许我们在一个应用程序…...

编程日记 2024/2/27 5:54:53

C# Onnx 使用onnxruntime部署实时视频帧插值

目录 介绍 效果 模型信息 项目 代码 下载 C# Onnx 使用onnxruntime部署实时视频帧插值 介绍 github地址&#xff1a;https://github.com/google-research/frame-interpolation FILM: Frame Interpolation for Large Motion, In ECCV 2022. The official Tensorflow 2…...

编程日记 2024/2/27 5:53:51

编程笔记 Golang基础 016 数据类型：数字类型

编程笔记 Golang基础 016 数据类型&#xff1a;数字类型 1. 整数类型&#xff08;Integer Types&#xff09;a) 固定长度整数&#xff1a;b) 变长整数&#xff1a; 2. 浮点数类型&#xff08;Floating-Point Types&#xff09;3. 复数类型&#xff08;Complex Number Types&…...

编程日记 2024/2/27 5:47:45

一周学会Django5 Python Web开发-会话管理（CookiesSession）

锋哥原创的Python Web开发 Django5视频教程&#xff1a; 2024版 Django5 Python web开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili2024版 Django5 Python web开发 视频教程(无废话版) 玩命更新中~共计26条视频&#xff0c;包括&#xff1a;2024版 Django5 Python we…...

编程日记 2024/2/27 5:46:44

QT之QString.arg输出固定位数

问题描述 我需要用QString输出一个固定位数的数字字符串。起初我的代码是这样&#xff1a; int img_num 1 auto new_name QString("%1.png").arg((int)img_num, 3, 10, 0); //最后一个参数用u0也是一样的 qDebug() << "new_name:" << new…...

编程日记 2024/2/27 5:44:39

Linux下各种压缩包的压缩与解压

tar 归档&#xff0c;不压缩&#xff0c;常见后缀 .tar # 将文件夹归档成为一个包 tar cf rootfs.tar rootfs # 将归档包还原为文件夹 tar xf rootfs.tar # 将归档包还原到路径 a/b/c tar xf rootfs.tar -C a/b/cgzip压缩&#xff0c; 常见后缀 .tar.gz .tgz # 压缩 tar czf …...

编程日记 2024/2/27 5:43:38

【ctfshow—web】——信息搜集篇1（web1~20详解）

ctfshow—web题解 web1web2web3web4web5web6web7web8web9web10web11web12web13web14web15web16web17web18web19web20 web1 题目提示 开发注释未及时删除 那就找开发注释咯&#xff0c;可以用F12来查看&#xff0c;也可以CtrlU直接查看源代码呢 就拿到flag了 web2 题目提示 j…...

编程日记 2024/2/27 5:40:33

GEE入门篇|遥感专业术语（实践操作4）：光谱分辨率（Spectral Resolution）

目录 光谱分辨率&#xff08;Spectral Resolution&#xff09; 1.MODIS 2.EO-1 光谱分辨率&#xff08;Spectral Resolution&#xff09; 光谱分辨率是指传感器进行测量的光谱带的数量和宽度。 您可以将光谱带的宽度视为每个波段的波长间隔&#xff0c;在多个波段测量辐射亮…...

编程日记 2024/2/27 5:39:32

医药企业网站建设/秒收录关键词代发

C语言中内存的管理主要是依据malloc和free实现的&#xff0c;其中malloc主要是实现内存的分配&#xff0c;而free则是实现内存的释放。虽然这是我们已经很熟悉的&#xff0c;但是还是存在一些问题。特别是当结构体中存在指针的情况下&#xff0c;各种问题也就会展现出来。 其中…...

编程日记 2024/11/15 13:03:25

做网站有什么用/卡点视频软件下载

在JAVA编程中&#xff0c;有这样一个问题&#xff1a;类A引用了类B&#xff0c;那么如果运行时没有类B&#xff0c;类A会不会调用成功&#xff0c;而不抛异常&#xff1f; 答案是&#xff0c;有可能运行成功&#xff0c;而不抛异常。 例子1&#xff1a; ClassA.java packag…...

编程日记 2024/11/15 10:57:50

给网站整一个客服 怎么做/百度搜索开放平台

2019独角兽企业重金招聘Python工程师标准>>> MySQL索引&#xff1f;这玩意儿还能简单聊&#xff1f;明显是在挖坑&#xff0c;幸好老夫早有准备&#xff0c;切听我一一道来。 一、索引是什么? 索引是帮助MySQL高效获取数据的数据结构。 二、索能干什么? 索引非常…...

编程日记 2024/11/15 7:40:58

php java做网站/免费网站安全软件下载

Introduce SVM是机器学习算法工程师面试必问算法&#xff0c;原理、推导、应用场景、算法比较等等&#xff0c;遂总结于此&#xff0c;方便他人和自己复习&#xff01; SVM SVM的核函数如何选取&#xff1f; https://www.zhihu.com/question/21883548 &#xff08;1&#…...

编程日记 2024/11/15 7:30:44

网站左侧树形导航怎么做/seo排名软件免费

一面&#xff1a; 阿里巴巴面试答案文末可以领取&#xff01; 1. 触发新生代GC&#xff0c;如果存活对象总量大于survivor区容量&#xff0c;咋办 2. 如果任务很多&#xff0c;线程池的阻塞队列会撑爆内存的哪个区域 3. 栈在堆上吗 4. GC root有哪些 5. 实例变量可以是GC…...

编程日记 2024/11/15 7:22:39

用织梦做网站有钱途吗/百度信息流广告推广

leetcode分数预测&#xff1a;https://lcpredictor.herokuapp.com/ https://zerotrac.github.io/leetcode_problem_rating/ 可以查看leetcode各道题目的分数&#xff0c;基于大数据统计 https://codeforces.com/ https://atcoder.jp/home oi数据库 https://bytew.net/OIer/ind…...

编程日记 2024/11/15 5:36:11