零基础入门JavaWeb——HTML相关知识

创始人

2024-02-27 16:14:27

一、HTML概念

HTML是Hyper Text Markup Language的缩写。意思是超文本标记语言。它的作用是搭建网页结构，在网页上展示内容。

1.1 超文本

HTML文件本质上是文本文件，而普通的文本文件只能显示字符。但是HTML技术通过HTML标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中，让网页有了非常丰富的呈现方式，这就是超文本的含义——本身是文本，但是呈现出来的最终效果超越了文本。

1.2 标记语言

说HTML是一种标记语言，是因为它是由一系列标签组成的，没有常量、变量、流程控制、异常处理。IO等等这些功能。

HTML很简单，每个标签都有它固定的含义和确定的页面显示效果。

标签是通过一组尖括号和标签名的方式来定义的。开始标签<>和结束标签一起构成了一个完整的标签。开始标签的结束标签之间的部分叫文本标签体，也简称标签体。

二、HTML的结构

2.1 文档声明

HTML文件中第一行的内容，用来告诉浏览器当前HTML文档的基本信息，其中最重要的就是当前HTML文档遵循的语法标准。

HTML5版本的文档类型声明如下：

2.2 根标签

html标签是整个文档的根标签，所有其他标签都必须放在html标签里面。

2.3 头部

head标签用于定义文档的头部，其他头部元素都放在head标签里。头部元素包括title标签、script标签、style标签、link标签、meta标签等等。

2.4 主体

body标签用于定义网页的主体内容，在浏览器窗口内显示的内容都定义到body标签内。

2.5 注释

HTML注释的写法如下：

注释的内容不会显示到浏览器窗口内，是开发人员用来对代码内容进行解释说明。

三、HTML语法规则

根标签有且只能有一个
无论是双标签还是单标签都必须正确关闭
标签可以嵌套但不能交叉嵌套
注释不能嵌套
属性必须有值，值必须加引号，单引号或双引号均可
标签名不区分大小写，但建议使用小写

四、HTML的各个标签的使用

4.1 标题标签



标题标签的介绍


我是标题
我是标题
我是标题
我是标题
我是标题
我是标题

页面效果如下：

请添加图片描述

4.2 段落标签和换行标签



段落标签



从11月15日开始，全国已连续九天每日新增本土感染者突破两万。其中，23日，这一数值已经破三万。国家疾控局传防司二级巡视员胡翔11月22日介绍说，11月1日以来，全国已经累计报告了25.3万例感染者，近一周平均每天报告2.22万例，较上一周增长了一倍。这意味着，截至23日24时，11月新增本土感染者接近30万。
从11月15日开始，全国已连续九天每日新增本土感染者突破两万。其中，23日，这一数值已经破三万。国家疾控局传防司二级巡视员胡翔11月22日介绍说，11月1日以来，全国已经累计报告了25.3万例感染者，近一周平均每天报告2.22万例，较上一周增长了一倍。这意味着，截至23日24时，11月新增本土感染者接近30万。
从11月15日开始，全国已连续九天每日新增本土感染者突破两万。其中，23日，这一数值已经破三万。国家疾控局传防司二级巡视员胡翔11月22日介绍说，11月1日以来，全国已经累计报告了25.3万例感染者，近一周平均每天报告2.22万例，较上一周增长了一倍。这意味着，截至23日24时，11月新增本土感染者接近30万。
从11月15日开始，全国已连续九天每日新增本土感染者突破两万。其中，23日，这一数值已经破三万。国家疾控局传防司二级巡视员胡翔11月22日介绍说，11月1日以来，全国已经累计报告了25.3万例感染者，近一周平均每天报告2.22万例，较上一周增长了一倍。这意味着，截至23日24时，11月新增本土感染者接近30万。
helloworld
你好世界

页面效果如下：

请添加图片描述

4.3 无序列表标签



无序列表标签



刘备
关羽
张飞
马超

页面效果如下：
请添加图片描述

4.4 超链接标签



超链接标签



跳转到01_header.html
跳转到start.html

跳转到百度
跳转到百度

页面效果如下：

请添加图片描述

