【JavaEE进阶】HTML

embedded/2024/11/14 15:37:59/
htmledit_views">

本节⽬标

  • 认识 HTML 的基本结构, 学习常⽤的 HTML 标签.

 一 HTML基础

1.什么是HTML

HTML(Hyper Text Markup Language), 超⽂本标记语⾔.

超⽂本: ⽐⽂本要强⼤. 通过链接和交互式⽅式来组织和呈现信息的⽂本形式. 不仅仅有⽂本, 还可能包含图⽚, ⾳频, 或者⾃已经审阅过它的学者所加的评注、补充或脚注等等.

标记语⾔: 由标签构成的语⾔

HTML的标签都是提前定义好的, 使⽤不同的标签, 表⽰不同的内容.

类似⻜书⽂档, Word⽂档

如果选中⽂本, 点击标题1, 就会使⽤标题1的样式来显⽰⽂本, 上述标题1就是⼀个"标签"

⽐如下⽅代码:

html"><h1>我是⼀级标题</h1>
<h2>我是⼆级标题</h2>
<h3>我是三级标题</h3>

经过浏览器解析后的效果如下:

上⾯代码中的<h1> <h2> <h3> 就是标签

学习HTML 主要就是学习标签.

2.认识 HTML 标签

HTML 代码是由 "标签" 构成的.

形如:

<h3>我是三级标题</h3>

•标签名 (body) 放到 < > 中

•⼤部分标签成对出现. <h1> 为开始标签, </h2> 为结束标签.

•少数标签只有开始标签, 称为 "单标签".

•开始标签和结束标签之间, 写的是标签的内容.

开始标签中可能会带有 "属性". id 属性相当于给这个标签设置了⼀个唯⼀的标识符(⾝份证号码).

html"><h3 id="myId">我是三级标题</h3>

3.HTML ⽂件基本结构

html"><!DOCTYPE html>
<html><head><title></title></head><body></body>
</html>

• html 标签是整个 html ⽂件的根标签(最顶层标签)

• head 标签中写⻚⾯的属性.

• body 标签中写的是⻚⾯上显⽰的内容

• title 标签中写的是⻚⾯的标题.

4.标签层次结构

• ⽗⼦关系

• 兄弟关系

其中:

• head 和 body 是 html 的⼦标签(html 就是 head 和 body 的⽗标签)

• title 是 head 的⼦标签. head 是 title 的⽗标签.

• head 和 body 之间是兄弟关系.

可以使⽤ chrome 的开发者⼯具查看⻚⾯的结构.

 F12 或者右键审查元素, 开启开发者⼯具, 切换到 Elements 标签, 就可以看到⻚⾯结构细节.

标签之间的结构关系, 构成了⼀个 DOM树

DOM 是 Document Object Mode (⽂档对象模型) 的缩写.

二 HTML 快速⼊⻔

1.开发⼯具

        HTML 可以使⽤系统⾃带的记事本来编写, 但是⾮常不⽅便, 我们课程中使⽤前端专业的开发⼯具:Visual Studio Code

        Visual Studio Code（简称"VS Code"）是Microsoft在2015年4⽉30⽇Build开发者⼤会上宣布的⼀款跨平台源代码编辑器. 可以运⾏在Windows, macOS 和Linux上. 它具有对JavaScript，TypeScript和 Node.js的内置⽀持，并具有丰富的其他语⾔(例如C++，C＃，Java，Python，PHP，Go).

• 官⽹： https://code.visualstudio.com

进⾏下载, 安装即可.

2.快速开发

在 VS Code中创建⽂件 xxx.html , 直接输⼊ ! , 按 Enter或 tab 键, 此时能⾃动⽣成代码的主体框

架.

html"><!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>我的第一个HTML文件</title>
</head>
<body><h1></h1>
</body>
</html>

 细节解释:

• <!DOCTYPE html> 称为 DTD (⽂档类型定义), 描述当前的⽂件是⼀个 HTML5 的⽂件.

• <html lang="en"> 其中 lang 属性表⽰当前⻚⾯是⼀个 "英语⻚⾯". 这⾥暂时不⽤管. (有些

浏览器会根据此处的声明提⽰是否进⾏⾃动翻译).

• <meta charset="UTF-8"> 描述⻚⾯的字符编码⽅式. 没有这⼀⾏可能会导致中⽂乱码.

• <meta name="viewport" content="width=device-width, initial-scale=1.0">

• name="viewport" 其中 viewport 指的是设备的屏幕上能⽤来显⽰我们的⽹⻚的那⼀块

区域.

