【JavaEE】_HTML常用标签

目录

1.HTML结构

2. HTML常用标签

2.1 注释标签

2.2 标题标签：h1~h6

2.3 段落标签：p

2.4 换行标签：br

2.5 格式化标签

2.6 图片标签：img

2.7 超链接标签：a

2.8 表格标签

2.9 列表标签

2.10 表单标签

2.10.1 input标签

2.10.2 下拉菜单标签：select

2.10.3 多行编辑框标签：textarea

2.11 无语义标签

1.HTML结构

HTML用于描述网页骨架，是一个标签化语言；

如以下hello world程序：

<html><head></head><body> hello world</body>
</html>

（1）HTML代码是通过标签来组织的：

        形如<html> </ html>等即为标签(tag)，或称元素(element)；

（2）一个标签通常是成对出现的：

        <html>是开始标签，</ html>是结束标签，两标签之间是标签内容；

（3）标签可以嵌套，一个标签的内容可以是其他一个或多个标签：

        此时这些标签构成了一个“树形结构”；

（4）可以在开始标签中给标签赋予属性(Attribute)：

        属性相当于键值对，可以有一个或多个；

2. HTML常用标签

1. html标签

html标签是一个html文件最顶层的标签，相当于树根结点；

2. head标签

存放该页面的属性（元数据：meta data）；

3. body标签：

存放该页面包含的内容；

注：emmet快捷键功能：（主流开发工具均支持）

输入! + Tab键，即可生成一个基本页面，只需要编辑body内容即可： 

<!DOCTYPE html>     <!--声明文件类型是html文件-->
<html lang="en">    <!--lang即language，en即english，表示网页语言为英文-->
<head><!--meta标签为单标签--><meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>  <!--表示网页标题（网页标签页显示内容）-->
</head>
<body>hello world
</body>
</html>

2.1 注释标签

<!-- -->

注：（1）同其他语言一样，注释的内容不会在页面中显示。但右键查看网页源代码时是可以看到注释的；

（2）Ctrl+/ 可以快速进行注释或取消注释；

2.2 标题标签：h1~h6

从h1~h6，数字越大则字体越大，示例如下：

<!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><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>
</body>
</html>

根据目录打开文件：

注：1.在HTML中，每个标题标签都独占一行，这与代码的编写方式是无关的；

2. 在HTML源代码中写的换行会被忽略，当写空格时，有时会被忽略，有时多个空格会被视为一个空格；

2.3 段落标签：p

<!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>这是一个段落   Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe nemo ex eligendi mollitia earum quisquam, rem quasi quaerat nihil, error, incidunt inventore deserunt ad quibusdam? Voluptas sint earum quasi ipsam!</p><p>这是一个段落   Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe nemo ex eligendi mollitia earum quisquam, rem quasi quaerat nihil, error, incidunt inventore deserunt ad quibusdam? Voluptas sint earum quasi ipsam!</p><p>这是一个段落   Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe nemo ex eligendi mollitia earum quisquam, rem quasi quaerat nihil, error, incidunt inventore deserunt ad quibusdam? Voluptas sint earum quasi ipsam!</p><p>这是一个段落   Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe nemo ex eligendi mollitia earum quisquam, rem quasi quaerat nihil, error, incidunt inventore deserunt ad quibusdam? Voluptas sint earum quasi ipsam!</p></body>
</html>

根据目录打开文件：

注：1. lorem+Tab键可自动生成一段随机文本，帮助调试显示效果；

2. 每个段落之间，不只是要换行，还有一个明显的段落间距

2.4 换行标签：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>这是一个段落   Lorem ipsum dolor sit amet consectetur adipisicing elit. <br> <br>Saepe nemo ex eligendi mollitia earum quisquam, rem quasi quaerat nihil, error, incidunt inventore deserunt ad quibusdam? Voluptas sint earum quasi ipsam!</p></body>
</html>

根据目录打开文件：

注：1. <br>是一个单标签；

2.5 格式化标签

（1）加粗：strong标签和b标签；

（2）倾斜：em标签和i标签；

（3）删除线：del标签和s标签；

（4）下划线：ins标签和u标签；

<!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><strong>变粗标签strong</strong><b>变粗标签b</b><br><em>倾斜标签em</em><i>倾斜标签i</i><br><del>倾斜标签del</del><s>倾斜标签s</s><br><ins>下划线标签ins</ins><u>下划线标签u</u></body>
</html>

根据目录打开文件：

2.6 图片标签：img

1. 核心属性：src，为必填项

src描述了该图片的路径，可以是本地绝对路径，也可以是相对路径，或是网络路径；

<!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="d:/2.jpg" ><img src="./2.jpg" ><img src="2.jpg" ></body>
</html>

注：（1）相对路径一定要明确工作目录：HTML的工作目录就是该HTML文件所在的目录；

