HTML5入门及简介

最新推荐文章于 2026-06-24 15:56:45 发布

原创最新推荐文章于 2026-06-24 15:56:45 发布 · 232 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html

一、简介

1、HTML是一种页面

简称超文本标记语言，可对图片等进行集成。

2、全称

Hyper Text (超文本) Markup(标记) Language(语言)

3、常见字符集

iso-8859-1
UTF-8
GBK

4、开发工具Sublime官网：

http://www.sublimetext.com/（英文版）
http://www.sublimetext.cn/（中文版）

二、HTML代码-分块简介

<!DOCTYPE html>
<html lang=”en”>----lang=”en”对于标签的定义
</html>
<head>----标签的头部
<meta charset=”UTF-8”>----中国常用、小国家也在使用，国际认定的语言；外国常用：iso-8859-1;中国自己设计：GBK
<title>页面标题</title>----打开后页面的标题，例如百度
</head>
<body>
......      ----正文代码编写处
</body>

三、常用标签

1、段落标签（p标签）：

作用：定义一个段落，用P标签，会实现换行，但是以空一行的形式换行。

<P>段落标签</p>

2、Br标签：

作用：换行不换段

<br>

3、注释标签

作用：编写程序时，给予提示，提高代码的可读性，便于后期修改代码、更新迭代使用。

使用频率高，不显示在结果面，仅显示在代码编辑界面。

<!--段落标签-->

4、标题标签：

作用：定义标签，最多支持6个标签。

<h*>标题标签</h*>

5、img标签：

作用：能够在浏览器上显示，例如图片

文件位置分为两种：

（1）绝对路径:定位到具体盘符下
（2）相对路径:通过项目中的文件位置定位来源（…/上一级目录）

<img src="文件位置"  alt="未找到文件显示项"  width="宽度设定"  height="高度设定"/>

6、超链接标签（a标签）：

（1）作用：使超链接能够和网络上的另一个文档进行连接。

（2）Herf 属性：跳转项（跳转的网络地址、图片等），网页跳转的话要加上Http://

<a href="https://baike.baidu.com>点击跳转百度</a>

（3）arget属性：跳转窗口的打开方式设定

_blank—在新打开的，未命名的窗口打开连接。
_parent–在父窗口打开超链接,覆盖在原窗口上打开
_self-----在当前窗口打开链接
_top-----frame 框架

<a href="https://baike.baidu.com"  target="_blank">点击跳转百度</a>

（4）锚点（a标签的另一种变形）

1）常用于回到页面顶部，点击锚点会将锚点对应的文字放在界面最上方。
2）可以两个页面相互跳转。
3）锚点需要先定义，再使用。
4）常见形式：

<a href=”#ziti”>锚点1</a>----也可使用id:<a id=”ziti”>锚点1</a>    
<a name=”ziti”></a>

5）使用方法：


第一步：<a href=”#ziti”>返回顶部</a>   点击的跳转项，例如“返回顶部“
  或者：<a id=”ziti”>返回顶部</a>
第二步：<a name=”ziti”>正文</a>     点击跳转中后，会跳转至”正文前方，并处于置顶状态   
	正文也可写于后方，例如：
	<a name=”ziti”></a>
           	正文

6）锚点也可用于项目文件之间的跳转：

<a href="oarge.html" #ziti>锚点</a> 
<a name=”ziti”></a>----放置在想要跳转到的文件中的位置处

7、列表

（1）无序列表：不牵扯到顺序的，比如水果展示。

<ul><li>.....</li></ul>

举例：------------------结果：

<ul>              ●123
<li>123</li>      ●456
<li>456</li>      ●789
<li>789</li>      ●101
<li>101</li>
</ul>

（2）有序列表：有顺序区分的，例如第一、第二、第三。

<ol><il>..</il></ol>

举例：------------------结果：

