一,HTML页面的构成要素
- HTML:Hyper Text Markup Language,超文本标记语言,由一系列事先约定好的标记(标签)来描述一个页面的构成,HTML不是编程语言,只是标记语言。HTML主要由三部分构成:标记,属性,内容。用于描述一个页面的构成。
- 文本:设置字体,颜色,大小,加粗,斜体,下划线等与world类似。
- 图片:设置边框,大小,位置
- 超链接:图片,文本均可等均可以添加超链接
- 表格:展示行列构成的结构化数据,可以用表格表示,可以为表格设置大小,背景,表格里面可以放所以元素。
- 表单:文本框,下拉框,单选框,复选框,文本域,按钮等。
- 多媒体:音频,视频,H5游戏等。
- CSS:Cascade Style Sheet:层叠样式表,用于对页面元素进行布局和美化
- JavaScript:在浏览其中运行的解释型编程语言,用于进行页面的交互(前后端交互,用户之间的交互)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 常规情况,标记都是成对出现 -->
<!-- 但是,在HTML页面中,文本内容不再建议使用font标签 -->
<!-- 通常,文本,图片等元素都会被放置于容器中:表格,DIV-->
<font color="red">欢迎来到我的世界</font>
<font color="blue" size="5">我的世界通往天堂</font>
<!-- 使用DIV来包裹一段文本,并设置字体大小和颜色 -->
<!-- 被style属性指定包裹的,是CSS样式 -->
<div style="color:blanchedalmond;font-size: 30px;">欢迎来到我的世界</div>
<!-- 图片 -->
<img src="img/img_1.jpg" alt="" width="500">
<!-- 超链接,使用target=_blank可打开新的标签 -->
<div><a href="https://www.baidu.com/">百度</a></div>
<!-- 表格:由行和列构成,主要使用三个标签<talbe>定义表格整体属性,<tr>定义一行,<td>定义一列 -->
<table width="500" height="300" bgcolor="" border="1">
<tr >
<td width="250" height="80">一行一列</td>
<td whidth="30%">一行二列</td>
<td>一行三列</td>
</tr>
<tr>
<td width="250">二行一列</td>
<td whidth="30%"></td>
<td>二行三列</td>
</tr>
</table>
<!-- 表单 -->
<input type="text" placeholder="请输入用户名">
<input type="password">
<input type="button" value="请点击登陆">
<select name="" id="">
<option value="">选项一</option>
<option value="">选项二</option>
<option value="">选项三</option>
<option value="">选项四</option>
</select>
<button>点我</button>
</html>