4.5 图片标签

将准备好的图片放在img文件夹下。



图片标签

页面效果如下：

请添加图片描述

4.6 块标签

块并不是为了显示文章的内容，而是为了方便结合CSS对页面进行布局。

块有两种，div是前后有换行的块，span是前后没有换行的块。



div和span标签的介绍

这是一个div块
这是一个div块
这是一个span块这是一个span块hello world         你好世界

页面效果如下：

请添加图片描述

4.7 转义字符

在HTML文件中，<、>等等符号已经被赋予了特定含义，不会作为符号本身显示到页面上，此时如果要使用符号本身怎么办呢？需要使用HTML实体来进行转义。

显示结果	描述	实体名称
	空格	`；`
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
"	引号	`"`
’	撇号	`'`
©	版权	`©`
®	注册商标	`®`

4.8 小结

标签名称	功能
h1~h6	1级标题~6级标题
p	段落
a	超链接
br	换行
ul/li	无序列表
img	图片
div	定义一个前后有换行的块
span	定义一个前后无换行的块

五、表格标签



表格标签


姓名 属性 级别 忍村
漩涡鸣人 风 下忍 木叶
宇智波佐助 雷&火 下忍
我爱罗 影 砂隐村

姓名	属性	级别	忍村
漩涡鸣人	风	下忍	木叶
宇智波佐助	雷&火	下忍
我爱罗	影	砂隐村

页面效果如下：

请添加图片描述

六、表单标签

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 单行文本框

        用户名

7.3 密码框

        密码

7.4 单选框

        性别男女

7.5 多选框

        兴趣爱好篮球足球乒乓球羽毛球

7.6 下拉框

        学历

7.7 按钮

7.8 隐藏域

7.9 多行文本框

        </code></pre> 
<h2>7.10 效果</h2> 
<pre><code class="prism language-html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单标签</title>
</head>
<body><form action="http://www.baidu.com" method="post"><!--表单项的name属性，就是该表单项的数据的名字。表单的value属性，如果表单是输入框，它的输入数据就是value；如果是单选框或复选框需要手动设置value；如果是按钮，就是按钮上的文字有三种：1. input 输入项：根据type属性的不同，可以分为不同的输入项1. text：文本框，默认类型2. password：密码框3. radio：单选框。要求同一组单选框的name属性相同。checked属性表示默认选中。4. checkbox：多选框。要求同一组的多选框的name属性相同。checked属性表示默认选中5. button：表示普通按钮，不具备任何功能要结合JS一起使用。6. submit：表示提交按钮，点击就能将表单提交给服务器7. reset：表示重置按钮，点击就能重置表单8. hidden：表示隐藏域，向服务器提交数据但是不在页面上显示出来2. select 下拉框其中的每一个option标签是一个选项。selected="selected"属性实现默认选中的效果3. textarea 文本域-->用户名<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">

页面效果如下：

请添加图片描述

学海无涯苦作舟

上一篇：矩阵分析与计算学习记录-矩阵函数

下一篇：C++11、17、20的内存管理-指针、智能指针和内存池从基础到实战（中）

零基础入门JavaWeb——HTML相关知识

一、HTML概念

1.1 超文本

1.2 标记语言

二、HTML的结构

2.1 文档声明

2.2 根标签

2.3 头部

2.4 主体

2.5 注释

三、HTML语法规则

四、HTML的各个标签的使用

4.1 标题标签

我是标题

我是标题

我是标题

我是标题

我是标题

我是标题

4.2 段落标签和换行标签

4.3 无序列表标签

4.4 超链接标签

4.5 图片标签

4.6 块标签

4.7 转义字符

4.8 小结

五、表格标签

六、表单标签

6.1 表单标签的作用

6.2 form标签的介绍

6.2.1 action属性

6.2.2 method属性

七、 表单项标签

7.1 name和value属性

7.2 单行文本框

7.3 密码框

7.4 单选框

7.5 多选框

7.6 下拉框

7.7 按钮

7.8 隐藏域

7.9 多行文本框

学海无涯苦作舟

相关内容

热门资讯

七、表单项标签