HTML基础教程：结构、语法及常用标签详解-优快云博客

本文链接：https://blog.youkuaiyun.com/2401_83232029/article/details/136939932

知识点-HTML结构和基本语法

什么是html

超⽂本标记语⾔(Hyper Text Markup Language)，标准通⽤
标记语⾔下的⼀个应⽤。HTML 不是⼀种编程语⾔，⽽是⼀种
标记语⾔，是⽹⻚制作所必备的。
超⽂本标记语⾔：功能⽐⽂本强⼤, 就是指⻚⾯内可以包含图
⽚、链接，甚⾄⾳乐、程序等⾮⽂字元素。
超⽂本标记语⾔: 语法由标签组成

html可以做什么
设计⻚⾯,做⽹⻚

1. 什么是HTML?
超⽂本标记语法

2. 标记语⾔
设计⻚⾯,做⽹⻚

知识点-HTML结构和基本语法

<!DOCTYPE html> // 文档声明

<html lang="en">
<head>
<meta charset="UTF-8"> //头部
<title>Document</title>
</head>

<body>
<h1>hello,world</h1> //文档显示内容
</body>
</html>

HTML常⽤的标签

路径

1. 学习⽂字排版相关的标签

1. 标题标签

2. 横线标签

3. 段落和换⾏

4. ⽂字标签

2. 使⽤⽂字排版标签，完成公司简介

字体标签

<font color=" 字体颜⾊ " size=" 字体⼤⼩ (1~7)"

face=" 字体⻛格 "> 哈哈 </font>

标题标签

<hn> 标题 <hn> n 取值 1~6, 1 是⼀级标题 , 2 是⼆级标题 ...

段落标签

注意：段落之间⾃动进⾏换⾏

粗体标签

斜体标签

下划线标签

<hr/>

换⾏标签

<br/>

Ctrl+Shift+/: 注释快捷键

案例练习

<!DOCTYPE html>

<head>

</head>

<body>

<hr/> <p><font color = "red" > “ 中关村 Java 程序员训练

营 ” </font> 是由 <b><i> Java </i></b> 联合中关村软件园、

优快云，并委托 Java 进⾏教学实施的软件开发⾼端培训机构，致

⼒于服务各⼤软件企业，解决当前软件开发技术⻜速发展，⽽企

业招不到优秀⼈才的困扰。⽬前， “ 中关村 Java 程序员训练营 ”

已成⻓为⾏业 “ 学员质量好、课程内容深、企业满意 ” 的移动开发

⾼端训练基地，并被评为中关村软件园重点扶持⼈才企业。 </p>

<p> Java 程序员的学员多为⼤学毕业后，有理想、有梦

想，想从事 IT ⾏业，⽽没有环境和机遇改变⾃⼰命运的年轻⼈。

Java 程序员的学员筛选制度，远⽐现在 90% 以上的企业招聘流程

更为严格。任何⼀名学员想成功⼊学 “Java 程序员 ” ，必须经历

⻓达 2 个⽉的⾯试流程，这些流程中不仅包括严格的技术测试、

⾃学能⼒测试，还包括性格测试、压⼒测试、品德测试等等测

试。毫不夸张地说， Java 程序员训练营所有学员都是精挑细选出

来的。百⾥挑⼀的残酷筛选制度确保学员质量，并降低企业的⽤

⼈⻛险。 </p>

<p> 中关村 Java 程序员训练营不仅着重培养学员的基础理

论知识，更注重培养项⽬实施管理能⼒，并密切关注技术⾰新，

不断引⼊先进的技术，研发更新技术课程，确保学员进⼊企业后

不仅能独⽴从事开发⼯作，更能给企业带来新的技术体系和理

念。 </p>

<p> ⼀直以来， Java 程序员以技术视⻆关注 IT 产业发展，

以深度分享推进产业技术成⻓，致⼒于弘扬技术创新，倡导分

享、开放和协作，努⼒打造⾼质量的 IT ⼈才服务平台。 </p>

</body>

</html>

1图⽚标签(重要)

img 标签中的 img 其实是英⽂ image 的缩写 , img 标签的作

⽤ , 就是告诉浏览器我们需要显示⼀张图⽚

语法 :

<img src=" 图⽚路径 " width=" 宽 " height=" ⾼ "