• content="width=device-width, initial-scale=1.0" 在设置可视区和设备宽度等宽, 并设置初始缩放为不缩放. (这个属性对于移动端开发更重要⼀些).

在<body></body>标签中, 任意书写⽂字, 按Ctrl + s 保持⽂件, 通过浏览器访问即可.

3.HTML常⻅标签

行级标签：h1-h6、p、div

块级标签：a、input、span

（1）标题标签 h1-h6

有六个, 从 h1 - h6. 数字越⼤, 则字体越⼩.

html">	<h1>hello</h1><h2>hello</h2><h3>hello</h3><h4>hello</h4><h5>hello</h5><h6>hello</h6>

（2）段落标签: p

在HTML中, 段落, 换⾏符, 空格都会失效, 如果需要分成段落, 需要使⽤专⻔的标签

html">	<p>What are you saying?</p><p>I dont know</p>

注意:

• p 标签描述的段落, 前⾯没有缩进. (未来 CSS 会学)

• ⾃动根据浏览器宽度来决定排版.

• html 内容⾸尾处的换⾏, 空格均⽆效.

• 在 html 中⽂字之间输⼊的多个空格只相当于⼀个空格.

• html 中直接输⼊换⾏不会真的换⾏, ⽽是相当于⼀个空格.

（3）换⾏标签: br

想要完成换⾏的话, 也可以通过<br/>标签来实现.

br 是 break 的缩写. 表⽰换⾏.

• 大部分标签都是成对出现的，但br 是⼀个单标签(不需要结束标签)

• br 标签不像 p 标签那样带有⼀个很⼤的空隙.

• <br/> 是规范写法. 不建议写成 <br>

展⽰结果:

观察<br>标签和<p>标签的区别：行与行之间距离不相同

（4）空格标签: &nbsp;

想要完成添加多个空格的话, 可以通过&nbsp;标签来实现.

• HTML中即使文本中间打上多个空格符，实际上也就是相当于一个空格符

• 前面必须有&，结尾必须是分号；

html">	<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;What are you saying?</p><p>I dont know</p>

（5）图⽚标签: img

img 标签必须带有 src 属性. 表⽰图⽚的路径.

<img src="rose.jpg " alt="">

此时要把 rose.jpg 这个图⽚⽂件放到和 html 中的同级⽬录中.

img 标签的其他属性：

• width/height: 控制宽度⾼度. ⾼度和宽度⼀般改⼀个就⾏, 另外⼀个会等⽐例缩放. 否则就会图⽚失衡.

• border: 边框, 参数是宽度的像素. 但是⼀般使⽤ CSS 来设定.

 <img src="rose.jpg" width="500px" height="800px" border="5px">

注意:

1. 属性可以有多个, 不能写到标签之前

2. 属性之间⽤空格分割, 可以是多个空格, 也可以是换⾏.

3. 属性之间不分先后顺序

4. 属性使⽤ "键值对" 的格式来表⽰.

关于⽬录结构:

对于⼀个复杂的⽹站, ⻚⾯资源很多, 这种情况可以使⽤⽬录把这些⽂件整理好.

1. 相对路径: 以 html 所在位置为基准, 找到图⽚的位置.

  •  同级路径: 直接写⽂件名即可 (或者 ./)
  •  下⼀级路径: image/1.jpg
  • 上⼀级路径: ../image/1.jpg

2. 绝对路径: ⼀个完整的磁盘路径, 或者⽹络路径. 例如

  • 磁盘路径 D:/rose.jpg ( 最好使⽤ / , 不要使⽤ \ )
  • ⽹络路径 https://img2.baidu.com/it/u=3359649605,3626874592&fm=253&fmt=auto&ap
  • p=138&f=JPEG?w=500&h=752

（6）HTML特殊转义字符列表

最常用的字符实体Character Entities

（7） 超链接: a

• href: 必须具备, 表⽰点击后会跳转到哪个⻚⾯.

• target: 打开⽅式. 默认是 _self. 如果是 _blank 则⽤新的标签⻚打开.

<a href="http://www.baidu.com">百度</a>

链接的⼏种形式:

• 外部链接: href 引⽤其他⽹站的地址

html"><a href="http://www.baidu.com">百度</a>

• 内部链接: ⽹站内部⻚⾯之间的链接. 写相对路径即可.

在⼀个⽬录中, 先创建⼀个 1.html, 再创建⼀个 2.html

 

• 空链接: 使⽤ # 在 href 中占位.

html"> <a href="#">空链接</a>

4 表格标签

  • table 标签: 表⽰整个表格
  • tr: 表⽰表格的⼀⾏
  • td: 表⽰⼀个单元格
  • thead: 表格的头部区域
  • tbody: 表格的主体区域.