此时若创建新目录image并将2.jpg移入image目录下，再使用相对路径直接打开2.jpg就无法在网页中正常显示图片：

<img src="2.jpg" >

此时需注明image目录即可正常显示图片：

<img src="image/2.jpg" >

（ ./ 表示当前路径，../ 表示当前路径的上一级路径）

（2）也可以不使用本地照片，使用网络图片链接也可以在网页中打开图片，如：

<img src="https://c-ssl.duitang.com/uploads/blog/202107/04/20210704175902_89460.thumb.1000_0.jpeg" >

2. alt属性：当图片正常显示时，该属性不作显示；假如图片无法显示，就会显示alt对应文本：

在当前HTML文件所在目录下无3.jpg图片，此时若试打开该图片，则：

<img src="3.jpg" alt="Loading fail!">

3. title属性：鼠标悬停在图片上并给出提示；

4.width / height属性：描述图片大小；

注：1. 当只设置width和height属性中的一个时，图片会根据已设置的图片大小进行等比缩放；

2. px是像素，是前端开发中最常用的单位；

2.7 超链接标签：a

链接(link)即快捷方式，超链接即链接跳转的页面可以是当前网站之外的；

1. 属性1：href为必填项，表示点击后会跳转哪个页面：

    <a href="https://www.sogou.com">搜狗</a><a href="https://www.baidu.com">百度</a>

根据目录打开文件：

2. 属性2： target属性一般写为：target="_blank"，就可打开一个新的标签页而不替换原有界面：

    <a href="https://www.sogou.com" target="_blank">搜狗</a><a href="https://www.baidu.com" target="_blank">百度</a>

2.8 表格标签

1. table：表示整个表格

2. tr：表示一行

3. td：表示一个单元格

4. th：表示表头中的一个单元格，文字加粗；

    <table><tr><th>Name</th><th>Telephone</th></tr><tr><td>Mike</td><td>112233</td></tr><tr><td>Mary</td><td>445566</td></tr><tr><td>John</td><td>778899</td></tr></table>

根据目录打开文件：

注：1. 上述运行结果并不是一个常见的表格形式，table标签还有一些可以修饰界面的属性，如宽width，高height，边框border，将整体边框与单元格边框合二为一cellspacing等等：

    <table width="500px" height="300px" border="1px" cellspacing="0"><tr><th>Name</th><th>Telephone</th></tr><tr><td>Mike</td><td>112233</td></tr><tr><td>Mary</td><td>445566</td></tr><tr><td>John</td><td>778899</td></tr></table>

此时界面为：

2. 要想实现单元格内数据与表头对齐，需要使用css，此处仅作简单展示：

    <style>td{text-align: center;/* 令td标签中的文字都居中 */}</style>

在head标签间插入以上代码，即可实现数据居中：

2.9 列表标签

1. 有序列表：ol (ordered list)：排名分先后；

2. 无序列表：ul (unordered list)：排名不分先后；

3. 列表项：li (list item)；

    <!-- 有序列表 --><h3>Java 001</h3><ol><li>Mike</li><li>Mary</li><li>John</li><li>Alice</li></ol><!-- 无序列表 --><ul><li>Mike</li><li>Mary</li><li>John</li><li>Alice</li></ul>

根据目录打开文件： 

2.10 表单标签

表单是让用户输入信息的重要途径，分为两个部分：

（1）表单域：包含表单元素的区域，重点是form标签；

使用form进行前后端交互，即把页面上用户进行的操作或输入提交到服务器上；

（2）表单控件：输入框、提交按钮等，重点是input标签；

input标签有很多形态，能够表现成各种用户用来输入的标签；

2.10.1 input标签

    1. 单行文本框，如： <br><input type="text"> <br>2. 单行文本框（输入密码专用即输入不可视），如：<br><input type="password"> <br>3. 单选按钮，如：<br>请选择性别： <input type="radio" name="gender"> 男<input type="radio" name="gender" checked="checked"> 女<br>4. 复选框，如：<br>请选择科目：<input type="checkbox">计算机组成原理<input type="checkbox">计算机网络<input type="checkbox" checked="checked">数据结构<br>5. 按钮，如：<br><input type="button" value="提交">

根据目录打开文件：

注：1. type的值为password时，表示输入内容不可视，type值为text时表示普通单行文本输入框；

2. 实现单选按钮需要指定name属性的值相同，即可实现单选；

3. 单选框和复选框都可增加checked属性值为checked表示默认选择；

4. button属性可与value属性搭配使用，value属性的值表示按钮框上显示的内容；

5. html功能有限，更复杂的逻辑与功能（如：限制最多选择个数，点击按钮后实际进行的操作等）都需要搭配js实现；

6. 提交按钮（搭配form使用）：type="submit"，可以触发form与服务器的交互；