alt=" 图⽚描述 " title=" ⽤于告诉浏览器 , 当⿏标悬停在图

⽚上时 , 需要弹出的描述框中显示什么内容 "/>

示例代码

<!-- 掌握 : src 属性 : 图⽚的路径 ; width 属性 : 指定图

⽚的宽度 ; height 属性 : 指定图⽚的⾼度 ;

了解 : alt 属性 : 图⽚的描述 ( 只有图⽚显示错误的

时候才有效果 ); title 属性 : ⿏标放上去显示的标题 -->

<img src = "../img/b.jpg" width = "400px"

height = "200px" alt = " 美⼥ " title = " 哈哈哈哈 " />

2. 路径问题

2.1 相对路径

相对路径就是每次都从 .html ⽂件所在的⽂件夹开始查找 , 我们

称之为相对路径

同级

同级就是 " 图⽚ " 和 ".html ⽂件 " 存储在同⼀个⽂件夹中

格式 : src="QRCode.jpg"

<!DOCTYPE html>

<head>

</head>

1. 图⽚标签

<img src=" 图⽚的路径 " width=" 宽 " height=" ⾼ "

alt=" 图⽚描述 " title=" ⿏标放上去展示的信息 "/>

2. 路径问题

绝对路径 ( 以 http 开始的 , 以盘符开始的 )

<body>

<hr/>

<hr/>

<hr/>

<hr/>

<hr/>

</body>

</html>

友情链接

1. ⽬标

点击百度，进⼊百度⻚⾯ ....

2. 路径

1. 列表标签

2. 超链接标签

3. 完成友情链接的练习

3. 实现

列表标签 ( 认识就⾏ )

⽆序列表

语法

<li> 需要显示的条⽬内容 </li>

...

</ul>

示例代码

<!--type 属性 : 列表的类型 ; circle: 空⼼圆 ;

square: 实⼼的正⽅形 -->

<!--li 定义列表⾥⾯的条⽬ (item). li 定义在 ul

⾥⾯ -->

</ul>

注意点

ul 标签和 li 标签是⼀个整体 , ⼀般情况下 ul 标签和 li 标签都是

⼀起出现 , 不会单个出现 .

li 要定义在 ul ⾥⾯

应⽤场景

新闻列表商品列表导航条, 菜单

有序列表

语法

示例代码

<li> 需要显示的条⽬内容 </li>

...

</ol>

<!-- ⼀ , 有序列表 ol

start 属性 : 起始的索引 ( 默认是第 1 个 )

type 属性 : 列表类型 ; 1: 阿拉伯数字 ; a: ⼩写

的英⽂字⺟ ; A: ⼤写的英⽂字⺟ ; i: ⼩写的罗⻢数字 ; I: ⼤

写的罗⻢数字

-->

<!--li 定义列表⾥⾯的条⽬ (item). li 定义在 ol

⾥⾯ -->

</ol>

超链接标签

超链接标签的作⽤ : 就是⽤于控制⻚⾯与⻚⾯ ( 服务器资源 )

之间跳转的

超链接标签的格式 :

<a href=" 指定需要跳转的⽬标路径 " target=" 打开的

⽅式 "> 需要展现给⽤户查看的内容 </a>

target 属性取值 :

_blank ：新起⻚⾯

_self ：当前⻚⾯（默认）

示例代码

target 属性 : 链接打开⽅式 ; _blank: 新开⼀个窗

⼝ ;_self: 在当前⻚⾯打开 ( 默认值 )

-->

<a href = "../03_ 公司简介案例 /company.html"

id = "top" > 查看公司简介 </a><br/>

<a href = "https://www.baidu.com"

target = "_blank" > 跳转到百度 </a>

假链接

就是点击之后不会跳转的链接我们称之为假链接 . 在企业开发

前期 , 其它界⾯都没有写出来 , 那么我们就不知道应该跳转到

什么地⽅ , 所以就只能使⽤假链接来代替 . 当项⽬后期其它界

⾯都已经完成时再将假链接体会为真链接

友情链接练习

1. 创建标题标签

2. 创建⽆序列表

3. 在⽆序列表⾥⾯定义三个 li

4. 再在每⼀个 li ⾥⾯定义 a

实现

<!DOCTYPE html>

