1. HTML基本骨架
- HTML5是用来描述网页的一种语言,被称为超文本标记语言。HTML是一种标记语言,标记语言是一套标记标签。标签是由尖括号包围的关键字,标签有两种表现形式:
- HTML5 的DOCTYPE声明:
DOCTYPE是document type(文档类型)的缩写。 是网页必备的组成部分,避免浏览器的怪异模式。
- HTML5 的基本骨架
![]()
- html标签:
定义HTML文档,限定了文档的开始点和结束点。- head标签:
定义文档的头部,描述了文档的各种属和性信息,包括文档的标题、在Web中的位置以及和其他文档的关系,绝大多数文档头部包含的数据都不会真正作为内容显示给读者。- body标签:
定义文档的主体,body元素包含文档的所有内容,会直接在页面中显示出来,也就是用户可以直接看到的内容。- title标签:
定义文档的标题,显示在浏览器窗口的标题或状态栏上,title标签是head标签唯一必须要求包含的东西
- meta标签:
用来描述一个html网页文档的属性、关键词等。
2. 标签详解
2.1 标题
标题(Heading)是通过 h1 - h6标签进行定义的,
h1定义最大的标题 h6>定义最小的标题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
</body>
</html>
2.2 段落
段落通过p标签定义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>当我走在这条人行道上,我感受到微风轻拂着我的脸颊,带来一丝清凉。
街道两旁高楼林立,阳光透过缝隙洒在地面上,形成斑驳的光影。
人群来来往往,各自匆匆忙忙,仿佛都有着各自的目的地和使命。
我闭上眼睛,倾听着街头的喧嚣声,感受着这座城市的脉搏,它似乎有着自己独特的节奏和生命力。
在这个瞬间,我感觉自己融入了这座城市的喧嚣中,成为了这个城市不可或缺的一部分。</p>
</body>
</html>
2.3 换行
换行通过br标签实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>当我走在这条人行道上,我感受到微风轻拂着我的脸颊,带来一丝清凉。<br>
街道两旁高楼林立,阳光透过缝隙洒在地面上,形成斑驳的光影。<br>
人群来来往往,各自匆匆忙忙,仿佛都有着各自的目的地和使命。<br>
我闭上眼睛,倾听着街头的喧嚣声,感受着这座城市的脉搏,它似乎有着自己独特的节奏和生命力。<br>
在这个瞬间,我感觉自己融入了这座城市的喧嚣中,成为了这个城市不可或缺的一部分。</p>
</body>
</html>
2.4 水平线
水平线通过hr标签实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>当我走在这条人行道上,我感受到微风轻拂着我的脸颊,带来一丝清凉。<br>
街道两旁高楼林立,阳光透过缝隙洒在地面上,形成斑驳的光影。<br>
人群来来往往,各自匆匆忙忙,仿佛都有着各自的目的地和使命。<br>
我闭上眼睛,倾听着街头的喧嚣声,感受着这座城市的脉搏,它似乎有着自己独特的节奏和生命力。<br>
在这个瞬间,我感觉自己融入了这座城市的喧嚣中,成为了这个城市不可或缺的一部分。</p>
<hr>
</body>
</html>
2.5 图片
通过img标签定义图片。
2.6 超文本链接
通过a标签设置超文本链接
- a标签中可以是任意内容,设置链接之后点击都可以跳转。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="https://image.baidu.com/search/detail?ct=
503316480&z=0&ipn=d&word=%E5%9B%BE%E7%89%87&hs=0&pn=2&spn
=0&di=7308398814245683201&pi=0&rn=1&tn=baiduimagedetail&is=0%
2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=3309036479%2C1418171806&os=
3307548634%2C3547055573&simid=4162450612%2C523269078&adpicid=0&l
pn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=0&oriquery=%E5%9B%BE%E7%89%
87&objurl=https%3A%2F%2Finews.gtimg.com%2Fom_bt%2FOjPq2cnMN_-ivD
KjxpCZ2kk_ab8YC5VMnL-0pQ21fUvd4AA%2F1000&fromurl=ippr_z2C%24qAzdH
3FAzdH3Fgjo_z%26e3Bqq_z%26e3Bv54AzdH3F6wtgAzdH3FwAzdH3Fdadn88a0A
adcQMaa&gsm=&islist=&querylist=&dyTabStr=MCwzLDIsMSw0LDYsNSw4LDcs
OQ%3D%3D">图片</a>
</body>
</html>
点击后跳转:
2.7 常用文本标签
- 定义着重文字:em
- 定义粗体文本:b
- 定义斜体字:i
- 定义加重语气:strong
- 定义删除字:del
- 无效果:span
2.8 有序列表
有序列表是一列项目,列表项目使用数字进行标记。
有序列表始于ol标签。每个列表项始于 li 标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ol>
</body>
</html>
2.9 无序列表
无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记无序列表始于 ul 标签。每个列表项始于 li 标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
</body>
</html>
2.10 表格
表格:table
行:tr
列:td
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<tr>
<td>苹果</td>
<td>香蕉</td>
<td>橘子</td>
</tr>
<tr>
<td>黄瓜</td>
<td>萝卜</td>
<td>白菜</td>
</tr>
<tr>
<td>可乐</td>
<td>雪碧</td>
<td>芬达</td>
</tr>
</table>
</body>
</html>
2.11 Form表单
表单是由容器和控件组成的,一个表单一般应该包含用户填写信息的输入框,按钮等,这些输入框,按钮叫做控件,表单就是容器,它能够容纳各种各样的控件。
<form action = "url" method = "get/post" name = "myform"></ form>
- action:服务器地址
- name:表单名称
表单元素:
- 表单标签
- 表单域
- 表单按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<input>
<input type="submit">
</form>
</body>
</html>
2.12 文本框
文本域通过input type = “text” 标签来设定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
First name <input type="text" name="firstname">
<br>
Last name <input type="text" name="lastname">
</form>
</body>
</html>
2.13 密码框
通过input type = “password” 定义密码字段。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
Password <input type="password" name="pwd">
</form>
</body>
</html>
2.14 提交按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
Password <input type="password" name="pwd">
<input type="submit" value="submit">
</form>
</body>
</html>
2.14 容器
容器标签通过div标签实现,使各个模块之间更易于区分。
3. 块元素与内联元素
内联元素与块级元素的区别:
- 块级元素:
在页面中独占一行自上向下垂直排列,可以设置width、height属性,一般块级元素可以包含行内元素和其他块级元素。- 内联元素:
行内元素不会独占页面的一行,只会占自身的大小,从左到右从上到下依次排列,行内元素设置width、height属性无效,一般内联元素包含内联元素不包含块级元素。
- 常见块级元素(不换行,能够识别宽高):
div、form、h1~h6、hr、p、table、ul等。- 常见内联元素:
a、b、em、i、span、strong等。- 行内块级元素:
button、img、input等。