什么是 HTML?
1全称: 超文本标记语言
2超文本: 在普通的文本内容的基础上添加超链接, 图片, 视频等
3标记语言: HTML 提供一系列标签
4版本: HTML 4.01
HTML 声明
1. 编码格式: HTML 5
2.HTML 的模版
1HTML 的声明 <!DOCTYPE HTML>
作用: 告诉浏览器当前 HTML 页面的版本和类型
用法: 必须在 HTML 页面的 0 行 0 列
注意: 声明并不是必要的, 声明让浏览器更好地解析 HTML 页面.
2根标签 < HTML>
注意: 一个 HTML 页面中只能具有一个根标签
3<head > 标签
作用: 定义当前 HTML 页面的信息
子标签
- <title>
- 定义 HTML 页面的标题, 方便被搜索引擎抓取.
- <link>
- 引入外部的 CSS 文件
- <style>
- 编写 CSS 样式代码
- <script>
- 引入外部的JavaScript文件或编写JavaScript代码 < meta > <meta charset = "UTF-8" > 设置编码格式 < meta name = "keywords" > 设置关键字,
- 方便被搜索引擎抓取.
4<body > 标签
作用: 显示在浏览器窗口中
HTML 的标签
HTML 的属性
1. 定义: 被定义在开始标签
2. 格式: 属性名称 ="值"
3. 分类:
1标准属性: 几乎所有的标签都具有的属性
举例: id - 标识, 唯一
name - 名称
class
style
2私有属性: 只有某个具体的标签具有的属性
标题 <h1>~<h6>
效果: 从大到小
<h1>: 方便地搜索引擎抓取, 一个 HTML 页面最好只有一个 < h1>
段落 <p></p>
换行 <br>
水平线 <hr>
列表
1有序列表
- <ol>
- <li>
- </li>
- </ol>
2无序列表
- <ul>
- <li>
- <li>
- </ul>
3定义列表
- <dl>
- <dt>
- 项目名称
- </dt>
- <dd>
- 项目中的具体内容
- </dd>
- </dl>
链接
<a href="地址"></a>
作用: 实现页面之间的跳转
2锚点
<a href="# 名称"> 回到顶部 </a>
3发送邮件
4<a > 元素的属性列表
属性名 | 值 | 描述 |
---|---|---|
href | URL | 规定链接的目标 URL。 |
target | _blank/_parent/_self | 规定在何处打开目标 URL。仅在 href 属性存在时使用。 |
路径
1相对路径: 目标页面相对于当前页面的路径
2绝对路径: 从根目录开始查找到目标页面的路径
图片
1<img src="图片的地址">
2显示大小: width 设置图片显示的宽度
Height 设置图片显示的高度
3注意: 设置显示的宽度和高度与原图片的比例保持一致
4img 元素的属性列表:
属性名 | 值 | 描述 |
---|---|---|
align | topbottommiddleleftright | HTML5 不支持。HTML 4.01 已废弃。 规定如何根据周围的文本来排列图像。 |
alt | text | 规定图像的替代文本。 |
height | pixels | 规定图像的高度。 |
src | URL | 规定显示图像的 URL。 |
width | pixels | 规定图像的宽度。 |
HTML 表格
1概念: 具有行和列
2基本结构
- <table>
- 表示表格
- <tr>
- 表示行
- <td>
- 表示单元格
3带表头的表格
表头单元格由 < th > 创建, 元素中的文本通常呈现粗体并居中.
标准单元格由 < td > 创建, 元素中的文本默认左侧对齐.
分类:
- <thead>
- 表示表格的表头, 显示在表格的最上面.
- <tbody>
- 表示表格中的数据
- <tfoot>
- 表示表格中的结尾, 显示在表格的最下面.
4带标题的表格
<caption > 定义标题: 每个表格只能设置一个, 默认居中显示.
5跨行或跨列
rowspan 跨行
colspan 跨列
HTML 表单
1作用: 提交页面中的数据内容
2<form>: 表示表单
属性名 值 描述
action URL 规定当提交表单时向何处发送表单数据.
method get/post 规定用于发送表单数据的 HTTP 方法.
name text 规定表单的名称.
3表单的组件:<input>
4输入框
- <input type="text">
- <input type="password">
5按钮
- <input type="button">
- <input type="reset">
- <input type="submit">
6单选或多选框
- <input type="radio">
- <input type="checkbox">
7隐藏域
<input type="hidden">
8文件域
- <input type="file">
- 9
- <select>
下拉单选框
下拉多选框
HTML 实体
概念: HTML 实体指的就是 HTML 的转义字符
显示结果 | 描述 | 实体名称 |
---|---|---|
空格 | ? | |
< | 小于号 | < |
> | 大于号 | > |
& | 和号 | & |
" | 引号 | " |
? | 版权(copyright) | ? |
? | 注册商标 | ? |
? | 商标 | ? |
× | 乘号 | × |
÷ | 除号 | ÷ |
来源: http://www.bubuko.com/infodetail-3382585.html