html零基础入门教程

最新推荐文章于 2024-07-28 20:59:34 发布

听又听不懂，学又学不会

最新推荐文章于 2024-07-28 20:59:34 发布

阅读量966

点赞数 15

文章标签： html 前端 java

本文链接：https://blog.csdn.net/2301_80012869/article/details/136514348

版权

一、什么是HTML

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。

HTML文档的后缀名

.html
.htm

以上两种后缀名没有区别，都可以使用。

HTML结构

HTML语言是超文本标记语言。
HTML（Hyper Text Markup Language)是一种用于创建网页的标准标记语言。

html是由标签构成的。
标签名要放入<>中。
大部分标签成对出现，称为“双标签”，少数标签单独出现，称为“单标签”。

1.1 HTML基本结构

---------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

注：在浏览器的页面上使用键盘上的 F12（Fn+F12）按键开启调试模式，就可以看到组成标签。

---------------------------------------------------------------------------------------------------------------------------------

浏览器效果：

---------------------------------------------------------------------------------------------------------------------------------

DOM树

标签之间的文件关系构成了DOM树。
DOM（Document Object Mode)文档对象模型
防止乱码问题：

---------------------------------------------------------------------------------------------------------------------------------

2. HTML常见标签

2.1 注释标签:!

---------------------------------------------------------------------------------------------------------------------------------

ctrl+/快捷键可快速进行注释或取消注释

2.2 标题标签:h1-h6

---------------------------------------------------------------------------------------------------------------------------------

从h1到h6,数字越大字体越小。

2.3 段落标签:p

---------------------------------------------------------------------------------------------------------------------------------

2.4 文字格式化

2.4.1 加粗/strong

b标签和strong标签

2.4.2 倾斜:i/em

i标签和em标签

2.4.3 下划线:u/ins

u标签和ins标签

2.4.4 删除线:s/del

s标签和del标签

---------------------------------------------------------------------------------------------------------------------------------

2.5 换行标签:br

单标签、规范写法：<br/>

2.6 图片标签:img

img标签必须带src属性，来展示图片的路径。

---------------------------------------------------------------------------------------------------------------------------------

img标签的其他属性：
alt ：替换文本
title：提示文本，鼠标放到图片上显示的文字。
width：宽度
height：高度
border：边框
要把图片文件与HTML在同级目录中。

浏览器效果：

---------------------------------------------------------------------------------------------------------------------------------

**相对路径：**以html所在位置为基准，找到图片的为位置。

同级路径：直接写文件名 ./
下级路径：image/1.jpg
上级路径：…/image/1.jpg

绝对路径：完整的磁盘路径或网络路径。
磁盘路径：D:\food.jpg
网络路径：https://image…

2.7 超链接:a

空链接：使用#在herf中占位。

---------------------------------------------------------------------------------------------------------------------------------

外部链接href: 必须有链接地址，即跳转后的页面地址，当前页面打开链接。

---------------------------------------------------------------------------------------------------------------------------------

点击“百度”跳转页面

--------------------------------------------------------------------------------------------------------------------------------

内部链接target: 打开方式，在一个新的页面打开链接地址

--------------------------------------------------------------------------------------------------------------------------------

点击跳转到页面2

--------------------------------------------------------------------------------------------------------------------------------

下载链接: href对应的路径是一个文件。

--------------------------------------------------------------------------------------------------------------------------------

点击文字就可以下载了

--------------------------------------------------------------------------------------------------------------------------------

网页元素链接：可给图片等任何元素添加链接。

--------------------------------------------------------------------------------------------------------------------------------

点击图片跳转到百度

锚点链接: 可以快速定位到页面中的某个位置。

--------------------------------------------------------------------------------------------------------------------------------

2.8 表格标签

整个表格: table
行：tr
列：td
表头单元格：th,会居中加粗
表格头部区域：thead
表格主体区域：tbody
table包含tr,tr包含th或td。

--------------------------------------------------------------------------------------------------------------------------------

合并单元格：
跨行合并：rowspan=“n”
跨列合并：colspan=“n”

--------------------------------------------------------------------------------------------------------------------------------

浏览器效果：

--------------------------------------------------------------------------------------------------------------------------------

2.9 列表标签

无序列表: ul li

--------------------------------------------------------------------------------------------------------------------------------

有序列表: ol li

--------------------------------------------------------------------------------------------------------------------------------

自定义列表：dl(总标签）dt(小标签）dd（围绕标题来说明）上面有小标题，下面有几个围绕标题展开的。

--------------------------------------------------------------------------------------------------------------------------------

2.10 表单标签

表单是让用户输入信息的重要途径。
表单域：包含表单元素的区域，重点是from标签。
表单控件：输入框，提交按钮等，重点是input标签。

2.10.1 form标签：

--------------------------------------------------------------------------------------------------------------------------------

各种输入控件，单行文本框，按钮，单选框，复选框。
type: button,checkbox,text,file,image,password,radio等多种类型。
name:
value:当前标签的的默认值。
checked：默认被选中。（单选按钮和多选按钮）
maxlength:设定最大长度。（使用场景文本框，
1.文本框：<input type = "text">、

2.密码框：<input type = "password">

--------------------------------------------------------------------------------------------------------------------------------