-
零基础入门JavaWeb——HTML相关知识
一、HTML概念
HTML是Hyper Text Markup Language的缩写。意思是超文本标记语言。它的作用是搭建网页结构，在网页上展示内容。
1.1 超文本
HTML文件本质上是文本文件，而普通的文本文件只能显示字符。但是HTML技术通过HTML标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中，让网页有了非常丰富的呈现方式，这就是超文本的含义——本身是文本，但是呈现出来的最终效果超越了文本。
1.2 标记语言
说HTML是一种标记语言，是因为它是由一系列标签组成的，没有常量、变量、流程控制、异常处理。IO等等这些功能。
HTML很简单，每个标签都有它固定的含义和确定的页面显示效果。
标签是通过一组尖括号和标签名的方式来定义的。
开始标签<>和结束标签一起构成了一个完整的标签。开始标签的结束标签之间的部分叫文本标签体，也简称标签体。二、HTML的结构
2.1 文档声明
HTML文件中第一行的内容，用来告诉浏览器当前HTML文档的基本信息，其中最重要的就是当前HTML文档遵循的语法标准。
HTML5版本的文档类型声明如下：
DOCTYPE html>- 1
2.2 根标签
html标签是整个文档的根标签，所有其他标签都必须放在html标签里面。
2.3 头部
head标签用于定义文档的头部，其他头部元素都放在head标签里。头部元素包括title标签、script标签、style标签、link标签、meta标签等等。
2.4 主体
body标签用于定义网页的主体内容，在浏览器窗口内显示的内容都定义到body标签内。
2.5 注释
HTML注释的写法如下：
- 1
注释的内容不会显示到浏览器窗口内，是开发人员用来对代码内容进行解释说明。
三、HTML语法规则
- 根标签有且只能有一个
- 无论是双标签还是单标签都必须正确关闭
- 标签可以嵌套但不能交叉嵌套
- 注释不能嵌套
- 属性必须有值，值必须加引号，单引号或双引号均可
- 标签名不区分大小写，但建议使用小写
四、HTML的各个标签的使用
4.1 标题标签
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题标签的介绍title> head> <body> <h1>我是标题h1> <h2>我是标题h2> <h3>我是标题h3> <h4>我是标题h4> <h5>我是标题h5> <h6>我是标题h6> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
页面效果如下：
4.2 段落标签和换行标签
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>段落标签title> head> <body> <p>从11月15日开始，全国已连续九天每日新增本土感染者突破两万。其中，23日，这一数值已经破三万。国家疾控局传防司二级巡视员胡翔11月22日介绍说，11月1日以来，全国已经累计报告了25.3万例感染者，近一周平均每天报告2.22万例，较上一周增长了一倍。这意味着，截至23日24时，11月新增本土感染者接近30万。p> <p>从11月15日开始，全国已连续九天每日新增本土感染者突破两万。其中，23日，这一数值已经破三万。国家疾控局传防司二级巡视员胡翔11月22日介绍说，11月1日以来，全国已经累计报告了25.3万例感染者，近一周平均每天报告2.22万例，较上一周增长了一倍。这意味着，截至23日24时，11月新增本土感染者接近30万。p> <p>从11月15日开始，全国已连续九天每日新增本土感染者突破两万。其中，23日，这一数值已经破三万。国家疾控局传防司二级巡视员胡翔11月22日介绍说，11月1日以来，全国已经累计报告了25.3万例感染者，近一周平均每天报告2.22万例，较上一周增长了一倍。这意味着，截至23日24时，11月新增本土感染者接近30万。p> <p>从11月15日开始，全国已连续九天每日新增本土感染者突破两万。其中，23日，这一数值已经破三万。国家疾控局传防司二级巡视员胡翔11月22日介绍说，11月1日以来，全国已经累计报告了25.3万例感染者，近一周平均每天报告2.22万例，较上一周增长了一倍。这意味着，截至23日24时，11月新增本土感染者接近30万。p> helloworld<br> 你好世界 body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
页面效果如下：
4.3 无序列表标签
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无序列表标签title> head> <body> <ul> <li>刘备li> <li>关羽li> <li>张飞li> <li>马超li> ul> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
页面效果如下：
4.4 超链接标签
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>超链接标签title> head> <body> <a href="01_header.html">跳转到01_header.htmla> <br> <a href="../01_html入门/start.html">跳转到start.htmla> <br> <a href="http://www.baidu.com">跳转到百度a> <br> <a href="http://www.baidu.com" target="_blank">跳转到百度a> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
页面效果如下：
4.5 图片标签
将准备好的图片放在img文件夹下。
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片标签title> head> <body> <img src="../img/前端.jpeg" width="550" height="310"/> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
页面效果如下：
4.6 块标签
块并不是为了显示文章的内容，而是为了方便结合CSS对页面进行布局。
块有两种，div是前后有换行的块，span是前后没有换行的块。
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>div和span标签的介绍title> head> <body> <div style="border: 1px solid black;width: 100px;height: 100px">这是一个div块div> <div style="border: 1px solid black;width: 100px;height: 100px">这是一个div块div> <span style="border: 1px solid black;width: 100px;height: 100px">这是一个span块span> <span style="border: 1px solid black;width: 100px;height: 100px">这是一个span块span> <div>hello world 你好世界div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
页面效果如下：
4.7 转义字符
在HTML文件中，<、>等等符号已经被赋予了特定含义，不会作为符号本身显示到页面上，此时如果要使用符号本身怎么办呢？需要使用HTML实体来进行转义。
显示结果 描述 实体名称 空格 ；< 小于号 <> 大于号 >& 和号 &" 引号 "’ 撇号 '© 版权 ©® 注册商标 ®4.8 小结
标签名称 功能 h1~h6 1级标题~6级标题 p 段落 a 超链接 br 换行 ul/li 无序列表 img 图片 div 定义一个前后有换行的块 span 定义一个前后无换行的块 五、表格标签
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格标签title> <style type="text/css"> table,th,td { border-collapse: collapse; border: 1px solid black; padding: 5px; } style> head> <body> <table> <tr> <th>姓名th> <th>属性th> <th>级别th> <th>忍村th> tr> <tr> <td>漩涡鸣人td> <td>风td> <td>下忍td> <td>木叶td> tr> <tr> <td>宇智波佐助td> <td rowspan="2">雷&火td> <td colspan="2">下忍td> tr> <tr> <td>我爱罗td> <td>影td> <td>砂隐村td> tr> table> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
页面效果如下：
六、表单标签
6.1 表单标签的作用
在项目开发过程中，凡是需要用户填写的信息都需要用到表单。
表单的作用是接收用户的输入信息，并且将用户输入的信息提交给服务器。
6.2 form标签的介绍
在HTML中使用form标签来定义一个表单。form标签有两个重要的属性：action和method。
6.2.1 action属性
用户在表单里填写的信息需要发送到服务器端。服务器端接收表单数据的地址要写在form标签的action属性中。
6.2.2 method属性
form标签中method属性用来定义提交表单的请求方式。method属性只有两个可选值：get或post，没有极特殊情况的话使用post即可。
七、 表单项标签
表单中的每一项，包括：文本框、密码框、单选框、多选框等等，都称之为表单项，一个表单中可以包含多个表单项。
7.1 name和value属性
在各个具体的表单标签中，通过name属性来给数据起名字，通过value属性来保存要发送给服务器的值。
7.2 单行文本框
用户名<input type="text" name="username"/><br/>- 1
7.3 密码框
密码<input type="password" name="pwd"/><br/>- 1
7.4 单选框
性别<input type="radio" name="gender" value="male" checked="checked"/>男 <input type="radio" name="gender" value="female"/>女<br/>- 1
- 2
7.5 多选框
兴趣爱好 <input type="checkbox" name="hobby" value="basketball"/>篮球 <input type="checkbox" name="hobby" value="football" checked/>足球 <input type="checkbox" name="hobby" value="pingpangball" checked/>乒乓球 <input type="checkbox" name="hobby" value="badminton"/>羽毛球 <br/>- 1
- 2
- 3
- 4
- 5
- 6
7.6 下拉框
学历 <select name="education"> <option value="gz">高中option> <option value="zk">专科option> <option value="bk">本科option> <option value="ss">硕士option> <option value="bs">博士option> select> <br/>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
7.7 按钮
<button type="button">普通按钮button> <button type="submit">提交按钮button> <button type="reset">重置按钮button> <br/>- 1
- 2
- 3
- 4
7.8 隐藏域
<input type="hidden" name="id" value="1"/>- 1
- 2
- 3
- 4
7.9 多行文本框
<textarea name="desc" rows="10" cols="50">- 1
- 2
7.10 效果
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单标签title> head> <body> <form action="http://www.baidu.com" method="post"> 用户名<input type="text" name="username"/><br/> 密码<input type="password" name="pwd"/><br/> 性别<input type="radio" name="gender" value="male" checked="checked"/>男 <input type="radio" name="gender" value="female"/>女<br/> 兴趣爱好 <input type="checkbox" name="hobby" value="basketball"/>篮球 <input type="checkbox" name="hobby" value="football" checked/>足球 <input type="checkbox" name="hobby" value="pingpangball" checked/>乒乓球 <input type="checkbox" name="hobby" value="badminton"/>羽毛球 <br/> 学历 <select name="education"> <option value="gz">高中option> <option value="zk">专科option> <option value="bk">本科option> <option value="ss">硕士option> <option value="bs">博士option> select> <br/> <input type="button" value="普通按钮"/> <br/> <input type="submit" value="提交"/> <br/> <input type="reset" value="重置表单"> <br/> <button type="button">普通按钮button> <button type="submit">提交按钮button> <button type="reset">重置按钮button> <br/> <input type="hidden" name="id" value="1"/> <textarea name="desc" rows="10" cols="50"> textarea> <br/> form> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
页面效果如下：
学海无涯苦作舟
-
相关阅读:
【Docker】单机容器网络的实现原理
【Machine Learning】14.Advanced Learning 简单神经网络介绍（1）
题目 1311: 数字三角形
openradar中最后跟踪的解释
Spring：Bean生命周期
【C++干货铺】初识模板
仓库风格，数据库系统、黑板系统、超文本系统的概念以及应用
算法通关村第十三关——溢出问题处理模板
【深度学习实验】线性模型（五）：使用Pytorch实现线性模型：基于鸢尾花数据集，对模型进行评估（使用随机梯度下降优化器）
ISBN号码（蓝桥杯）
- 原文地址：https://blog.csdn.net/HunterArley/article/details/128078050
