【前端三剑客之HTML】详解HTML

news/2024/7/14 19:18:36/文章来源:https://blog.csdn.net/2301_80912559/article/details/139157816

1. HTML(超文本标记语言)

  • HTML意为超文本标记语言,其可以通过标签把其他网页/图片/视频等资源引入到当前网页中,让网页最终呈现出来的效果超越了文本.
  • HTML是一种标记语言,其是由一系列标签组成的. 而且每个标签都有特定的含义和确定的页面显示效果.

2. 特点

(1). 双标签

标签是通过一组尖括号+标签名的方式来定义的.

<title>及你太美</title>
<!-->
<title>称为开始标签
</title>称为结束标签, 二者共同构成了完整的标签.
其之间的部分叫标签体
<-->

(2). 单标签

<meta charset="UTF-8"/>
<!-->
此标签为单标签, 只有一对尖括号
<-->

(3). 属性

<meta charset="UTF-8"/>
<!-->
属性 : charset="UTF-8"
属性名 : charset
属性值 : "UTF-8"
<-->

(4). 文本

双标签中间的文字,包含空格换行的结构.

(5). 元素

经过浏览器解析后,每个完整的标签可以称之为一个元素.

3. HTML基本结构

(1). 文档声明

HTML文件中第一行的内容,用来告诉浏览器当前HTML文档的基本信息以及HTML文档遵循的语法规则.

<!DOCTYPE html>

(2). 根标签

<html></html>是整个文档的根标签,所有其他标签都必须放在根标签里面.

<html></html>

(3). 头部元素

<head></head>标签是<html></html>第一个一级子标签,用来定义文档的头部,其他头部元都放在head标签里,头部元素包括title,script,style,link,meta标签等.

很重要但不显示在网页页面的标签都定义在该标签内.

<head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width", initial-scale="1.0"/><title>及你太美</title>
</head>

(4). 主体内容

<body></body>标签是<html></html>第二个一级子标签,用来标签定义网页的主体内容,在浏览器窗口内显示的内容都定义到body标签内.

(5). 注释

<!-->
注释信息
<-->

4. 常见标签

(1). 标题标签

标题标签一般用于在页面上定义一些标题性内容,有h1到h6级标题.h1标题字体最大.

<!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>一级大标题</h1><h2>二级大标题</h2><h6>六级大标题</h6>
</body>
</html>

(2). 段落标题与换行标题

如果只是简单的手动换行,浏览器解析时是不会有换行效果的.此时换行应用换行标签br.

<!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><!-- 段落标签 --><p>-------这是一个段落-------</p><!-- 换行标签 --><br/><!-- 有分隔符的换行标签 --><hr/>
</body>
</html>

(3). 列表标签

列表标签常用的有有序列表与无序列表. 列表标签内可嵌套列表标签.

<!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><!-- 有序列表  orderlist --><Ol><li>JAVA</li><li>C#</li><li>C++</li><li>Python</li></Ol><!-- 无序列表  unorderlist --><ul><li>JAVA</li><li>C#</li><li>C++</li><li>Python</li></ul></body>
</html>

(4). 超链接标签

点击后跳转链接标签.

  • href属性用于定义链接地址.链接地址可使用绝对路径. 也可以使用相对路径.相对路径以当前文件所在路径为出发点,./开头表示当前路径。 ../开头表示上一层路径.
  • target属性用于定义链接打开的方式.
  • _blank在新窗口打开目标资源.
  • _self在当前窗口打开目标资源.
<!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><!-- 链接该html文件, 也可以链接其他网站 --><a href="http://atguigu.com" target="_blank">是兄弟就来点我</a><hr/><a href="http://atguigu.com" target="_self">兄弟来砍我</a>
</body>
</html>

(5). 多媒体标签

img图片标签,用于在页面上引入图片.

  • src用于定义图片的链接.
  • title属性用于定义鼠标悬停时显示的文字.
  • alt属性用于定义图片加载失败时提示的文字.
