标签：
1 什么是html
hyper text markup language 超文本标记语言
hyper text 超文本：比普通的文本要厉害
markup 标记：用特殊的符号告诉你一些信息
在html里，主要是指自带的标记
<标记的英文单词>
language 语言：交流沟通的工具
跟浏览器交流沟通
HTML：一门用标记和浏览器交流沟通的语言，用文本的形式来记叙。
单词+语法
2 html的页面结构
<!DOCTYPE html> 文档声明标记-告诉浏览器这是一个html文档
<html> 网页的起始和结束
<head> 网页的头部，这个部分是用来装载一些你看不见的标记 <title> 网页标题标记
放显示在浏览器标题栏的内容
</title>
</head>
<body> 放所有的你能看到的标记
</body>
</html>
3 开发者工具查看页面结构
第一步：
在浏览器上右键
第二步：
选择：检查（审查元素、检查元素）
4 第一个简单的页面
1 新建文本文档，修改后缀名为html
2 用记事本打开
3 写页面结构，写想要写的其他代码
4 保存
5 浏览
四 HTML标签的学习
1 h系列标签 （heading 标题标签）
h1 - h6 没有h7
用法：<h1>内容</h1>
特点：可以让文字加粗，变大，从h1到h6依次变小，h4和普通文本一样大
一定要注意：不要用标题标签来做加粗效果，因为在html里，标签是有特殊语义的，
2 font标签 （字体标签）
用法：<font color=”gray” size=”2” face=”宋体” >内容</font>
color：让文字颜色改变
size：范围是1-7 正常3
face : 指定文本的字体
3 标签中属性语法
属性：描述标签特征的东西
语法：1. 必须要写在标签里，开始标签里
2.属性名=”属性的值”
3.当有多个属性的时候用空格隔开
4 hr标签 (Horizontal Rule 水平线标签)
用法：<hr />
单标签：只有一个标签，没有开始结束 不需要内容
双标签：由一对标签组成，有开始和结束 需要内容
5 p标签（paragraph段落标签）
用法：<p>内容</p>
特点：让文字成为段落，占据一行，上下有明显间距
6 br标签（break 换行标签）
用法：<br />
作用：让标签两边的文字换行显示
7 strong、ins、em、del和b、u、i、s标签
|
标签 |
用法 |
效果 |
被弃用的相同效果 |
|
strong |
<strong></strong> |
加粗 |
b |
|
em |
<em></em> |
斜体 |
i |
|
ins |
<ins></ins> |
下划线 |
u |
|
del |
<del></del> |
删除线 |
s |
8 开发工具的介绍及使用
8.1 主流开发工具
sublime 轻量级，功能不太完善，插件多
webstrom 重量级，功能完善，插件少
Dreamweaver 更多的是UI工程师再用
8.2 sublime的使用
新建文件： 文件-》文件文件 ctrl+n
保存： 文件-》保存文件 Ctrl+s
打开文件夹： 文件-》打开文件夹
在浏览器中打开： 右键-》浏览器中打开 F12
9 img标签(image)
用法：<img src=”图片路径” />
src=”图片的路径” 指定图片标签需要显示的图片
alt=”图片加载异常时显示的文字”
title=”鼠标停留在图片上的时候显示的提示”
10 路径问题
在计算机里，所谓的路径就是指一个文件存放的位置
10.1 绝对路径
绝对路径：从计算机的盘符开始，经过的文件夹+文件名+后缀名
F:/0627上海前端2期/0628 HTML第一天/4 - 源代码/1.png
10.2 相对路径
相对路径：
从一个文件到另一个文件经过的文件夹+目标文件的文件名+后缀名
1 图片和页面在同一级目录
<img src=”1.png” />
2 图片在页面的下一级目录
<img src=”图片/1.png” />
3 图片在页面的上一级目录
<img src=”../1.png” />
在相对路径里：
/ 告诉浏览器，进入下一级目录
../ 告诉浏览器，返回上一级目录
11 a标签（anchor 超链接）
用法：
1： 在页面之间跳转：
<a href=”跳转到其他页面的相对路径”>这里必须要有内容</a>
herf=”跳转的目标地址”
title=”鼠标停留时的提示”
target=”跳转的方式”
_blank 在新的窗口打开页面
_self 在当前页面跳转
注意：双标签里必须要有内容，否则会看不见
2.使用a标签在页面上定位标签
2.1 要准备一个被a标签定位的标签，要有id属性
2.2 a标签的href属性的值是#+目标标签的id
3.实现下载功能
<a href=”文件的相对路径” ></a>
注意：
1.这种方式当下已经很少使用
2.如果浏览器认识这种文件，会直接在浏览器中打开
12 base标签
用法：
写在head标签里
<base target=”跳转方式” />
作用：统一设置当前页面上的a标签的跳转方式
前提是：页面上的a标签没有设置target属性
13 ul(unordered list)
无序列表
用法：<ul>
<li></li>
<li></li>
<li></li>
。。。
</ul>
用来做没有顺序的列表
li list item
14 ol (ordered list)
有序列表
用法：<ol>
<li></li>
<li></li>
<li></li>
。。。
</ol>
用来做有顺序的列表
15 dl（definition list）
自定义列表
使用格式：
<dl>
<dt>小标题</dt>
<dd>内容<dd>
<dd>内容<dd>
<dd>内容<dd>
<dt>小标题</dt>
<dd>内容<dd>
<dd>内容<dd>
<dd>内容<dd>
</dl>
标签：
原文地址：http://www.cnblogs.com/pengzijun/p/5699755.html
