HTML入门指南-优快云博客

01_html

1 Mac中的快捷键

基础快捷键：

command c

复制

command v

粘贴

command m

最小化当前窗口

Shift command c

桌面环境打开Finder

command space

输入法切换

fn F3

快速显示桌面

command tab

切换应用程序

command shift N

在打开Finder后快速建立文件夹

command shift { }

切换浏览器标签

command w

快速关闭浏览器的一个标签页

command T

浏览器中快速新建一个标签页

command L

浏览器中快速定位到地址栏

command M

最小化当前程序

control command F

最大化当前窗口（恢复窗口)

2 认识网页

网页主要是由文字、图片、按钮等元素构成。当然，除了这些元素外，还包含有音频、视频和Flash等。

Web三大标准：

结构标准
表现标准
行为标准

常用的浏览器：

IE
FireFox
Chrome
Opera
Safari

3 HTML简介

3.1 HTML定义

HTML中文翻译为超文本标记语言(Hyper Text Markup Language),主要是通过HTML标记对网页中的文本、图片、声音等进行描述。

3.2 HTML结构

一个基本的HTML文档如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML结构</title>
</head>
<body>
    欢迎学习HTML！
</body>
</html>

3.3 HTML标签关系

嵌套关系
并列关系

HTML标签分为双标签和单标签

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文档声明

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

</body>
</html>

<!DOCTYPE >

放在文档的第一行，这不是一个标签，是用来声明html的类型。

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对齐属性值

mark

换行标签:

<br />

水平线：

<hr />

属性如下：

mark

练习：

<!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>

特殊符号：

mark

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>特殊符号</title>
</head>
<body>
    <p align="center">关于我们&nbsp;|&nbsp;招聘信息&nbsp;|&nbsp;联系我们&nbsp;|&nbsp;意见反馈
</p>
<p align="center">Copyright&nbsp;&copy;2016&nbsp;yubindeng.me&nbsp;All&nbsp;Rights&nbsp;Reserved</p>
</body>
</html>

效果图：

mark

4.2 列表标签

无序列表：

<ul>
<li>列表项</li>
<li>列表项</li>
……
</ul>

type属性值：

mark

有序列表：

<ol>
<li>列表项</li>
<li>列表项</li>
……
</ol>

type属性值：

mark

定义列表：

定义列表：
<dl>
<dt>定义列表项</dt>
<dd>列表项描述</dd>
<dd>列表项描述</dd>
<dt>定义列表项</dt>
<dd>列表项描述</dd>
……
</dl>

例子：

<!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属性：

mark

超链接标签语法：

< a href=“”>内容</a>

属性：

mark

定义锚（同一页面):

< 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>

01html基础

01_html

1 Mac中的快捷键

2 认识网页

3 HTML简介

3.1 HTML定义

3.2 HTML结构

3.3 HTML标签关系

3.4 HTML开发工具Sublime

4、常用标签

4.1 文档段落

4.1.1 DOCTYPE文档声明

4.1.2 网页编码设置

4.1.3 文字和段落标签

4.2 列表标签

4.3 图像和超链接标签