<!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 src="test01HTML\img\屏幕截图 2024-05-23 210305.png" title="海绵宝宝" alt="海绵宝宝死了" />
</body>
</html>

(6). 表格标签

  • table标签表示表格.
  • thead标签表示表头.可以省略不写.
  • tbody标签表示表体,可以省略不写.
  • tfoot标签表示表尾,可省略不写.
  • tr表示一行.
  • td标签代表行内一格.
  • th标签自带加粗和居中效果的td.
<!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="4px" style="width: 400px; margin: 2px auto;"><tr><th>名字</th><th>年龄</th><th>性别</th><th>游戏</th></tr><tr><th>红夫人</th><th>23</th><th>女</th><th rowspan="3">第五人格</th></tr><tr><th>杰克</th><th>34</th><th>男</th></tr><tr><th>鹿头</th><th>55</th><th>男</th></tr></table>
</body>
</html>
  • 还可以使用td的rowspan属性实现上下跨行.
  • 可以使用td的colspan属性实现左右跨列.

d9e8c5236c214705b6a113df21281a03.png

(7). 表单标签

表单标签,可以让用户在界面上输入各种信息并提交的一种标签,是向服务器发送数据的主要方式之一.

  • form标签,表单标签,其内部用于定义可以让用户输入信息的表单项标签.
  • action属性 : 用于定义信息提交的服务器地址.
  • method属性 : 用于定义信息的提交方式.get方式提交,数据会缀到URL后,以?作为参数开始的标志.多个参数用&隔开.post方式提交.数据会通过请求体发送,不会缀到URL后.
  • input属性 : 主要的表单项标签. 用于定义提交的参数名.
  • type属性 : 用于定义表单项类型.text文本框.password密码框.submit提交框.reset重置框.
<!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><form action="http://www.atguigu.com" method="get">用户名<input type="text" name="usename"/><br />密码<input type="password" name="password" /><br /><input type="submit" value="登录" /><input type="reset" value="重置" /></form>
</body>
</html>

c13cbf4e5d00403ab33a37731d9dcd3d.png

(8). 常见表单项标签

单行文本框text.密码框password.

单选框radio.name属性相同的radio为一组,组内互斥.设置checked="checked"属性设置默认被选中的radio.

<!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><form action="http://www.atguigu.com" method="get">用户名<input type="text" name="usename"/><br />密码<input type="password" name="password" /><br /><input type="submit" value="登录" /><input type="reset" value="重置" />您的性别是<!-- name属性相同. 为一组 --><input type="radio" name="sex" value="boy"/>男<!-- checked属性则默认该选项 --><input type="radio" name="sex" value="gril" checked="checked"/>女</form></body>
</html>

复选框checkbox略.

下拉框select.

select标签定义下拉列表.option标签设置选项.name属性在select标签设置. value属性在option标签设置. 设置selected="selected"属性实现默认选中.

<!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><form action="http://www.atguigu.com" method="get">用户名<input type="text" name="usename"/><br />密码<input type="password" name="password" /><br /><input type="submit" value="登录" /><input type="reset" value="重置" />您的性别是<!-- name属性相同. 为一组 --><input type="radio" name="sex" value="boy"/>男<!-- checked属性则默认该选项 --><input type="radio" name="sex" value="gril" checked="checked"/>女<br />游戏<select name="youxi"><option value="diwu" selected="selected">第五人格</option><option value="wangzhe">王者荣耀</option><option value="chiji">吃鸡</option></select></form>
</body>
</html>

按钮button.

多行文本框textarea.

(9). 布局相关标签.

  • div标签,块,用于划分页面结构.做页面布局.
  • span标签. 层,用于划分元素范围,配合css做页面元素样式修饰.
  • 二者都是双标签.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_1052239.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网络其他重要协议(DNS、ICMP、NAT)

