首页 / 知识
HTML入门知识汇总分享
2023-04-11 13:50:00
HTML是描述（制作）网页的语言，指的是超文本标记语言（Hyper Text Markup Language）。
超文本：就是指页面内可以包含图片、链接、甚至音乐、程序等非文字元素；
标记语言：是一套标记标签（markup tag）；
标记：一种标记符、标记标签，可以告诉浏览器如何显示其中的内容；
应用程序一般分为两种架构：
1、C/S架构 ：Client客户端和Server服务器端架构，比如我们使用的QQ、Foxmail等；
2、B/S架构 ：B浏览器/S服务器结构，比如我们使用淘宝、京东、百度等；能直接通过浏览器使用的应用都是B/S架构；
C/S架构特点需要用户下载安装软件并更新麻烦，而B/S架构特点是用户电脑上面只需有浏览器就可以使用，所以B/S架构是趋势，我们以后开发的应用也是B/S架构。
总结：B/S架构的软件重要的一块就是使用浏览器，浏览器呈现内容需要HTML，所以我们必须学习HTML；
静态网页：html代码和内容书写完毕后，页面的内容和显示效果就基本上不会发生变化了——除非你修改页面代码。
动态网页：页面代码虽然没有变，但是显示的内容却是可以随着时间、环境或者数据库操作的结果而发生改变的。动态网页一般需要与后台程序支撑（jsp,aspx，php）。
注意：动态网页与静态网页的区分不能以页面是否有动态效果，而是内容本身是否是变化显示的。
1.File→New→Other→输入web→选择Static Web Project
此时创建的是一个static静态web项目：
2.在创建好的WebContent目录下新建一个html5格式的。html文件；
3.自定义快速创建一个HTML文件；
在WebContent文件右键弹框中自定义显示HTML创建文件属性的方法：
Window→Perspective→Customize Perspective→Shortcuts→Web→勾选HTML选项；
涉及到网页的编码显示问题，所以一开始我们就需要考虑工程开发的编码（UTF-8）的形式。在此说明两种设置工程编码的方式：
①设置项目工程目录Workspace下所有工程编码统一为UTF-8；
②设置单个工程文件编码为UTF-8；
在项目工程位置处右键，修改Other中的编码为UTF-8编码；
下面是一个H5格式的HTML初始的结构及结构的意义说明：
HTML里最重要的也是最丰富的元素，就是HTML里面的标签，作为一名web开发者，我们有必要了解并熟练掌握这些HTML里的各个标签元素；下面一一进行分类别讲解。
在网页中比较少见的比如<>与&就属于特殊符号，这部分标签比较特殊，需要单独拿出来说明一下；
格式
意义
空格 （小空格）
？
空格 （大空格，占一个中文位置）
>
大于 >
<
小于 <
&
&
基本标签是网页元素的主要组成部分，一般构成网页文字及承载内容块的主要载体标签有以下类型的标签元素：
标签
标签说明
闭合属性
i
斜体（强调）
双标签
b
加粗（重要）
双标签
u
下划线
双标签
p
段落（换行，默认情况下和上下的内容之间有间距）
双标签
br
换行
单标签
font
字体（属性：size,color,face）
双标签
h（n）
标题 （h1-h6 从大到小的 换行 加粗，上下内容之间有距离）
官方：一个网页里面，建议只出现一个h1与h2
双标签
hr
水平线
单标签
pre
预格式文本
双标签
span
行内标签
双标签
div
块标签
双标签
div 、span两个标签没有特殊的功能，只是作为一个内容容器，但使用频率很高，主要与CSS配合使用。
两个都是用于写CSS样式。
主要区别：
div：块标签（它会独占一行）
span：行内标签（它不会独占一行）
直接上代码说明一下：
显示效果如下：
超链接a标签
属性说明：
属性名
属性值
备注
href
链接的目标 URL
打开页面的地址
target
在何处打开目标 URL）
_blank:打开新页面
_self:在本页面打开（默认）
图片img标签
img:标签可以向页面展示一个图片信息。
语法：
注意：
img是一个行内标签；支持多种图片格式（jpg，bmp，png，gif）；必须要有src属性；未设置宽高时，默认是等比显示
列表标签ul,ol,dl
列表标签是页面开发中非常常用的一个种标签，一般用于做某项数据的列表或是导航。
HTML中的列表共有3种形式：无序列表、有序列表以及定义列表。
①无序列表ul
语法：
ul代表整个列表， li代表列表中的每个成员。
示例代码：
显示效果如下：
②有序列表ol
语法：
示例代码：
显示效果如下：
③定义列表dl
语法：
示例代码：
显示效果如下：
table标签一般使用来生成表格。
语法：
表格行列的合并
跨行与跨列的属性在td标签中：
colspan :合并列； 跨列 跨n列，就把下面的n-1个td删除
rowspan :合并行； 跨行跨n行，在把它下面n-1 个 tr的td删除一个
示例代码：
显示效果如下：
表单主要用于收集用户数据，然后提供表单提交数据到后台进行对应的数据参数的处理。
表单Form标签的基本语法（结构组成）：
表单元素类型
input标签中的可选type类型：
类型
名称
特点
text
普通文本框
显示普通文字
password
密码框
内容显示为*号
submit
提交按钮
点击后就提示表单
button
普通按钮
普通按钮，可添加事件方法
reset
重置按钮
回到最初状态（注：不是清空）
radio
单选
一组单选必需name相同
checkbox
多选
一组多选必需name相同
file
附件
可以选择文件进行提交
hidden
隐藏域
不显示控件；做数据修改时会有用
image
图片按钮
必需配合src属性来展示
备注input标签元素属性：
name属性：
注：表示控件的名称，只名称的控件数据才会提交到后台
凡是要提交到后台的控件，都要加上name
用于单选与多选的分组，同一组的元素name需要一致
value属性：
注：有不同的类型（type）中，value的意义是不同的
text/password 如果我们提交写上，它就是默认值（也是我们要提交的值），提交value的值
submit/button/reset 表示显示在按钮中的文字
radio/checkbox 是一个元素所代表的值
其它属性：
maxlength:一个文本框最多输入多少字符
readonly:只读（不可输入）
disabled：禁用（不可输入） -> 不会提交这个表单元素的数据
checked:仅用于 radio/checkbox作用是默认帮我们进行选择
代码示例：
3.6 相对路径说明
以文件本身为参照路径进行定位。
代表返回当前文件路径的上一级目录；代表当前页面所在文件夹下的文件路径
|
最新内容
相关内容
python如何判断一个数是素数
python如何判断一个数是素数，数字，代码，培训，质数，素数，方法，个数，自然数，不是，思路，python如何判断一个数是素数的方法：一个大于1的自然数，除
python如何比较两个字符串是否相等
python如何比较两个字符串是否相等，培训，工作，字符串，两个，下面，以上，方法，更多，内容，python在实际的开发工作中，经常会遇到要判定两个字符串
python如何确定是否为可迭代对象
python如何确定是否为可迭代对象，培训，元素，索引，对象，整数，字典，函数，类型，下标，模块，迭代可以理解为，任意的集合使用for循环遍历python中，迭
python判断一个数是否为int
python判断一个数是否为int，培训，基础，变量，类型，函数，个数，整数，以上，不是，方法，在python中如何判断一个数是不是整数?其实python有两种查看
pythonnan是什么
pythonnan是什么，培训，系统，电脑，无穷大，个数，类型，定义，操作系统，以上，表示，NaN是浮点数的一个值，代表“不是数”，通常是除0错误python中可以
python判断dict中key是否存在
python判断dict中key是否存在，培训，通用，第一，字典，方法，结果，函数，属性，做法，上面，今天来说一下如何判断字典中是否存在某个key，一般有两种通
pythonelif语句报错是什么原因
pythonelif语句报错是什么原因，培训，语句，数据，条件，程序，结果，内容，变量，使用方法，更多，python的else和elif语句也可以叫做子句，因为它们不能
pythonpython是前端语言吗?
pythonpython是前端语言吗?，代码，互动，培训，平台，标准，设计，语言，前端，语法，解释性，python语言属于后端开发语言。Python是一个高层次的结合
python判断元素是否是字符串类型
python判断元素是否是字符串类型，培训，异常，类型，实例，字符串，数据类型，对象，元素，参数，序列，isinstance()是Python中的一个内建函数语法：isin
python判断字符串是否包含中文
python判断字符串是否包含中文，培训，检测，代码，字符串，中文，字符，范围，空格，原理，以上，原理：中文字符的编码范围是：\u4e00-\u9fff只要编码在
python判断数组list是否为空
python判断数组list是否为空，培训，数组，根据，语句，长度，逻辑，后面，表示，以上，条件，判断数组为空，是一个常见用法。python–方法：根据长度判断长
python如何确定文件是否存在
python如何确定文件是否存在，检测，培训，名字，异常，文件，模块，文件夹，语句，操作，方法，python中的os模块os模块中的os.path.exists(path)可以检