JavaEE——简单认识HTML

文章目录

  • 一、简单解释 HTML
  • 二、认识 HTML 的结构
  • 三、了解HTML中的相关标签
    • 1.注释标签
    • 2.标题标签
    • 3.段落标签 p
    • 4. 换行标签 br
    • 5.格式化标签
    • 6.图片标签
      • 解释 src
      • 解释 alt
      • 解释其他有关 img 标签的属性
    • 7.超链接标签 a
    • 8.表格标签
    • 9.列表标签
    • 10.input 标签
    • 11. select 下拉菜单以及 div&span

一、简单解释 HTML

HTML 是程序员进行前端开发的一种语言工具，相较于后端开发的语言，这种语言相对比较简单。
而且对于前端代码，我们的运行方式也是比较容易，一般用户的电脑上都不会装 jvm ，但是都会装浏览器。
浏览器就是我们前端的运行环境！！

二、认识 HTML 的结构

这里先简单罗列出一个 HTML 结构：
在这里插入图片描述

解释 HTML 中的标签

  1. HTML 代码是通过标签来组织的
    如图中所示，形如 <html> </html> 使用尖括号组成的这个东西就是 “标签(tag)”，也可以叫做 “元素(element)” 。

  2. 一个标签通常是成对出现的
    <html> 开始标签
    </html> 结束标签
    在上述两者之间就是标签的内容。

  3. 标签是可以嵌套的
    一个标签的内容可以是其他一个或者多个标签。此时这些标签构成了一个**“树形结构”**。

  4. 标签可以赋予属性
    可以在开始标签中，给标签赋予属性(Attribute)。属性相当于键值对，可以有一个或者多个。

快速生成代码框架

注：本人在这里使用的是 VScode 编译器。
快速生成框架方法：在 VScode 中首先创建 xxx.html 文件，然后直接输入 !，后按 tab 键。此时可以自动生成代码的主体框架。如图：
在这里插入图片描述
在这里插入图片描述

了解如何运行已经编写的代码

对于 HTML 要运行编写好的相关代码，在 VScode 中的步骤分为如下：

  • 右键单击要运行的 HTML 文件，选择 (在文件资源管理器中显示)。
    在这里插入图片描述
  • 进入之后，双击要运行的 HTML 文件，如图：
    在这里插入图片描述
  • 成功运行
    在这里插入图片描述

三、了解HTML中的相关标签

1.注释标签

在 HTML 中的注释和其他语言的注释，差别很大。
如图：
在这里插入图片描述
注释显而易见是不会在页面中显示的，但是，如果打开开发者工具 (在网页页面按 F12)，在网页中查看源代码还是可以看到的。如图：
在这里插入图片描述

2.标题标签

标题标签在这里分为 6 种，依次由大到小排列。从 h1——h6 ！

代码如下：

    <!--不同标题--><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>

页面展示如下：
在这里插入图片描述
注：
需要注意的是，在 html 代码中，标签的是否换行，和代码的编写方式无关。

3.段落标签 p

一个 p 段落标签囊括的内容可以让我们在网页中看到文字的分层，也就是文章的段落形式。

代码如下：

<p>这是一个段落 Lorem ipsum dolor sit amet consectetur adipisicing elit. <br><br> hic doloremque quibusdam animi dolores, voluptates culpa! Ab nemo sapiente sed doloremque sequi, reprehenderit magni eveniet, laborum ex assumenda laboriosam labore?</p>
<p>这是一个段落 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex hic doloremque quibusdam animi dolores, voluptates culpa! Ab nemo sapiente sed doloremque sequi, reprehenderit magni eveniet, laborum ex assumenda laboriosam labore?</p>
<p>这是一个段落 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex hic doloremque quibusdam animi dolores, voluptates culpa! Ab nemo sapiente sed doloremque sequi, reprehenderit magni eveniet, laborum ex assumenda laboriosam labore?</p>