1.DNS DNS是一整套从域名映射到IP的系统 1.1 DNS背景 TCP/IP中使用IP地址和端口号来确定网络上的一台主机的一个程序&#xff0c;但是IP地址不方便记忆&#xff0c;例如我们想访问百度就会在浏览器中输入baidu.com而不是百度的IP地址。于是人们发明了一种叫主机名的东西, 是…

BFS解决最短路问题(详解)

目录 BFS简介 && 框架&#xff1a; 一.二叉树的最小深度 二&#xff1a;迷宫中里入口最近的出口&#xff1a; 三.最小基因变化: 四&#xff1a;单词接龙&#xff1a; ​五&#xff1a;为高尔夫比赛砍树&#xff1a; BFS简介 && 框架&#xff1a; 说到BFS…

在C++中自定义命名空间,在命名空间中定义string变量,同时定义一个函数实现单词逆置

代码 #include <iostream> #include <cstring> using namespace std; namespace my_space {string s;void reverse(string s);//定义逆置函数 } using namespace my_space; void my_space::reverse(string s){int lens.size();int i0;int jlen-1;while(i<j){//…

CIM模型

CIM 是 Esri 制图信息模型。 它是一个地图内容规范,用于记录在保存、读取、引用或打开时如何永久保留描述不同项目组件的信息。 该规范以 JSON 表示,适用于 ArcGIS 应用程序和 API 中的地图、场景、布局、图层、符号和样式。 CIM 不仅限于制图设置。 要了解属性的组织方式以及…

如何停止 iPad 和 iPhone 之间共享短信,独立接收和发送消息

概括 在当今高度互联的数字世界中&#xff0c;Apple 设备之间的无缝连接性提供了极大的便利&#xff0c;尤其是在消息同步方面。iPhone 和 iPad 用户通常可以享受到设备间短信的自动同步功能&#xff0c;这意味着无论是在哪个设备上&#xff0c;用户都可以接收和回复消息。然而…

六.逼格拉满-Prometheus+Grafana微服务监控告警

前言 微服务架构是一个分布式系统&#xff0c;由多个独立的服务组成&#xff0c;每个服务可能运行在不同的容器、虚拟机或物理机上&#xff0c;那么在生产环境中我们需要随时监控服务的状态&#xff0c;以应对各种突发情况&#xff0c;比如&#xff1a;内存爆满&#xff0c;CP…

【Oracle篇】rman工具实用指南:常用命令详解与实践(第二篇,总共八篇)

&#x1f4ab;《博主介绍》&#xff1a;✨又是一天没白过&#xff0c;我是奈斯&#xff0c;DBA一名✨ &#x1f4ab;《擅长领域》&#xff1a;✌️擅长Oracle、MySQL、SQLserver、阿里云AnalyticDB for MySQL(分布式数据仓库)、Linux&#xff0c;也在扩展大数据方向的知识面✌️…

[NISACTF 2022]easyssrf、[NISACTF 2022]level-up

[NISACTF 2022]easyssrf 使用dirsearch扫描后没发现什么路径 尝试访问127.0.0.1&#xff0c;成功了 访问127.0.0.1/flag.php提示有文件/fl4g 使用file://协议读取文件/fl4g&#xff0c;提示除此页面外还有一个ha1x1ux1u.php页面。 file:///fl4g 直接访问&#xff0c;发现GET…

google浏览器下载和相应驱动下载

1、chromedriver 115及115之后版本下载地址&#xff1a; https://googlechromelabs.github.io/chrome-for-testing/ 2、chromedriver 115之前版本下载地址&#xff08;已停止更新115及之后版本&#xff09;&#xff1a; http://chromedriver.storage.googleapis.com/index.html…

PVE 虚拟机环境下删除 local-lvm分区

1、删除逻辑卷 lvremote pve/data 2、扩展逻辑卷 lvextend -l 100%FREE -r pve/root 3、 修改存储目录内容 点击 Datacenter - Storage &#xff08;1&#xff09;删除local-lvm分区 &#xff08;2&#xff09;编辑local分区&#xff0c;在内容一项中勾选所有可选项。