table 包含 tr , tr 包含 td

表格标签有⼀些属性, 可以⽤于设置⼤⼩边框等. 但是⼀般使⽤ CSS ⽅式来设置.

这些属性都要放到 table 标签中.

  • align 是表格相对于周围元素的对⻬⽅式. align="center" (不是内部元素的对⻬⽅式)
  • border 表⽰边框. 1 表⽰有边框(数字越⼤, 边框越粗), "" 表⽰没边框.
  • cellpadding: 内容距离边框的距离, 默认 1 像素
  • cellspacing: 单元格之间的距离. 默认为 2 像素
  • width / height: 设置尺⼨.
  • colspan：合并单元列

注意, 这⼏个属性, vscode 都提⽰不出来.

以下为演示：

（1）画出基本表格，四行三列

html"><table style="width: 500px;height: 400px;" border="1px black"><tr><td>aaa</td><td>bbb</td></tr><tr><td>ccc</td><td>ddd</td></tr><tr></tr><td>eee</td><td>fff</td><tr></tr><tr><td>ggg</td><td>hhh</td></tr></table>

（2） 将单元格中间间隔为0，且列合并

html"><tr><td colspan="2">aaa</td><!-- <td>bbb</td> --></tr>

5 表单标签

表单是让⽤⼾输⼊信息的重要途径.

分成两个部分:

  • 表单域: 包含表单元素的区域. 重点是 form 标签.
  • 表单控件: 输⼊框, 提交按钮等. 重点是 input 标签.

（1）form 标签

html"><form action="test.html">... [form 的内容]
</form>

描述了要把数据按照什么⽅式, 提交到哪个⻚⾯中.

关于 form 需要结合后端代码来进⼀步理解. 后⾯再详细研究.

method：

  • get：从服务端获得资源
  • post：向服务端发送资源 

（2）input 标签

各种输⼊控件, 单⾏⽂本框, 按钮, 单选框, 复选框.

  • type(必须有), 取值种类很多, button, checkbox, text, file, image, password, radio 等.
  • name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选⼀.
  • value: input 中的默认值.
  • checked: 默认被选中. (⽤于单选按钮和多选按钮)

下⾯介绍⼀些常⽤的类型:

1. ⽂本框 text

html"> <input type="text">
2. 密码框 password

html"><input type="password">
3. 单选框 radio

html"> 性别：<input type="radio" name="gender" >男 <input type="radio" name="gender">女

注意: 单选框之间必须具备相同的 name 属性, 才能实现 多选⼀ 效果.

如果想要按字也可以选中该框，应该用label去识别id

html"> 性别：<input type="radio" name="gender" id="gender1" ><label for="gender1">男 </label><input type="radio" name="gender" id="gender2"> <label for="gender2">女</label>

4. 复选框 checkbox

html"> 兴趣爱好：<input type="checkbox" name="" id="">篮球<input type="checkbox" name="" id="">足球<input type="checkbox" name="" id="">排球<input type="checkbox" name="" id="">羽毛球<br>

5. 普通按钮 button

html">  <button>注册</button><input type="button" value="按钮">

当前点击了没有反应. 需要搭配 JS 使⽤(后⾯会重点研究).

html">   <input type="button" value="我是个按钮" onclick="alert('hello')">

6. 提交按钮 submit
html"><form action="test.html"><input type="text" name="username"><input type="submit" value="提交">
</form>

提交按钮必须放到 form 标签内. 点击后就会尝试给服务器发送请求

（3）select 标签 select-option

下拉菜单

• option 中定义 selected="selected" 表⽰默认选中.

html"> 专业：<select><option value="1" selected>计算机科学与技术</option><option value="2">人工智能</option><option value="3">软件工程</option><option value="4">信息安全</option></select><br>

（4）textarea 标签

html"> 个人描述：<textarea rows="10" cols="10"></textarea><br>

⽂本域中的内容, 就是默认内容, 注意, 空格也会有影响.

rows 和 cols 也都不会直接使⽤, 都是⽤ css 来改的.

6 ⽆语义标签: div&span

div 标签, division 的缩写, 含义是 分割

span 标签, 含义是跨度

就是两个盒⼦. ⽤于⽹⻚布局

  • div 是独占⼀⾏的, 是⼀个⼤盒⼦.
  • span 不独占⼀⾏, 是⼀个⼩盒⼦.

html"> <div><span>咬⼈猫</span><span>咬⼈猫</span><span>咬⼈猫</span></div><div><span>兔总裁</span><span>兔总裁</span><span>兔总裁</span></div><div><span>阿叶君</span><span>阿叶君</span><span>阿叶君</span></div>