页面演示如下：
在这里插入图片描述
如图所示，被 p 标签囊括的元素，在网页中的表现就是被段落的形式分割开来。

注：
这里标签中的文段，是使用随机的方式产生一段文本，专门用来调试演示效果。
输入 (Lorem) 并按 Tab 键即可自动生成。

4. 换行标签 br

这个标签还是非常简单的，这里罗列图示即可。
在这里插入图片描述
在这里插入图片描述

5.格式化标签

对于个格式化标签，这里分为 4 类。
变粗，倾斜，删除线，下划线。
下面进行简单的代码演示：

    <!--格式化标签--><strong>变粗</strong><b>变粗</b><br><em>倾斜</em><i>倾斜</i><br><del>删除线</del><s>删除线</s><br><ins>下划线</ins><u>下划线</u><br>

页面演示如下：
在这里插入图片描述

6.图片标签

对于图片标签，其代码的形式如下：

    <img src="" alt="">

观察这个形式，其中含有两个元素 src 和 alt 。

解释 src

其中最核心的属性是 src (必填)。
这个 src 描述了该图片的路径。(路径在这里有三类：1.本地的绝对路径。2.本地相对路径。3.还可以是网络路径)

  1. 绝对路径
    所谓绝对路径，就是指这个图片，存储的位置从盘符开始描述，直到对应的文件。
    在这里插入图片描述
    代码如下：
<img src="f:/picture/fengjing.jpg">

页面演示：
在这里插入图片描述
如图所示 (由于地方有限，这里就单纯演示图片部分区域)

  1. 相对路径
    所谓相对路径，就是需要当前所在的 html 文件夹内存在想要表示的图片。

代码如下：

<img src="./fengjing.jpg">

页面演示：
在这里插入图片描述
3.网络路径
所谓网络路径，也就是在 src 后写入对应图片的网址即可。

代码如下：

<img src="https://ts1.cn.mm.bing.net/th/id/R-C.987f582c510be58755c4933cda68d525?rik=C0D21hJDYvXosw&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1305%2f16%2fc4%2f20990657_1368686545122.jpg&ehk=netN2qzcCVS4ALUQfDOwxAwFcy41oxC%2b0xTFvOYy5ds%3d&risl=&pid=ImgRaw&r=0">

页面演示：
不知道为什么，这样子图片的比例就改变了。。。

解释 alt

这个 alt 属性的作用就是在图片出现问题时，就会显示 alt 对应的文本。

代码如下：

   <img src="./fengjin.jpg" alt="这是一张风景图片">

这里故意将对应的地址敲错。
页面演示：
在这里插入图片描述

解释其他有关 img 标签的属性

title 属性，当鼠标选停在图片上时，会出现一个提示。

代码如下：

<img title="这是一张美丽的风景图" src="./fengjing.jpg" alt="这是一张风景图">

注： 这里无法通过截图来演示，大家可以自行尝试。

width / height 描述图片的尺寸

代码如下：

<img width="100px" height="100px" src="./fengjing.jpg" alt="这是一张风景图">

页面展示：
在这里插入图片描述

7.超链接标签 a

对于超链接标签，也就是说可以让页面中的文字上附有链接，只需要在页面中单击，就可以跳转到相应页面。

代码如下：

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

页面展示：
在这里插入图片描述
但是，这里会有一个问题，就是当我们点击这个链接时，并不会弹出一个新的页面，而是当前的页面会被覆盖。

这里有一个属性，target，添加这个属性后，就可以打开一个新的标签页**(而不会替换原有的页面)**

代码如下：

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

8.表格标签

对于表格标签，主要的关键字有下面几个。

  • table 表示整个表格。
  • tr 表示一行。
  • td 表示一个单元格。
  • th 表示表头中的单元格
  • border 设定边框的粗细

这里先简单演示一下基本操作。
代码如下：

    <table width="500px" height="200px" border="1px"><tr><th>1</th><th>2</th></tr><tr><td>3</td><td>4</td></tr></table>