python数据处理与分析入门-Pandas数据可视化例子

相关内容 Matplotlib可视化练习 Pandas 数据可视化总结 柱状图 reviews[points].value_counts().sort_index().plot.bar()散点图 reviews[reviews[price] < 100].sample(100).plot.scatter(xprice, ypoints)蜂窝图 reviews[reviews[price] < 100].plot.hexbin(xprice…

C++:vector基础讲解

hello&#xff0c;各位小伙伴&#xff0c;本篇文章跟大家一起学习《C&#xff1a;vector基础讲解》&#xff0c;感谢大家对我上一篇的支持&#xff0c;如有什么问题&#xff0c;还请多多指教 &#xff01; 如果本篇文章对你有帮助&#xff0c;还请各位点点赞&#xff01;&#…

分类和品牌关联

文章目录 1.数据库表设计1.多表关联设计2.创建表 2.使用renren-generator生成CRUD1.基本配置检查1.generator.properties2.application.yml 2.生成代码1.进入localhost:81生成代码2.将main目录覆盖sunliving-commodity模块的main目录 3.代码检查1.注释掉CategoryBrandRelationC…

沃飞携AE200真机亮相澳门,全方位赋能城市低空出行

5月22日-25日&#xff0c;第四届BEYOND国际科技创新博览会&#xff08;BEYOND Expo 2024&#xff09;在澳门盛大举行。吉利沃飞长空携旗下全自研产品AE200真机亮相&#xff0c;吸引了现场众多领导嘉宾以及媒体、观众的关注。 作为亚洲顶尖的年度科技盛会&#xff0c;本届BEYOND…

面试-软件工程与设计模式相关,Spring简介

面试-软件工程与设计模式相关&#xff0c;Spring简介 1.编程思想1.1 面向过程编程1.2 面向对象编程1.2.1 面向对象编程三大特征 1.3 面向切面编程1.3.1 原理1.3.2 大白话&#xff1f;1.3.3 名词解释1.3.4 实现 2. 耦合与内聚2.1 耦合性2.2 内聚性 3. 设计模式3.1 设计模型七大原…

nodejs安装配置

nodejs安装 打开nodejs官网(https://nodejs.org/en/download/package-manager)&#xff0c;参考安装步骤操作。 更新镜像源 输入以下命令&#xff0c;将npm的镜像源设置为淘宝镜像。网上资料中&#xff0c;淘宝镜像地址多为https://registry.npm.taobao.org&#xff0c;这个…

js之图片上传

话不多说&#xff0c;直接上干货&#xff0c;注释在代码里面 下面是效果图和代码 <!DOCTYPE html> <html lang"zh"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-sca…

景源畅信:新手做抖音运营难不难?

在这个信息爆炸的时代&#xff0c;社交媒体平台如抖音已经成为了人们日常生活中不可或缺的一部分。随着抖音的兴起&#xff0c;越来越多的人开始尝试进入这个领域&#xff0c;希望通过抖音运营实现自己的价值。然而&#xff0c;对于新手来说&#xff0c;抖音运营是否真的容易呢…

现代前端工程化实践:Git、Husky、Commitlint与PNPM的协同作战

引言 Git Husky 与 Commitlint 是两个在 Git 工作流程中非常实用的工具&#xff0c;它们可以帮助团队维护代码质量和提交规范。Husky 是一个 Git 钩子管理器&#xff0c;允许你在仓库级别方便地配置钩子脚本&#xff1b;而 Commitlint 则是用来规范 Git 提交信息的工具&#x…

Bootstrap5

Bootstrap5-容器 容器是Bootstrap—个基本的构建块&#xff0c;它包含、填充和对齐给定设备或视口中的內容。 Bootstrap 需要一个容器元素来包裏网站的内容 我们可以使用以下两个容器类&#xff1a; .container 类用于固定宽度并支持响应式布局的容器。.container-fluid 类用…