一, 概念: 超文本标记语言 (Hyper Text Markuo Language)
二, html 文档:
文档声明:
<!DOCTYPE> //HTML5 中的声明直接可写为:<!DOCTYPE html>
--- 首行, 顶格
文档头部:
<head>...</head>
文档主体:
<body>...</body>
1. 语法:
<>
闭合
一个或多个属性值
嵌套 (闭合时要根据嵌套顺序依次闭合)
注释:<!-- -->
2. 书写规范:
小写
属性值双引号
嵌套缩进
3. 常用属性 (全局):
id : 页面中仅能出现一次
<div id="nav"></div>
class: 可出现多次
<span class="time"></span>
style: 引入样式, 但不推荐此方式
<div style="display:none;"></div>
title: 鼠标放上去时显示的信息
<a title="收藏"></a>
4. 文档章节:
1)body
2)header: 章节头部 (标题等)
3)nav: 导航
4)aside: 侧边栏, 插入广告, 扩展工具等
5)article: 独立的可重复的结构, 论坛帖子等, 一般包括 header 和 footer
6)section: 表示文档中的一部分, 是相对独立的一部分
7)footer: 章节尾部 (版权信息, 链接等)
8)hx
5. 标题:
h1-h6: 字体大小由大到小
6. 文本相关:
1) 超链接 < a></a>:
创建指向另一个文档的链接:
<a href="http://baidu.com"> 百度 </a>
创建一个文档内部的锚点:
<a href="# 要跳到的位置的 div 标签的 id 属性值"> 某个 div</a>
应用例子: 回到顶部
链接到 email 地址:
<a href="mailto:xxxx@163.com"> 网易邮箱 </a>[邮箱地址可以是多个]
2) 强调:
em: 语义上的强调
strong: 字体上的强调
3) 换行:
<br>
4) 引用:
<cite>: 引用的出处, 文字会变成斜体
<q>: 引用的一段文字, 会自动加上双引号
5) 代码:
<code>
6) 格式化:
<b>: 粗体
<i>: 斜体
7. 嵌入资源:
1) 图片:
<img src="图片地址" alt="图片标题"></img>
2) 嵌入页面:
<iframe src="http://xxxxxx.com"></iframe>
3) 嵌入外部资源:
- <object type="">
- <param name=""value=""/>
- </object>
- <embed type=""src=""></embed>
4) 视频:
<video controls=""poster=""> autoplay: 是否打开就自动播放; loop: 视频循环播放
- <source src=""type="">
- ...
<track kind="subtitles" src=""> [可以引入一个视频的字幕]
您的浏览器不支持播放视频
</video>
5) 图:
canvas: 基于像素, 适用于性能要求较高的
svg: 矢量
6) 热点区域:
map
area
8. 表格: 跨行效果: rowspan; 跨列效果: colspan;
- <table>
- <caption > 表格标题 </caption>
- <thead>
- <tr><th> 表格每行内容, 几个 tr 代表有几行, 几个 th 代表有几列 </th></tr>
- </thead>
- <tbody>
- <tr><th> 表格每行内容, 几个 tr 代表有几行, 几个 th 代表有几列 </th><td > 普通单元格 </td></tr>
- </tbody>
- <tfoot>
- <tr><td colspan="2"> 表格每行内容, 几个 tr 代表有几行, 几个 th 代表有几列 </td></tr>
- </tfoot>
- </table>
9. 表单:
- <form action="后台地址" method="post">
- <fieldset>// 分区
- <legend>...</legend> // 分区名称
- <input type=""name="">
- <label for="">...</label>
- <select id=""> // 此处 id 与 label 中的 for 属性值一致, 证明该下拉框属于这个 label 中的
- <opgroup label=""> // 下拉框选项内分组
- <option value="0"> 下拉框第一项 </option>
- <option value="1"> 下拉框第二项 </option>
- </opgroup>
- <option value="2"> 下拉框第三项 </option>
- </select>
- </filedset>
- <button type="submit"> 提交 </button>// 按钮
- <button type="reset"> 重置 </button>
- </form>
input 类型在 HTML5 中又有新类型:
email,url,number,tel,search,range,color,data picker(data,month,week,time,datetime,datetime-local)
该笔记内容为个人学习 web 前端开发微专业课程时的随记.
来源: http://www.qdfuns.com/note/31835/9b7dbe205fbffa379eddebdd65f44a2b.html