页面展示：
在这里插入图片描述
如图所示，我们发现表格的边框并不是一个实线。要解决这个问题，我们就要用到一个关键字 cellspacing。
只需要在 table 标签中将 cellspacing 设定为 0 ，就可以解决边框问题。

<table width="500px" height="200px" border="1px" cellspacing="0">

页面演示：
在这里插入图片描述

9.列表标签

对于列表标签，这里常用的关键字有下面三个：

  • 有序列表 ol
  • 无序列表 ul
  • 列表项 li

代码演示：

    <h3>我喜欢的虚拟舰船们</h3><!--有序列表--><ol><li>喀琅施塔得</li><li>中途岛</li><li>斯大林格勒</li><li>塔什干</li></ol><!--无序列表--><ul><li>喀琅施塔得</li><li>中途岛</li><li>斯大林格勒</li><li>塔什干</li></ul>

页面展示：
在这里插入图片描述

10.input 标签

对于 input 标签，有很多形态，可以表现成各种用户来输入的组件。

  1. 单行文本框
<input type="text">

在这里插入图片描述

  1. 单行密码文本框
<input type="password">

在这里插入图片描述

  1. 单选框
<input type="radio" name = "sex"> 男
<input type="radio" name = "sex"> 女

需要注意的是，这里要实现单选情况，需要添加一个 name 属性，相同的 name 属性单选框之间的值是互斥的。
在这里插入图片描述
4. 多选框

大学生每日的活动
<input type="checkbox"> 吃饭
<input type="checkbox"> 睡觉
<input type="checkbox"> 打豆豆

在这里插入图片描述

  1. 按钮
<input type="button" value = "这是一个按钮">

在这里插入图片描述
对于按钮单击之后的反应，需要 js 来配合实现。

11. select 下拉菜单以及 div&span

  • select 下拉菜单
       <select><option>北京</option><option>上海</option><option>深圳</option><option>广州</option><option>天津</option></select>

在这里插入图片描述

  • div & span

div 默认是独占一行，块级元素。
span 默认不是独占一行，行内元素。

    <div><span>北京</span><span>北京</span></div><div><span>天津</span><span>天津</span></div><div><span>上海</span><span>上海</span></div>

在这里插入图片描述

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

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

相关文章

Swagger示例

Swagger示例

对于项目完成后不用写文档,好处还是蛮大的 不需要关注项目其他 只关注接口与实体类即可 SpringBoot项目 依赖 <!--Swagger依赖--> <dependency><groupId>io.springfox</groupId><artifactId>springfox-swagger2</artifactId><version…
阅读更多...
vulnhub靶场—matrix-breakout-2-morpheus靶机

vulnhub靶场—matrix-breakout-2-morpheus靶机

一&#xff0c;实验环境 靶机ip&#xff1a;192.168.150.131攻击机ip&#xff1a;192.168.150.130 二&#xff0c;信息收集 arp-scan -l 扫描网段&#xff0c;寻找靶机ip 使用工具nmap进行端口扫描 nmap -A -T4 -p- 192.168.150.131 通过信息收集发现了靶机有80和81这两个…
阅读更多...
今天遇到Windows 10里安装的Ubuntu（WSL）的缺点

今天遇到Windows 10里安装的Ubuntu（WSL）的缺点

随着技术的发展&#xff0c;越来越多开发者转向使用 Windows Subsystem for Linux&#xff08;WSL&#xff09;在 Windows 10 上进行开发&#xff0c;也就是说不用虚拟机&#xff0c;不用准备多一台电脑&#xff0c;只需要在Windows 10/11 里安装 WSL 就能体验 Linux 系统。因此…
阅读更多...
阿里云CentOS主机开启ipv6

阿里云CentOS主机开启ipv6