(7) 综合练习: ⽤⼾注册

⽤⼾注册界⾯

提⽰:

  •  使⽤表格进⾏整体布局
  •  使⽤各种 input 标签实现⻚⾯中的输⼊控件
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>用户注册</h1><table><tr><td>用户名</td><td><input type="text" placeholder="请输入用户名"></td></tr><tr><td>手机号</td><td><input type="text" placeholder="请输入手机号"></td></tr><tr><td>密码</td><td><input type="password" placeholder="请输入密码"></td></tr></table><div><button>注册</button><span>已有帐号？</span><a href="#">登录</a><br></div>
</body>
</html>


http://www.ppmy.cn/embedded/137531.html

相关文章

文件上传〈2〉

文件上传〈2〉

文件上传进阶 1.文件扩展名白名单绕过 白名单扩展名校验相比于黑名单更安全、可靠、普遍。绕过白名单检测通常需要依靠Web服务器的解析缺陷&#xff0c;或lmageMagick等组件缺陷。 1.IIS&#xff08;一个服务器&#xff09;解析缺陷 在IIS 6.0中&#xff0c;".asp"…
阅读更多...
计算机网络（11）和流量控制补充

计算机网络（11）和流量控制补充

这一篇对数据链路层中的和流量控制进行详细学习 流量控制&#xff08;Flow Control&#xff09;是计算机网络中确保数据流平稳传输的技术&#xff0c;旨在防止数据发送方发送过多数据&#xff0c;导致接收方的缓冲区溢出&#xff0c;进而造成数据丢失或传输失败。流量控制通常…
阅读更多...
Spring Boot 读取 yml 并映射至实体

Spring Boot 读取 yml 并映射至实体

application-base.yml app:# 附件存储路径upload-attachments: /data/attachments/# 报告导出详情 url - 前端score-detail-url: ${app.host.web}/#/process/start?processNo{}# api 文件下载 urlfile-download-url: ${app.host.web}/prod-api/sys_file_info/download/{}?fu…
阅读更多...
力扣(LeetCode)LCR 179. 查找总价格为目标值的两个商品(Java)

力扣(LeetCode)LCR 179. 查找总价格为目标值的两个商品(Java)

White graces&#xff1a;个人主页 &#x1f649;专栏推荐:Java入门知识&#x1f649; &#x1f439;今日诗词:西山白雪三城戍&#xff0c;南浦清江万里桥&#x1f439; ⛳️点赞 ☀️收藏⭐️关注&#x1f4ac;卑微小博主&#x1f64f; ⛳️点赞 ☀️收藏⭐️关注&#x1f4…
阅读更多...
scala创建图书信息类，包含三个属性：书名，作者，价格

scala创建图书信息类，包含三个属性：书名，作者，价格

class Book(var title: String, var author: String, var price: Double) {// 可以在这里定义其他的方法&#xff0c;比如展示图书信息的方法等&#xff0c;以下是一个简单示例def showBookInfo(): Unit {println(s"书名: $title")println(s"作者: $author&quo…
阅读更多...
ISP——你可以从这里起步（二）

ISP——你可以从这里起步（二）

接上一篇&#xff0c;上一篇是原理篇&#xff0c;这一篇是实战篇&#xff0c;为了实现下面框图中的不完美ISP。 第一章 做一张RAW图自己用 不是所有的人都能获得raw图&#xff0c;即使获得了raw图也需要对应的sensor参数才能把它用起来&#xff0c;所以我找了一条野路子可以把…
阅读更多...
Android 开发指南：初学者入门

Android 开发指南：初学者入门

Android 是全球最受欢迎的移动操作系统之一&#xff0c;为开发者提供了丰富的工具和资源来创建各种类型的应用程序。本文将为你提供一个全面的入门指南&#xff0c;帮助你从零开始学习 Android 开发。 目录 1. 了解 Android 平台[1]2. 设置开发环境[2]3. 学习基础知识[3]4. 创…
阅读更多...
H3C ER8300G2-X未授权导致信息泄露漏洞(CVE-2024-32238)

H3C ER8300G2-X未授权导致信息泄露漏洞(CVE-2024-32238)

免责声明: 本文旨在提供有关特定漏洞的深入信息，帮助用户充分了解潜在的安全风险。发布此信息的目的在于提升网络安全意识和推动技术进步，未经授权访问系统、网络或应用程序，可能会导致法律责任或严重后果。因此，作者不对读者基于本文内容所采取的任何行为承担责任。读者在…
阅读更多...
最新文章

Copyright @ 2022~2023