1、HTML超文本标记语言
2024-05-10 23:51:00
文章目录
- HTML标记语言
- 简介
- 文字分隔标记
- 排版标记
- 字体标记与分割线标记
- 背景标记
- 图像信息
- 列表标记
- 特殊字符
- 超链接
- 表格
- 表单
- 多媒体
- 块标签和行标签
HTML标记语言
HyperText Markup Language 超文本标记语言，是一种用于创建网页的标准标记语言。
HTML不是一种编程语言，而是一种标记语言。
您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
由w3c定义的一系列的标签构成。
简介
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title>
</head>
<body><h1>我的第一个标题</h1><p>我的第一个段落。</p></body>
</html>
实例解析
<!DOCTYPE html>声明为 HTML5 文档<html>元素是 HTML 页面的根元素<head>元素包含了文档的元（meta）数据，如<meta charset="utf-8">定义网页编码格式为 utf-8<title>元素描述了文档的标题<body>元素包含了可见的页面内容<h1>元素定义一个大标题<p>元素定义一个段落
**注：**在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。
标签
- HTML标签是由尖括号包围的关键字；
- HTML标签通常是成对出现的；
- 第一个标签为开始标签，第二个标签为结束标签；
<a></a> - 自闭和标签；
<br/>
文字分隔标记
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title>
</head>
<body><!-- 文字上的分隔标记 --><!-- 浏览器不会识别Enter、空格键，所以你按多少次空格都没用 --><!-- 断行标记 -->莫愁前路无知己，<br>天下谁人不识君。<!-- 分段标记 --><p>我劝天公重抖擞，</p><p>不拘一格降人才。</p><!-- 空格标记 -->张三给你发来消息： 在吗？老弟！
</body>
</html>
排版标记
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title>
</head>
<body><!-- 排版的标记 --><!-- 文字的左对齐、右对齐、居中 --><!-- 在HTML4.01中，所有p元素的呈现属性均不被赞成使用，建议使用CSS代替 --><p style="text-align: left;">6月25日0时至24时，北京市新增报告本地确诊病例11例、疑似病例3例、无症状感染者1例；无新增报告境外输入确诊病例、疑似病例、无症状感染者，治愈出院病例1例。</p><p style="text-align:center;">6月11日0时至6月25日24时，累计报告本地确诊病例280例，在院280例。尚在观察的无症状感染者22例；无新增报告境外输入新冠肺炎确诊病例、疑似病例和无症状感染者，无在院病例。</p><!-- 在VS Code中安装open in browser插件，在浏览器中打开页面的方式为：右键-> open in default browser --><p style="text-align: right;">新增确诊病例中，丰台区7例、海淀区2例、昌平区1例、大兴区1例。</p><!--在HTML4.01中，center标签不被赞成使用。 <center></center> --><!-- 被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。 --><pre>天生我才必有用，千金散尽还复来。</pre>
</body>
</html>
字体标记与分割线标记
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 字体标记 --><!-- 标题 --><!-- <h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。 --><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6><!-- 在HTML4.01中，font标签不被赞成使用。 --><!-- <font></font> --><b>文本加粗</b><br><i>斜体文本</i><br><u>底线</u><br><s>删除线</s><br><dfn>名词解释</dfn><br><em>着重</em><br><strong>强调</strong><br>10 <sup>2</sup><hr><!-- 分割线标记 -->log <sub>2</sub><br>联系我们：<address>上海市政立路485号</address>
</body>
</html>
背景标记
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div style="width: 500px; height: 500px; background-image:url(img/微信图片_20200625141410.jpg);"></div><div style="width: 200px; height: 200px; background-color: rgb(75, 153, 153);"></div><!-- 圆形 --><div style="width: 200px; height: 200px; border: 1px solid black; border-radius: 100px;"></div>
</body>
</html>
图像信息
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- img标记 --><!-- 在浏览器无法载入图像时，替换文本属性alt告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。 --><!-- title属性：当鼠标滑到图片上时显示的信息 --><img src="img/微信图片_20200625141410.jpg" alt="松韵.jpg" title="嘿嘿"><!-- img --><img src="http://wx4.sinaimg.cn/orj360/006N7hEIly1gfykqd7gz8j32yo4g0x6r.jpg" alt="奇妙小森林.jpg"><!-- src的相对路径(项目下的图片)和绝对路径(网络地址上的图片) -->
</body>
</html>
列表标记
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 列表标记 --><!-- 无序列表 type默认小圆点，其他的可以是圆点或者方形 --><ul type="disc"><li>Apple</li><li>HUAWEI</li><li>Mi</li></ul><!-- 有序列表 type默认阿拉伯数字，start表示从第几个阿拉伯数字开始 --><ol type="1" start="3"><li>Nike</li><li>Converse</li><li>Adidas</li></ol><!-- 自定义列表 缩进 --><dl><dt>江苏</dt><dd>南京市</dd><dd>苏州市</dd><dd>无锡市</dd></dl>
</body>
</html>
特殊字符
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 特殊字符 --><!-- 空格 -->北 京<br>左尖括号<>右尖括号<br><!-- & -->&& <br>版权所有：©<!-- 双引号 -->"下山"<!-- 定义一个锚点 --><a name="bottom"></a>
</body>
</html>
超链接
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 定义一个锚点 --><a name="top"></a><!-- 超链接 --><!-- 在新的标签页打开该链接 --><a href="https://www.bilibili.com/" target="_blank">进入哔哩哔哩网站</a><hr><!-- 在自身窗口打开该链接，默认值 --><a href="index.html" target="_self">跳转到index.html</a><!-- div用户铺满整个页面，让回到顶部有效果 --><div style="width: 100px; height: 800px; background-color: rgb(26, 180, 129);"></div><!-- 锚点，可以前往当前页面的某个位置，回到顶端 --><a href="#top">回到顶部</a><a href="index2.html#bottom" target="_blank">回到index2.html的底部</a>
</body>
</html>
表格
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 表格 --><table border="1px" cellspacing="0px" align="center" width="500px" height="300px" style="text-align: center;"><!-- cellspacing：单元格间距，一般设置为0px，这样单元格与单元格之间没有1px的间距 --><!-- cellpadding：单元格边距，说的是单元格中的文字距离单元格左侧的距离 --><!-- align：一般用在HTML标签的属性上，水平居中对齐 --><!-- text-align：一般用于CSS中，设置元素内容水平居中对齐 --><tr><th>姓名</th><th>年龄</th><th>性别</th></tr><tr><td>张三</td><td>23</td><td>男</td></tr><tr><td>李四</td><td>24</td><td>男</td></tr></table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 表格的合并单元格 --><table border="1px" cellspacing="0px" cellpadding="" width="400px" height="300px"><tr><td></td><td colspan="3"></td></tr><tr><td></td><td></td><td></td><td rowspan="2"></td></tr><tr><td></td><td></td><td></td></tr></table>
</body>
</html>
表单
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title>
</head>
<body><!-- 表单 --><form action="#" method="GET"><!-- action：表单数据提交到的页面；method：提交方式 GET/POST --><!-- GET：将请求参数拼接在url后面，多个请求参数之间使用&分隔，数据大小有限制，不安全 --><!-- POST：将请求参数封装在请求体里面，数据大小无限制，安全 -->用户名：<input type="text" name="username" placeholder="请输入用户名" required><br><!-- name属性必须提供，作为后台获取该表单数据的依据，placeholder属性为提示信息，required属性为必须填写的字段 -->密码：<input type="password" name="password" placeholder="请输入密码"><br>性别：<input type="radio" name="gender" value="0" checked id="men"><label for="men">男</label><!-- checked属性为默认值 --><input type="radio" name="gender" value="1" id="woman"><label for="woman">女</label><br><!-- 单选按钮，两个表单的name属性值必须一致，不然不能归为一组radio --><!-- label按钮：保证当用户点击男/女时，也可以选中该按钮，而不是只能点击按钮 -->爱好：<!-- 复选框 --><input type="checkbox" name="hobby" value="basketball" id="1" checked><label for="1">篮球</label><!-- checked:默认值 --><input type="checkbox" name="bobby" value="swimming" id="2"><label for="2">游泳</label><input type="checkbox" name="hobby" value="piano" id="3"><label for="3">钢琴</label><br>城市：<!-- 下拉框 --><select name="city" id=""><option value="">请选择你的城市：</option><option value="shanghai" selected>上海</option><!-- selected：默认值 --><option value="beijing">北京</option><option value="hangzhou">杭州</option></select><br><!-- date类型 -->出生日期：<input type="date" name="birthday"><br><!-- number类型 -->个数：<input type="number" name="count" start="1" max="10"><br><!-- email类型 -->邮箱：<input type="email" name="email"><br><!-- file类型 -->选择文件：<input type="file" name="uploadFile"><br><!-- 文本域 -->自我介绍：<textarea name="description" id="" cols="30" rows="10"></textarea><br><!-- reset类型 --><input type="reset" value="重置"> <input type="submit" value="注册"><!-- 提交按钮的type属性为submit --></form>
</body>
</html>
多媒体
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 多媒体 --><audio src="audio/G.E.M. 邓紫棋 _ 王嘉尔 - 热爱就一起.mp3" controls></audio><video src="video/G.E.M. 邓紫棋-我说了算（多芬秀发合作单曲）(蓝光).mp4" controls width="800px" height="400px"></video>
</body>
</html>
块标签和行标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 块标签：占据一整行，h1-h6、ul、ol、dl、div、行标签：内容有多宽占多宽，不会占据一整行，a、b、span--><!-- 典型的块标签 --><div><!-- 不带有任何样式，一张白纸，没有宽度，没有高度，没有背景 --><!-- 正是因为它很干净，所以才会使用div + css样式来构建网页 --></div><!-- 典型的行标签 --><span></span>
</body>
</html>
1、HTML超文本标记语言相关推荐
- HTML - 超文本标记语言 (Hyper Text Markup Language)
HTML - 超文本标记语言 (Hyper Text Markup Language) HTML是建设网站/网页制作主要语言. HTML是一种易于学习的标记语言. HTML使用像 <p> ...
- 超文本标记语言HTML
介绍html文档的基本结构,html常用标签的使用,理解html语言制作网页基本原理. html概述和基本结构 html概述 HTML是 HyperText Mark-up Language 的首字母 ...
- HTML 为啥称“超文本标记语言”？
作者 | 泰斗贤若如 责编 | 伍杏玲 出品 | CSDN(ID:CSDNnews) 在学习一门编程语言之前,了解它的特性,带着对特性的好奇和疑问去学习是最快最好的学习方法.就像你知道某个地方有很多宝 ...
- 超文本标记语言是指Java_超文本标记语言(HTML)
超文本标记语言(HyperText MarkUp Language,HTML) HTML是用来制作网页的标记语言,HTML不需要编译,直接由浏览器解析: HTML文件是一个文本文件,包含了一些HTML ...
- HTML(超文本标记语言)
目录 1.HTML的作用: 2.文档结构: 3.基础标签: 4.字符实体: 5.五大主流浏览器: 1.HTML的作用: 是专门给文本添加语义的,而不是修改文本形式,这些用于描述其他文本语义的文本,我们 ...
- 超文本标签语言html的主要特点,福建教师招考整理：超文本标记语言（HTML）
HTML即超文本标记语言,HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字.图形.动画.声音.表格.链接等.下面是小编整理的知识点--超文本标记语言(HTML),以供各位考生参考 ...
- python---Web前端HTML(超文本标记语言)
文章目录 Web前端开发介绍 Web概述 Web起源 Web的特点 Web工作原理 URL介绍 HTML网页结构 HTML基本结构 HTML文档规范与注释 HTML标签 文本标签 列表标签 图片标签i ...
- Web前端—01HTML超文本标记语言
文章目录 一.Wed前端开发介绍 1.Web概述 2.Web起源 3.Web的特点 4.Web工作原理 5.URL介绍 二.HTML网页结构 1.HTML介绍 2.HTML基本结构 3.文档类型 4. ...
- python进阶之web前端（01—HTML超文本标记语言）
目录 01.Web前端开发介绍 1.Web前端开发概述 2.Web起源 3.Web特点 4.Web工作原理 5.URL介绍 02.HTML网页结构 1.HTML基本结构 2.HTML文档类型 3.HT ...
- 超文本标记语言--Html
高端大气上档次的网页,低调奢华有内涵的界面,都是由静态网页和一些动态效果,插入的视频,和flash等组成,不得不说,静态网页的制作,是学习网页的必经之路,可见静态网页在学习网页的前端是十分重要.静态网 ...
最新文章
- Nature封面：AI与人类斗嘴谁更强？IBM团队发布“AI辩论家”最新研究进展
- Qt Creator添加新的自定义向导
- 何谓成功的软件架构设计
- jenkins上linux-gradle机器对android执行shell签名apk
- c语言 回合制小游戏,一个回合制小游戏的设计笔记
- Web development mistakes
- Mac下使用Wine安装PowerDesigner15
- Go 开发 HTTP 的另一个选择 fasthttp
- 林阳斌集美大学计算机学院,集美大学计算机工程学院导师教师师资介绍简介-林阳斌副教授（2021.04.06）...
- xgboost 怎么读_【泰语单词】“祸从口出”泰语怎么表达？意想不到的简单
- 职工考勤管理信息系统数据库课设_数据库课程设计职工考勤管理信息系统
- TreeUtil（树形结构转换）
- PPT画图软件，强烈推荐！提升能力的利器。
- Matlab 4. Matlab2016 不能保存数据（变量）的解决方法（中文版）-v7.3 switch
- python买书本 青少年编程电子学会python编程等级考试一级真题解析2022年3月
- 10-A. 在职研究生（多重继承）
- 三文鱼媲美。传奇si服
- 预备作业01 20162316刘诚昊
- 中国网络安全企业50强（2016年上半年）
- 虚拟时钟(Virtual clock)