目录 一、云主机开启和使用 ipv6 1、网络和交换机开启 ipv6 2、创建 / 编辑云主机&#xff0c;开启ipv6 3、安全组放行ipv6端口 二、使用 ipv6 地址进行 ssh 连接 三、ipv6 地址绑定域名 一、云主机开启和使用 ipv6 1、网络和交换机开启 ipv6 进入网络、交换机详情页面…
阅读更多...
初学Redis(Redis的启动以及字符串String)

初学Redis(Redis的启动以及字符串String)

首先使用在Windows PowerShell中输入指令来启动Redis&#xff1a; redis-server.exe 然后通过指令连接Redis&#xff1a; redis-cli 上图的127.0.0.1是计算机的回送地址 &#xff0c;6379是默认端口 上述代码中创建了两个键&#xff0c;注意Redis中严格区分大小写&#xff0…
阅读更多...
解决docker运行elastic服务端启动不成功

解决docker运行elastic服务端启动不成功

现象&#xff1a; 然后查看docker日志&#xff0c;发现有vm.max_map_count报错 ERROR: [1] bootstrap checks failed [1]: max virtual memory areas vm.max_map_count [65530] is too low, increase to at least [262144] 解决办法&#xff1a; 1. 宿主机&#xff08;运行doc…
阅读更多...
SecureCRT的“New line mode“

SecureCRT的“New line mode“

New line mode选中与不选中啥区别 在SecureCRT中&#xff0c;"New line mode"是一个关键配置项&#xff0c;主要用于解决不同操作系统之间的换行问题。当不选中"New line mode"时&#xff0c;SecureCRT会将接收到的数据按照原样发送&#xff0c;不会对数据…
阅读更多...
Hadoop学习总结（MapRdeuce的词频统计）

Hadoop学习总结（MapRdeuce的词频统计）

MapRdeuce编程示例——词频统计 一、MapRdeuce的词频统计的过程 二、编程过程 1、Mapper 组件 WordcountMapper.java package com.itcast.mrdemo;import org.apache.hadoop.io.IntWritable; import org.apache.hadoop.io.LongWritable; import org.apache.hadoop.io.Text; …
阅读更多...
HP惠普光影精灵7笔记本Victus by HP 16.1英寸游戏本16-d0000原装出厂Windows11.21H2预装OEM系统

HP惠普光影精灵7笔记本Victus by HP 16.1英寸游戏本16-d0000原装出厂Windows11.21H2预装OEM系统

下载链接&#xff1a;https://pan.baidu.com/s/1LGNeQR1AF1XBJb5kfZca5w?pwdhwk6 提取码&#xff1a;hwk6 可适用的型号&#xff1a; 16-d0111tx&#xff0c;16-d0112tx&#xff0c;16-d0125tx&#xff0c;16-d0127tx&#xff0c;16-d0128tx&#xff0c;16-d0129tx&#…
阅读更多...
MySql的C语言API

MySql的C语言API

创建数据库&#xff08;开辟堆空间资源&#xff09; 连接数据库 查询数据库 获取查询结果&#xff0c;获取一行信息 mysql_use_result这个函数并不会真正获取数据&#xff0c;只有当使用mysql_fetch_row才真正获取 数据 mysql_store_result会直接把所有查询结果存储下来 释…
阅读更多...
Python武器库开发-flask篇之Get与Post(二十五)

Python武器库开发-flask篇之Get与Post(二十五)

flask篇之Get与Post(二十五) 在Flask中通过request对象请求相关的数据,在正常的网页请求的过程中&#xff0c;有两种请求的方式&#xff0c;Get和Post Get请求 我们现在来看看在Flask中是如何以Get方式得到我们想要的值的&#xff0c;通过request.args可以获取Get请求中的所…
阅读更多...
开源与闭源软件的辩论：对大模型技术发展的影响

开源与闭源软件的辩论：对大模型技术发展的影响