<ol>      
<li>123</li>       1.123
<li>456</li>       2.456
<li>789</li>       3.789
<li>101</li>       4.101
</ol>

8、表格

（1）作用：

使用表格进行数据展示，以前用于划图表

（2）表格的创建：

1）table:表格的开始和结尾
2）tr:行的开始和结尾
3）td:单元格、就是列的开始和结尾
举例：

<table border=”1” width=”500px”> 
<tr>
<td>姓名</td>
<td>性别</td> 
<td>身高</td> 
<td>体重</td>
</tr>
<tr>
<td>蒋毅</td>
<td>男</td>
<td>180</td>
<td>136</td>
</tr>
</table>

（3）表格合并：

1）colspan：关于列的合并
2）rowspan：关于行的合并
举例：

<td rowspan="2">数学</td> ---上下两行的合并
<td colspan="5">英语</td>----左右5列的合并

（5）表格的属性：

1）border ：表格边框设置（宽度）
常用设定项：一般设置为1

2）width：表格的边框设置（表格大小）
常用设定项：–px --%

3）bgcolor：设置表格背景颜色
常用设定项：
1.英文单词：red、blue、green
2.16进制：以#开头， 0123456789ABCDEF 程度为0~F
3.rgb表示，HTML4.0后不支持了，style=”–.-.-”

4）align：表格在文档中的对齐方式
常用设定项：left、center、right

5）valign：三种垂直对其方式
常用设定项：bottom、middle、top

6）cellpadding :表示table的内容和格线之间的距离

7）cellspacing：表示格线和格线之间的距离

9、表单：

（1）表单概念：用于手机用户的数据，进行人机交互（能够前台进行操作，后台给到相应的响应）。

（2）相关内容：文本框、单选、复选、隐藏域、列表域、图片框

（3）常用的属性：

属性	作用
name	指定控件的名称，可以重复的
id	id 指定标签的唯一标识
value	输入或者收集控件的值
checked	单选或者复选默认被选中的项目
selected	列表框组默认被选中的项目
src	图片框的图片来源
Onclick	鼠标点击事件（js）
disabled	禁用该控件
multiple	允许多选的操作：适用于普通列表框

（4）注意事项：

form表单里面的
1）action 是进入后台的一个位置，将表单提交的数据传递到aaa里面继续进行处理

2）method ：
post 隐形的提交：对信息的安全性保护的很好
get 显示显示的提交，对信息的安全性不是那么的好

3）name:
name如果是一样的话就会被认为是一组单选，意味着只能选中一个
如果name值不一样，那就不是一组。

4）Select中的option中value值是传递给后台的值

（5）按钮：

1）提交按钮
点击提交，程序会进入后台继续工作

<input type="submit" name="" value="提交按钮">

2）普通按钮
不进入后台只是在当前界面进行处理，配合js使用，后期使用ajax进行前后台交互。
举例：

<input type="button" name="" value="普通按钮">

（6）普通列表框：

<select size=”5”  multiple=”true”>              
<option value=””>1</option>
<option value=””>2</option>
<option value=””>3</option>
<option value=””>4</option>
<option value=””>5</option>
</select>

（7）隐藏域（hidden）：

是没有显示的，用于前台，不方便其他人看到，但是需要传递给后台使用的作用。

<input tape=”hidden”  name=””  id=””>

（8）文件上传域（file）：

用于选择上传文件

<input type="file" name="">

（8）文本框：

1）多行文本框
用于论坛发帖、回帖，长文本输入

<textarea rows=”” cols=”” name=””  id=””></textarea>      rows--行数    cols--列数

2）单行文本框

<input type="text" id="">

（9）多项选择（ checkbox）：

举例：

<label>兴趣爱好</label>
<input type=”checkbox” name=”” id”” value=””>看书
<input type=”checkbox” name=”” id”” value=””>旅游
<input type=”checkbox” name=”” id”” value=””>思考
<input type=”checkbox” name=”” id”” value=””>爬山