7. 文件选择框：

    文件选择框：<br><input type="file">

2.10.2 下拉菜单标签：select

    <select><option>北京</option><option>上海</option><option>深圳</option><option>广州</option><option>杭州</option></select>

2.10.3 多行编辑框标签：textarea

    <textarea id="" cols="30" rows="10">abcdefghigklmn</textarea>

注：input标签、select标签、textarea标签等都可称为控件，是构成一个图形化界面的基本要素；

2.11 无语义标签

无语义即表示可以用在各种场景；

1. div默认独占一行，也称为块级元素；

2. span默认是不独占一行的，称为行内元素；

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

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

C++继承(二)：菱形继承、virtual菱形虚拟继承

C++继承(二)：菱形继承、virtual菱形虚拟继承

目录 一、了解菱形继承 二、菱形继承的问题 三、虚拟继承virtual 3.1virtual 3.2虚拟继承解决数据冗余和二义性的原理 四、总结/继承和组合 一、了解菱形继承 单继承&#xff1a;一个子类只有一个直接父类时称这个继承关系为单继承 多继承&#xff1a;一个子类有两个或…
阅读更多...
C++重新入门-C++ 函数

C++重新入门-C++ 函数

函数是一组一起执行一个任务的语句。每个 C 程序都至少有一个函数&#xff0c;即主函数 main() &#xff0c;所有简单的程序都可以定义其他额外的函数。 您可以把代码划分到不同的函数中。如何划分代码到不同的函数中是由您来决定的&#xff0c;但在逻辑上&#xff0c;划分通常…
阅读更多...
春节折腾了4天，终于用上了win11和matlab2023b

春节折腾了4天，终于用上了win11和matlab2023b

这个春节折腾了4天&#xff0c;终于与时俱进用上了win11和matlab2023b。 新购的硬盘&#xff0c;顺丰快递给力2天半到手。 先折腾硬盘&#xff0c;连线&#xff0c;没有盘符&#xff0c;使用管理&#xff0c;初始化&#xff0c;格式化&#xff0c;新建卷。下载win11&#xff0…
阅读更多...
导数的定义【高数笔记】

导数的定义【高数笔记】

【含义】可以抽象成&#xff0c;在一个极其短的时间段内&#xff0c;温度差 / 时间差 【本质】瞬间的平均值 【分类】可以分成几类&#xff1f;每类需要注意的点 【导数存在的必要条件】 【导数与极限的关系】可以参考导数的定义的式子 【题型解法】分几个题型&#xff1f;每个…
阅读更多...
2.12作业

2.12作业

程序代码&#xff1a; #include<stdlib.h> #include<string.h> #include<stdio.h>//递归实现n! int n(int element) {if(0element)return 1;return element*n(element-1); }//递归实现0-n的和 int sub_sum(int element) {if(0element)return 0;return eleme…
阅读更多...
system V——进程间通信

system V——进程间通信

上一篇博客中我介绍了system V进程间通信中的内存共享&#xff0c;但是其中还有两 种通信方式&#xff1a;消息队列、和信号量&#xff0c;接下来我将简单介绍一下&#xff0c;消息队列和 信号量以及操作系统是如何看待system V进程间通信的。1. 消息队列 a. 大致介绍 消息队…
阅读更多...
用HTML5 + JavaScript绘制花、树

用HTML5 + JavaScript绘制花、树

用HTML5 JavaScript绘制花、树 <canvas>是一个可以使用脚本 (通常为JavaScript) 来绘制图形的 HTML 元素。 <canvas> 标签/元素只是图形容器&#xff0c;必须使用脚本来绘制图形。 HTML5 canvas 图形标签基础https://blog.csdn.net/cnds123/article/details/112…
阅读更多...
腾讯云4核8G服务器性能如何？支持多少用户访问？

腾讯云4核8G服务器性能如何？支持多少用户访问？

腾讯云4核8G服务器支持多少人在线访问&#xff1f;支持25人同时访问。实际上程序效率不同支持人数在线人数不同&#xff0c;公网带宽也是影响4核8G服务器并发数的一大因素&#xff0c;假设公网带宽太小&#xff0c;流量直接卡在入口&#xff0c;4核8G配置的CPU内存也会造成计算…
阅读更多...
{}初始化和初始化列表

{}初始化和初始化列表

C98标准中允许使用花括号对数组和自定义类型的变量进行初始化&#xff0c;C11扩展了大括号的用途&#xff0c;允许使用花括号对所有的内置类型和自定义类型进行初始化&#xff0c;使用时&#xff0c;可以加号&#xff0c;也可以不加。 对于自定义类型&#xff0c;当花括号中的常…
阅读更多...
windows 下安装gin

windows 下安装gin

