- 什么是html
html 是超文本标记语言，(Hyper Text Markup Language)
.html文件中包含，纯文本 和 标签
2.基本框架
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>网页显示标题</title>
</head>
<body>
<h1>我是标题</h1>
<p>我是段落</p>
</body>
</html>
* 注意：meta设置的字符集就是保存.html文件是使用的字符集
例如
| 标签 | 描述 |
|---|---|
| <html> | 之间描述整个网页 |
| <head> | 之间描述整个网页的一些设置 |
| <body> | 之间是整个网页的可见内容 |
| <h1>~<h6> | 之间是标题 |
| <p> | 之间是段落 |
-
HTML属性
属性就是可以给HTML标签提供更多的信息。
格式： name="value"
例如：a标签的 href属性
<a href="http://www.w3school.com.cn">This is a link</a>
下面列出大多数HTML标签都有的属性：
| 属性 | 值 | 描述 |
|---|---|---|
| class | classname | 给元素取一个类名 |
| ID | id值 | 给元素一个唯一的id值 |
| title | 文本 | 给元素一个额外的信息 |
| style | 样式设置 | 设置元素的行内样式 |
-
HTML元素
1. 什么是标签
开始标签 <>
结束标签 </>
- 标题标签
<h1> - <h6>
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
This is a heading
This is a heading
This is a heading
- 分割线标签
<hr>
或者
<hr />
- 换行
<br>
或者
<br />
- 注释
<!-- 这是注释 -->
- 段落
<p>这是一个段落</p>
- 文本的格式化
| 标签 | 描述 |
|---|---|
| b / strong | 加粗 / 强调(建议使用后者) |
| i / em | 斜体 / 强调 |
| big/small | 大号字/小号字 |
| sub/sup | 文本下标上标 |
| del | 定义删除字 |
- 链接
<a> xxx
<a href="http://www.xxx.com" title="这是一个超链接">xxx</a>
----------------------------------------
href: url
xxx: 显示给用户的信息
title: 鼠标放在xxx上的提示信息
target: 点击后的显示方式
_blank: 新的选项卡中打开
_self: 在当前选项卡中打开
-
图像
<img>
</img src="http://cdn2.jianshu.io/assets/web/logo-58fd04f6f0de908401aa561cda6a0688.png" alt="没有找到图片"></img>
------------------------------------
src: 要显示图像的地址(网络地址/本地地址)
alt: 当图像没有找到时显示给用户的提示信息
- 列表(list)
- 无序列表(ul)
- 有序列表(ol)
- 定义列表(dl)
<!-- ol:order list-->
<!-- type 列表排序的类型共五种：默认阿拉伯数字，“a”小写字母，"A"大写字母，"I"大写罗马数字排序，"i"小写罗马数字排序-->
<!-- start 排序的其实位置如果type="a" start="5" 那么从字母e开始-->
<!-- reversed="true" 倒序排列-->
--------------------------------------------------------------------
<ol type="I" start="5" reversed="true">
<li>第一步：清洗面部</li>
<li>第二部：涂爽肤水</li>
<li>第三部：涂乳液</li>
<li>第四部：涂防晒</li>
<ol >
<li>先涂粉底再涂防晒</li>
<li>先涂防晒再涂粉底</li>
</ol>
</ol>
<!-- 无序列表 unorder list 默认列表项前是小圆点-->
<li>cpb粉底</li>
<li>雪花秀气垫BB</li>
<li>iope气垫BB</li>
<!-- 定义列表：表达对名词或概念的解释或者描述-->
<dl>
<dt>cpb</dt>
<dd>日本高端护肤品品牌</dd>
<dt>雪花秀</dt>
<dd>韩国中高端护肤品品牌</dd>
</dl>
效果
- 表格(table)
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td></td>
<td>row 2, cell 2</td>
</tr>
</table>
效果
注意:
相关标签含义
| 表格标签 | 含义 | 相关属性 |
|---|---|---|
| table | 整个表格框架 | border,cellpadding,cellspacing |
| tr | 代表一代 | align,valign |
| td | 代表一个单元格 | align,valign,colspan,rowspan |
| th | 代表一个单元格中的数据为表头（加粗加黑显示） | align,valign,colspan,rowspan |
| caption | 代表表格的标题 | align |
- 容器标签
- <div>
块级容器 - <span>
行内容器
- 声音
<audio src="someaudio.wav">
您的浏览器不支持 audio 标签。
</audio>
- 属性是html5中的新属性
src: 音频源文件
autoplay: 自动播放
controls: 显示控制条
loop:循环播放
- 视频
<video src="movie.ogg" controls="controls">
您的浏览器不支持 video 标签。
</video>
- 属性是html5中的新属性
src: 音频源文件
autoplay: 自动播放
controls: 显示控制条
loop:循环播放
height: 高度
width: 宽度
2. 什么是元素
元素 就是指从开始标签到结束标签的所有代码。
分为：块级元素、行内元素、行内块级元素
区别：
- 块级元素 独占一行，可以设置宽高
- 行内元素 不独占一行，不能设置宽高
- 行内块级 不独占一行，但可以设置宽高
-
块级元素
代表：div p h table ul
-
行内元素
代表：apan a
-
行内块级元素
代表：img
三类元素可以相互转换，CSS中使用
display:
block
inline
inline-block
