html">01_html
1 Mac中的快捷键
基础快捷键：
command ccommand vcommand mShift command ccommand spacefn F3command tabcommand shift Ncommand shift { }command wcommand Tcommand Lcommand Mcontrol command F2 认识网页
网页主要是由文字、图片、按钮等元素构成。当然，除了这些元素外，还包含有音频、视频和Flash等。
Web三大标准：
- 结构标准
- 表现标准
- 行为标准
常用的浏览器：
- IE
- FireFox
- Chrome
- Opera
- Safari
html简介">3 HTML简介
html定义">3.1 HTML定义
HTML中文翻译为超文本标记语言(Hyper Text Markup Language),主要是通过HTML标记对网页中的文本、图片、声音等进行描述。
html结构">3.2 HTML结构
一个基本的HTML文档如下所示：
html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML结构</title>
</head>
<body>
欢迎学习HTML！
</body>
</html>html标签关系">3.3 HTML标签关系
- 嵌套关系
- 并列关系
HTML标签分为双标签和单标签
html开发工具sublime">3.4 HTML开发工具Sublime
常用快捷键：
Command T：查询/前往文件
Command R：查询/前往funcdtion或method
Command K B: 隐藏/显示边栏
Command L：选择当前光标整行
Command D：选择当前光标所在的一个词 （继续按会继续选取下一个同样的词）
Ctrl Shift K: 删除当前行
Command K U: 转换为大写
Command K L: 转换为小写
Comamand Shift V: 粘贴并缩进
Command F：查找
Command Shift F：查找替换
Command /: 注释/非注释
Ctrl M：前往匹配的括号4、常用标签
4.1 文档段落
4.1.1 DOCTYPE文档声明
html"><!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html><!DOCTYPE >4.1.2 网页编码设置
在网页显示乱码是，在head标签之间添加：
<meta http-equiv="Content-Type" contect="text/html" charset="UTF-8">4.1.3 文字和段落标签
标题标签：
<h1></h1>~<h6></h6>段落标签:
<p> </p>align对齐属性值
换行标签:
<br />水平线：
<hr />属性如下：
练习：
html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一首诗</title>
</head>
<body>
<h1 align="center">《早发白帝城》</h1>
<p align="center">朝辞白帝彩云间，千里江陵一日还。</p>
<p align="center">两岸猿声啼不住，轻舟已过万重山。</p>
</body>
</html>文字斜体:
<i></i> 、 <em></em>加粗：
<b></b> 、 <strong></strong>下标：
<sub>上标：
<sup>插入内容：
<ins>删除内容：
<del>特殊符号：
html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>特殊符号</title>
</head>
<body>
<p align="center">关于我们 | 招聘信息 | 联系我们 | 意见反馈
</p>
<p align="center">Copyright ©2016 yubindeng.me All Rights Reserved</p>
</body>
</html>效果图：
4.2 列表标签
无序列表：
<ul>
<li>列表项</li>
<li>列表项</li>
……
</ul>type属性值：
有序列表：
<ol>
<li>列表项</li>
<li>列表项</li>
……
</ol>type属性值：
定义列表：
定义列表：
<dl>
<dt>定义列表项</dt>
<dd>列表项描述</dd>
<dd>列表项描述</dd>
<dt>定义列表项</dt>
<dd>列表项描述</dd>
……
</dl>例子：
html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<h2>什么是 HTML？</h2>
<p>HTML 是用来描述网页的一种语言。</p>
<ul type="square">
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<!-- 有序列表 -->
<ol type="A">
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ol>
<hr />
<dl>
<dt>什么是HTML</dt>
<dd>HTML是用来描述网页的一种语言。</dd>
<dd>HTML超文本标记(Hyper Text Markup Language)。</dd>
<dt>HTML标签</dt>
<dd>HTML标记标签通常被称为HTML 标签</dd>
<dt>HTML元素</dt>
<hr />
</body>
</html>列表在实际中的应用场景，可以再谷歌浏览器下通过F12打开开发者工具看京东、搜狐等网页的设计。
4.3 图像和超链接标签
图片标签语法：
<img src=“” alt=“” title="" …/> 注意相对路径和绝对路径
img属性：
超链接标签语法：
< a href=“”>内容</a>属性：
定义锚（同一页面):
< a href=“#锚名1”>目录1 </a>
< a href=“#锚名2”>目录2 </a>
< a href=“…”name=“锚名1”>内容</a>
xxxxxxxxx
xxxxxxxxxxxxx
< a href=“…”name=“锚名2”>内容</a>
xxxxxxxxx
xxxxxxxxxxxxx定义锚（不同页面）：
< a href=“网页名称#锚名”>……</a>电子邮件链接：
<a href=“mailto:邮件地址”>……</a>文件下载链接:
<a href="文件地址"> ... </a>