go install 执行命令&#xff0c;执行不了的参考一下 https://blog.csdn.net/weixin_42592326/article/details/135946806 Golang 中没法下载第三方包解决办法-CSDN博客 go install github.com/gin-gonic/ginlatest 还是安装不了的话&#xff0c;用手机开热点&#xff0c;电…
阅读更多...
Avaddon勒索病毒解密工具

Avaddon勒索病毒解密工具

前言 Avaddon勒索病毒被笔者称为2020年全球十大流行勒索病毒之一&#xff0c;其首次出现于2020年6月在俄罗斯某地下黑客论坛开始出售&#xff0c;该勒索病毒使用C语言进行编写&#xff0c;采用RSA-2048和AES-256加密算法对文件进行加密&#xff0c;该勒索病毒的传播方式多种多…
阅读更多...
自动化AD域枚举和漏洞检测脚本

自动化AD域枚举和漏洞检测脚本

linWinPwn 是一个 bash 脚本&#xff0c;可自动执行许多 Active Directory 枚举和漏洞检查。该脚本基于很多现有工具实现其功能&#xff0c;其中包括&#xff1a;impacket、bloodhound、netexec、enum4linux-ng、ldapdomaindump、lsassy、smbmap、kerbrute、adidnsdump、certip…
阅读更多...
第75讲Avatar头像FooterHome实现

第75讲Avatar头像FooterHome实现

Avatar头像实现 avatar&#xff1a; <template><el-dropdown><span class"el-dropdown-link"><el-avatar shape"square" :size"40" :src"squareUrl" /></span><template #dropdown><el-drop…
阅读更多...
MySQL基本操作之数据库的操作

MySQL基本操作之数据库的操作

一.创建数据库 1.基本语法 create database 数据库名&#xff1b; 注意别忘记加分号。 2.if not exists 数据库名字是唯一的&#xff0c;所以不可以创建已存在的数据库&#xff0c;如下&#xff1a; 重复创建就会报错 所以有了if not exists这个语法&#xff0c;加上之后&…
阅读更多...
JAVA设计模式之访问模式详解

JAVA设计模式之访问模式详解

访问者模式 1 访问者模式介绍 访问者模式在实际开发中使用的非常少,因为它比较难以实现并且应用该模式肯能会导致代码的可读性变差,可维护性变差,在没有特别必要的情况下,不建议使用访问者模式. 访问者模式(Visitor Pattern) 的原始定义是&#xff1a;允许在运行时将一个或多…
阅读更多...
数据分析基础之《pandas（8）—综合案例》

数据分析基础之《pandas（8）—综合案例》

一、需求 1、现在我们有一组从2006年到2016年1000部最流行的电影数据 数据来源&#xff1a;https://www.kaggle.com/damianpanek/sunday-eda/data 2、问题1 想知道这些电影数据中评分的平均分&#xff0c;导演的人数等信息&#xff0c;我们应该怎么获取&#xff1f; 3、问题…
阅读更多...
vue3 之 商城项目—layout静态模版结构搭建

vue3 之 商城项目—layout静态模版结构搭建

layout—模块静态模版搭建 一般情况下我们会有nav区域&#xff0c;header区域&#xff0c;二级路由出口区域以及footer区域&#xff0c;如图 我们在开发的时候先把大模块搭建起来&#xff0c;再一步一步填充小模块 在layout下建文件&#xff0c;目录如下 在index.vue中把上…
阅读更多...
DP读书：《openEuler操作系统》（九）从IPC到网卡到卡驱动程序

DP读书：《openEuler操作系统》（九）从IPC到网卡到卡驱动程序

DP读书&#xff1a;《openEuler操作系统》从IPC到网卡到卡驱动程序&#xff09; 上章回顾_SPI上节回顾_TCP 网卡驱动程序简介1.设备驱动2.总线与设备3.网卡及其抽象 驱动程序的注册与注销1. 注册2. 注销 设备初始化1. 硬件初始化2. 软件初始化 设备的打开与关闭1. 设备的打开2.…
阅读更多...
阿里云带宽计费模式怎么选？如何收费的？

阿里云带宽计费模式怎么选？如何收费的？

阿里云服务器带宽计费模式分为“按固定带宽”和“按使用流量”&#xff0c;有什么区别&#xff1f;按固定带宽是指直接购买多少M带宽&#xff0c;比如1M、5M、10M、100M等&#xff0c;阿里云直接分配用户所购买的带宽值&#xff0c;根据带宽大小先付费再使用&#xff1b;按使用…
阅读更多...
javascript语法备忘

javascript语法备忘

< noscript>是不支持js的浏览器用来替换script下内容的东西。 chrome清除js缓存 基础 $(document).ready(function(){... }); // 可以简写为&#xff1a; $(function(){...func1(){} });这是在页面DOM加载完成后执行的代码&#xff0c;而windown.onload则需要在页面DOM…
阅读更多...
最新文章

Copyright @ 2022~2023