<head>

</head>

<body>

<li><a href = "http://www.sunlw.com"

target = "_blank" > Java 程序员 </a></li> 4. ⼩结

1. 列表标签

⽆序列表

有序列表

li 定义 ol 或者 ul ⾥⾯内容定义在 li ⾥⾯

2. 超链接标签

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

</a></li>

<li><a href = "#" > ⽹易 </a></li> <!-- 跳转地

址略 -->

<li><a href = "#" > 百合 </a></li> <!-- 跳转地

址略 -->

</ul>

</body>

</html>

表格标签

基本表格

表格：由 <table> 标签定义；

⾏：每个表格⾥有若⼲⾏ <tr> ；

单元格：每⾏被分割为若⼲单元格 <td> 。

单元格⾥可以包含⽂本、图⽚、列表、段落、表单、⽔

平线、表格等

单元格合并

1.删除要合并的格⼦ , 只留⼀个 ( 最前⽅的那⼀个 )

2. 如果是⾏合并设置 rowspan, 如果是列合并设置 colspan,

⼏个合并值就是⼏

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

<hr/>

<tr>

</tr>

<tr>

</tr> <tr>

</tr>

</table>

<hr/>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

表单标签练习(最重要的内容)

分析

表单⽤于收集不同类型的⽤户输⼊。

它由⼀个 <form> 标签定义，⾥边有不同的表单控件（表单

项）

常⽤表单控件（表单项）有： <input> , <select> ,

1. 表单标签【重点】

通过 form 来定义 : 包裹表单项、指定向服务器提交的路

径、提交⽅式

<form>

//1.input 类型

//2.select 类型

//3.textarea 类型

</form>

常⽤属性

action: 提交路径 , 默认是当前⻚⾯ ,#

method: 提交⽅式 , 常⽤的是 get 和 post. 默认就是 get

get 和 post 区别

1. 携带数据的位置 :get 是在地址栏后⾯携带的， post 是在

http 协议的请求体中携带的

2. 携带数据的类型 :get 只能携带字符串不能携带⽂件， post

可以携带任意类型的数据，所以如果是⽂件上传那么只能选择使

⽤ post ⽅式

3. 携带数据的⼤⼩ :get 携带数据的⼤⼩⼀般不超过 4kb,post

携带数据的⼤⼩是没有限制的 ( 但是⼀般服务器都会做限制 )

4. 安全性 :post⽐get 更安全

form 的常⻅⼦标签

input: 输⼊域 , 通过 type 属性来指定类型

select : 选择列表

textarea ：⽂本域

input ：输⼊类型

type 属性 , 类型是由属性（ type ）定义的

1. text( 默认类型 ) ⽂本框

2. password 密码框

3. radio 单选框只有当 name 属性相同的单选框，才是同⼀组

单选框才能够实现单选效果

4. checkbox 复选框同⼀组多选框，也应该具备相同的 name

属性

5. file ⽂件选择框

6. date ⽇期选择框

7. hidden 隐藏域：向服务器提交数据，但是不在⻚⾯上展示

出来

8. submit 提交按钮：内置提交表单的功能

9. button 普通按钮：不内置任何功能，我们需要在学习 js 之

后再给他绑定点击事件

10. reset 重置按钮：内置重置表单的功能

选择菜单

<option value = "" > 显示的内容 </option>

</select>

option ：选择菜单的选项

注意：

name 在 select ⾥⾯指定

value 在 option ⾥⾯指定

option 定义在 select ⾥⾯

textarea: ⽂本域

</textarea>

属性：

cols 列

rows: ⾏

通⽤属性

1.name

1. 如果表单项的数据需要提交给服务器，那么他就必须具备

name 属性

2. 2. 同⼀组单选、多选框需要具备相同的 name

2.value

1. 按钮的 value 属性就是按钮上的⽂字

2. 输⼊框、密码框、⽂件选择框、⽇期选择框等等的 value 属

性的值，就是你所输⼊的值

3. 单选和多选框都需要指定 value

设置默认值

text,password:通过value属性

⽤户名 : <input type="text" name="username"

value="zs"/>

radio checkbox:通过checked属性

性别 : <input type="radio" name="sex" value="1"/>

男

<input type="radio" name="sex" value="0"

checked="checked" /> ⼥