目录 前言1 开源软件的优缺点1.1 开源软件的优点1.2 开源软件的缺点和挑战 2 闭源软件的优缺点2.1 闭源软件的优点2.2 闭源软件的缺点和挑战 3 大模型发展会走向哪一边结语 前言 近期&#xff0c;特斯拉CEO马斯克公开表示&#xff1a;OpenAI不该闭源&#xff0c;自家首款聊天机…
阅读更多...
uniapp大概是怎么个开发法（前端）

uniapp大概是怎么个开发法（前端）

写在前面&#xff0c;博主是个在北京打拼的码农&#xff0c;从事前端工作5年了&#xff0c;做过十多个大大小小不同类型的项目&#xff0c;最近心血来潮在这儿写点东西&#xff0c;欢迎大家多多指教。 对于文章中出现的任何错误请大家批评指出&#xff0c;一定及时修改。有任何…
阅读更多...
mmdet 3.x 打印各类指标

mmdet 3.x 打印各类指标

和mmdet2.x中的修改地方不一样&#xff0c;在mmdet/evaluation/metrics/coco_metric.py中第72行将classwise设为True就可以打印各类指标了 但是在test的时候一直都是什么指标都不打印&#xff0c;不管是上面总的指标还是下面的各类指标&#xff0c;暂时不知道怎么处理 找到原因…
阅读更多...
使用Pandas进行时间重采样，充分挖掘数据价值

使用Pandas进行时间重采样，充分挖掘数据价值

大家好&#xff0c;时间序列数据蕴含着很大价值&#xff0c;通过重采样技术可以提升原始数据的表现形式。本文将介绍数据重采样方法和工具&#xff0c;提升数据可视化技巧。 在进行时间数据可视化时&#xff0c;数据重采样是至关重要且非常有用的&#xff0c;它支持控制数据的…
阅读更多...
STM32 HAL库函数HAL_SPI_Receive_IT和HAL_SPI_Receive的区别

STM32 HAL库函数HAL_SPI_Receive_IT和HAL_SPI_Receive的区别

背景 前段时间开发一个按键板驱动&#xff0c;该板用的STM32F103系列单片机&#xff0c;前任工程师用STM32CubeMX生成的工程&#xff0c;里面全是HAL库调用&#xff0c;我接手后&#xff0c;学习了下HAL库的用法&#xff0c;踩坑不少&#xff0c;特别是带IT后缀的函数&#xf…
阅读更多...
时序预测 | Python实现ConvLSTM卷积长短期记忆神经网络股票价格预测（Conv1D-LSTM）

时序预测 | Python实现ConvLSTM卷积长短期记忆神经网络股票价格预测（Conv1D-LSTM）

时序预测 | Python实现ConvLSTM卷积长短期记忆神经网络股票价格预测（Conv1D-LSTM） 目录 时序预测 | Python实现ConvLSTM卷积长短期记忆神经网络股票价格预测（Conv1D-LSTM）预测效果基本介绍程序设计参考资料预测效果 基本介绍 时序预测 | Python实现ConvLSTM卷积长短期记忆神…
阅读更多...
多视图聚类的论文阅读

多视图聚类的论文阅读

当聚类的方式使用的是某一类预定义好的相似性度量时&#xff0c; 会出现如下情况&#xff1a; 数据聚类方面取得了成功&#xff0c;但它们通常依赖于预定义的相似性度量&#xff0c;而这些度量受原始方法的影响:当输入维数相对较高时&#xff0c;往往是无效的。 1. Deep Mult…
阅读更多...
Flink1.17 DataStream API

Flink1.17 DataStream API

目录 一.执行环境&#xff08;Execution Environment&#xff09; 1.1 创建执行环境 1.2 执行模式 1.3 触发程序执行 二.源算子&#xff08;Source&#xff09; 2.1 从集合中读取数据 2.2 从文件读取数据 2.3 从 RabbitMQ 中读取数据 2.4 从数据生成器读取数据 2.5 …
阅读更多...
单片机，0.06

单片机，0.06

阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023