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.mzph.cn/news/147664.shtml

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

相关文章

网络协议 WebSocket

网络协议 WebSocket

一、介绍 WebSocket 是基于 TCP 的一种新的网络协议。它实现了浏览器与服务器全双工通信——浏览器和服务器只需要完成一次握手&#xff0c;两者之间就可以创建持久性的连接&#xff0c; 并进行双向数据传输 1、HTTP协议和WebSocket协议对比 HTTP 是短连接WebSocket 是长连接H…
阅读更多...
XSS靶场level1解题思路

XSS靶场level1解题思路

001 分析题目 此时URL链接是&#xff1a; http://xss-ctf.xiejiahe.com/level1?nametest 第一关页面内容 欢迎来到level1 欢迎用户test 一张图片 IT’S easy &#xff08;它是容易的&#xff09; payload的长度:4 可以看到此时URL链接拼接了一个name参数&#xff0c;值为test…
阅读更多...
Python (十二) 模块、包

Python (十二) 模块、包

模块 模块是以 .py后缀的文件&#xff0c;包含所有定义的函数和变量的文件。 模块可以被别的程序引入&#xff0c;以使用该模块中的函数等功能&#xff0c;如python 标准库、第三方模块等。 导入模块用关键词-import,from ...import 引入python标准库math模块 import math #调用…
阅读更多...
【brpc学习案例实践一】rpc服务构造基本流程

【brpc学习案例实践一】rpc服务构造基本流程

前言 在crpc框架中&#xff0c;brpc简直越用越爽&#xff0c;平时工作中也常用到brpc&#xff0c;一直没来得及总结&#xff0c;抽空写点&#xff0c;也供自己查阅用。下附几个常用学习地址&#xff1a; brpc官网开源地址&#xff1a; https://github.com/luozesong/brpc/blob…
阅读更多...
kubectl 本地远程链接k8s多个集群，远程管控多集群，查看日志 部署服务（windows版）

kubectl 本地远程链接k8s多个集群，远程管控多集群，查看日志 部署服务（windows版）

文章目录 一、前言二、windows上安装kubectl和mobaxterm2.1 准备安装包2.2 安装kubectl2.3 链接k8s集群2.4 查看某一个pod的容器日志2.5 切换context 上下文配置&#xff0c;实现在多个k8s集群间动态切换 一、前言 现如今是一个万物皆上云 的时代&#xff0c;各种云层出不穷&am…
阅读更多...
hive sql多表练习

hive sql多表练习

hive sql多表练习 准备原始数据集 学生表 student.csv 讲师表 teacher.csv 课程表 course.csv 分数表 score.csv 学生表 student.csv 001,彭于晏,1995-05-16,男 002,胡歌,1994-03-20,男 003,周杰伦,1995-04-30,男 004,刘德华,1998-08-28,男 005,唐国强,1993-09-10,男 006,陈道…
阅读更多...
WMS重力式货架库位对应方法

WMS重力式货架库位对应方法

鉴于重力式货架的特殊结构和功能&#xff0c;货物由高的一端存入&#xff0c;滑至低端&#xff0c;从低端取出。所以重力式货架的每个货位在物理上都会有一个进货口和一个出货口。因此&#xff0c;在空间上&#xff0c;对同一个货位执行出入库操作需要处于不同的位置。 比如对…
阅读更多...
使用python将多个PDF文件合并成一个

使用python将多个PDF文件合并成一个

使用python将多个PDF文件合并成一个 前面需求是&#xff0c;将很多PDF文章内容整合成一个PDF文件 首先你要 pip install PyPDF2 安装好这个组件库 然后使用下面的代码 from PyPDF2 import PdfReader, PdfMerger import oswk_in_file_path rD:/items_python/pdfdoc/input/ #里…
阅读更多...
【2023年csp-j第二轮】第一题解析

【2023年csp-j第二轮】第一题解析

我们先看题目 题目描述 小 Y 的桌子上放着 n 个苹果从左到右排成一列&#xff0c;编号为从 11到 n。 小苞是小 Y 的好朋友&#xff0c;每天她都会从中拿走一些苹果。 每天在拿的时候&#xff0c;小苞都是从左侧第 1 个苹果开始、每隔 2 个苹果拿走 1 个苹果。随后小苞会将剩下的…
阅读更多...
PostgreSQL 数据定义语言 DDL

PostgreSQL 数据定义语言 DDL

文章目录 表创建主键约束非空唯一约束检查约束外键约束默认值约束 触发器表空间构建表空间 视图索引索引的基本概念索引的分类创建索引 物化视图 表创建 PostgreSQL表的构建语句与所有数据库都一样&#xff0c;结构如下&#xff0c;其核心在于构建表时&#xff0c;要指定上一些…
阅读更多...
【算法挨揍日记】day29——139. 单词拆分、467. 环绕字符串中唯一的子字符串

