介绍
web网页通常由三个部分构成,即HTML、CSS、JavaScript,合称网页三剑客。其中,
HTML:控制页面的结构,即页面的布局。如文档段落、表单、图片。
CSS:控制页面的表现,也就是使页面变得好看。如字体、颜色、图片大小。
JS:控制页面的行为,和用户产生交互。如用户点击button后刷新页面,显示更新后的信息。
HTML基础
页面结构
HTML是一种标记语言(markup language),使用标签来描述网页。
HTML文档结构树如下:
HTML基本结构:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
网页显示内容
</body>
</html>
HTML标签
标签格式
- HTML标签是由尖括号包围的关键字,如 <html>, <div>等
- HTML标签通常是成对出现的,比如:<div>和</div>,第一个标签是开始,第二个标签是结束。结束标签会有斜线。
- 也有一部分标签是单独呈现的,比如:<br/>、<hr/>、<img src=“1.jpg” />等。
- 标签里面可以有若干属性,也可以不带属性。
标签的语法:
- <标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
- <标签名 属性1=“属性值1” 属性2=“属性值2”…… />
几个很重要的属性:
- id:定义标签的唯一ID,HTML文档树中唯一
- class:为html元素定义一个或多个类名(classname)(CSS样式类名)
- style:规定元素的行内样式(CSS样式)
标签
基本标签
- 段落:
<p>段落</p> 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白. - 文本控制:
<b>加粗</b>
<strong>加粗</strong>
<i>斜体</i>
<strike>: 为文字加上一条中线.
<u>下划线</u>
<s>删除</s>
<em> 文字变成斜体.
<sup>和<sub> 上角标 和 下角表.
<br> 换行
<hr> 水平线 - 图片:<img src=“图片地址” alt=“图片描述”>
- 超链接:<a href=“url地址”>内容
- 列表:
- 无序列表:
<ul type=“disc”>
<li>第一项</li>
<li>第二项</li>
</ul>
- 无序列表:
type属性 | 说明 |
---|---|
disc | 实心圆点,默认值 |
circle | 空心圆圈 |
square | 实心方块 |
none | 无样式 |
- 有序列表:
<ol type=“1” start&