【算法挨揍日记】day29——139. 单词拆分、467. 环绕字符串中唯一的子字符串

139. 单词拆分 139. 单词拆分 题目描述&#xff1a; 给你一个字符串 s 和一个字符串列表 wordDict 作为字典。请你判断是否可以利用字典中出现的单词拼接出 s 。 注意&#xff1a;不要求字典中出现的单词全部都使用&#xff0c;并且字典中的单词可以重复使用。 解题思路&am…
阅读更多...
（免费领源码）python+django+mysql线上兼职平台系统83320-计算机毕业设计项目选题推荐

（免费领源码）python+django+mysql线上兼职平台系统83320-计算机毕业设计项目选题推荐

摘 要 信息化社会内需要与之针对性的信息获取途径&#xff0c;但是途径的扩展基本上为人们所努力的方向&#xff0c;由于站在的角度存在偏差&#xff0c;人们经常能够获得不同类型信息&#xff0c;这也是技术最为难以攻克的课题。针对线上兼职等问题&#xff0c;对线上兼职进行…
阅读更多...
【如何学习Python自动化测试】—— 页面元素定位

【如何学习Python自动化测试】—— 页面元素定位

接上篇自动化测试环境搭建&#xff0c;现在我们介绍 webdriver 对浏览器操作的 API。 2、 页面元素定位 通过自动化操作 web 页面&#xff0c;首先要解决的问题就是定位到要操作的对象&#xff0c;比如要模拟用户在页面上的输入框中输入一段字符串&#xff0c;那就必须得定位到…
阅读更多...
milvus数据库索引管理

milvus数据库索引管理

一、建立向量索引 默认情况下&#xff0c;Milvus不会对小于1,024行的段进行索引。 1.准备索引参数 index_params {"metric_type":"L2","index_type":"IVF_FLAT","params":{"nlist":1024} } #"nlist"…
阅读更多...
YOLOv8改进 | 如何在网络结构中添加注意力机制、C2f、卷积、Neck、检测头

YOLOv8改进 | 如何在网络结构中添加注意力机制、C2f、卷积、Neck、检测头

一、本文介绍 本篇文章的内容是在大家得到一个改进版本的C2f一个新的注意力机制、或者一个新的卷积模块、或者是检测头的时候如何替换我们YOLOv8模型中的原有的模块&#xff0c;从而用你的模块去进行训练模型或者检测。因为最近开了一个专栏里面涉及到挺多改进的地方&#xff…
阅读更多...
CSS特效014：模仿钟摆效果

CSS特效014：模仿钟摆效果

CSS常用示例100专栏目录 本专栏记录的是经常使用的CSS示例与技巧&#xff0c;主要包含CSS布局&#xff0c;CSS特效&#xff0c;CSS花边信息三部分内容。其中CSS布局主要是列出一些常用的CSS布局信息点&#xff0c;CSS特效主要是一些动画示例&#xff0c;CSS花边是描述了一些CSS…
阅读更多...
buuctf-web-p6 [NPUCTF2020]web 狗

buuctf-web-p6 [NPUCTF2020]web 狗

java: HelloWorld.class import java.io.PrintStream;public class HelloWorld {public static void main(String[] paramArrayOfString){System.out.println("众所周知&#xff0c;你是一名WEB选手&#xff0c;掌握javaweb也是一项必备技能&#xff0c;那么逆向个java应…
阅读更多...
Shell脚本：Linux Shell脚本学习指南（第一部分Shell基础）一

Shell脚本：Linux Shell脚本学习指南（第一部分Shell基础）一

你好&#xff0c;欢迎来到「Linux Shell脚本」学习专题&#xff0c;你将享受到免费的 Shell 编程资料&#xff0c;以及很棒的浏览体验。 这套 Shell 脚本学习指南针对初学者编写&#xff0c;它通俗易懂&#xff0c;深入浅出&#xff0c;不仅讲解了基本知识&#xff0c;还深入底…
阅读更多...
高阶数据结构---树状数组

高阶数据结构---树状数组

文章目录 楼兰图腾一个简单的整数问题 一个简单的整数问题2谜一样的牛 一、楼兰图腾OJ链接 二、一个简单的整数问题OJ链接 三、一个简单的整数问题2OJ链接 四、谜一样的牛OJ链接
阅读更多...
云原生微服务架构图

云原生微服务架构图

云原生微服务架构的具体架构图会根据应用程序的需求、规模和业务场景而有所不同。以下是一个通用的云原生微服务架构图&#xff0c;具体每层的组件可能有所不同&#xff1a; 用户界面层&#xff1a; Web应用或移动应用&#xff1a; 提供用户访问和交互的前端应用。API Gateway&…
阅读更多...
最新文章

Copyright @ 2022~2023