HTML
HyperText Markup Language 超文本标签语言
超文本：文档中具有超级链接功能等
标签：在文档中就是使用一对“<>”括起来的关键词
快速入门案例
浏览器只认扩展名为html、 htm
htm是向前兼容
DOS磁盘操作系统 所使用的文件扩展名是三位 .htm
静态网页动态网页
第一从代码上来看：包含有php代码或数据库连接代码的网页文件就叫动态网页
第二从文件扩展名来看：文件的扩展不。html .htm这类网页就叫静态网页
网页编辑器
第一种 增强的文件编辑器
Editplus
NodePad++
特征：体积很小，占用系统资源较小，运行速度快，具有代码颜色高亮显示，但语法检查与自动补全功能
第二种 IDE（集成开发环境）
Zend Studio 收费
Sublime
phpdesigner
DreamWeaver
特征：体积大，占用的系统资源较大，运行速度较慢，也具有代码颜色高亮显示，语法检查，自动补全功能
DreamWeaver编辑器的使用
第一步，建立站点
第二步：设置文件编码（存储编码）
第三步：设置代码字体大小
EditPlus编辑器
第一步：设置文件编码
工具 è 参数设置
editplus快捷键的使用
ctrl + n 新建文件
ctrl + o 打开一个文件
ctrl + s 保护
ctrl + c 将选定的内容复制到剪贴板
ctrl + v 将剪贴板的内容复制到当前当标位置
ctrl + x 将选定的内容剪贴到剪贴板
ctrl + z 退回操作
ctrl + y 恢复操作
ctrl + j 复制当前行
ctrl + h 替换
ctrl + a 选择全部代码
ctrl + f 查找
ctrl + home 直接将光标移置文件头部
ctrl + end 直接将光标移置文件头部
tab 向右缩进
shift + tab 向左缩进
shift + end 从光标所在位置选择当前行
shift + home 从光标所在位置选择当前行
shift + 前后上下箭头
win + d 快返回桌面
alt + tab 在已打开的窗口之间进行切换
HTML标签详解
标签分为两类
第一类：双边标签
有一个开始标签（start tage），有一个结束标签（end tag）
例：<html></html>
第二类：单边标签
只有开始没结束的标签，就叫单边标签（闭合标签）
<meta>、<br>、<hr>
标签的语法：
<标签名 属性1=“属性值”属性2=“属性值”……>
<张三 age=“29”sex=“男” heihgt=“” >
标签是一个信息的载体
属性是对标签的进一步描述
<font color=“red” face=“宋体，黑体” size=“”></font>
标签的书写规则
1、 标签必须使用“<>”括起来
2、 标签不需分大小写
3、 大部分标签都是双边标签，双边标签有开始，必须有结束；有一部分是单边标签
4、 双边标签的内容在标签中间引出
例：<font color="red" size="7">内容</font>
单边标签的内容属性引出
例：<img src=>
5、属性是可选的，如无属性采用默认值
例： <font>此标签无属性，采用默认值</font>
6、 标签名与属性之及属性与属性之间，使用空格分开
7、标签可以没有内容 <br/>
注意：代码中的符号全部为半角
网页主体结构标签
<html></html>
html标签，主一个网页文档的顶级标签，也就是根标签，其余所有的标签必须位于此标签内。标签就是告诉浏览器此文档需标签html语法进行解析，此标签在网页文档中可以省略，但不建议省略。
此标签内主要包含<head></head>、<body></body>标签
<head></head>
head标签主要是对网页的内容进行设置文件显示编码和说明，此标签内容是不可见的
head标签包含以下标签：
1、<title></title>
设置网页的标题
<title>czbk网站建设</title>
某一个网页
在搜索引擎中的排名位置，很大一部分由<title>标签中是否有相关的关键词。所以title标签对搜索引擎十分重要
2、<meta>
主要设置网页的显示编码和网页的描述信息
设置网页显示编码
<meta http-equiv=“content-type” content=“text/html;charset=utf-8”/>
设置网页的跳转
<meta http-euqiv=“refresh” content=“3;url=网址”/>
设置网页关键字
<meta name=“keywords” content=“关键字1，关键字2，……”/>
<meta name=“keyword” content=“网站建设，……”/>
<meta name=“robot” content=“index,follow”/>
3、<link></link>
用途：主要是引入外部资源文件
常用的属性
rel：定义当前文档与引入文档的关系
type：定义引入文档的MIME类型（文件类型）
hre：定义引入文档的目录（url）
例如：
引入一个外部的CSS文件（样式文件）
<link rel=“stylesheet”type=“text/css”href=>
引入一个外部的JS文件
<link type=“text/javascript”href=>
设置网页的图标（设置收藏夹的图标）
第一种方法：
在网站的根目录存放一个图标文件，图标文件的要求，16*16像素的一个文件名为favicon.ico的图片文件
第二种方法：
使用link标签
<link rel=“shortcut icon”href=>
4、<style></style>
<style>标签主要书写内部标签样式
5、<script></script>
<script>标签主要是书写内部JavaScript代码
<body></body>标签
网页的主体内容标签，此标签的内容是可见
body标签的常用属性
text： 设置网面文字的颜色
bgcolor： 设置网页文档的背景色
background： 设置网页文档的背景图片
leftmargin： 设置body标签的左边距
topmargin：
rightmargin：
bottommargin：
通用的属性：id、class、style、name
id与class属性用于为标签设置样式
style属性用于设置行内样式
id属性还可用于js获取标签元素
文字样式元素
<b>标签设置 字体加粗样式
<i>标签设置 字体为斜体
<u>标签设置 字体下划线效果
<sub>标签设置 下角标 A2
<sup>标签设置 上角标 B2
<font>标签设置文字颜色、文字大小、字体
常用属性：
color： 设置字体颜色
size： 设置字体大小 取值为1 —— 7 默认为3号
face： 设置文字字体 可以设置多种字体，每种字体之间用逗号分隔
标签语法
<font color=“red” size=“2” face=“宋体，黑体，华文行楷”></font>
字体文件位于
排版标签
h1——h6
设置网页标题元素，作用主要是对网页进行结构化的设置，一般来说h1标题在一个页面中只出现一次，h2——h6可以出现多次。
标签语法：
<h1 属性=“属性值”>内容</h1>
<h2 属性=“属性值”>内容</h2>
常用的属性
align：设置标签的水平对齐方式
取值：
left 设置标签内容左对齐
center 设置标签的内容居中对齐
right 设置标签的内容右对齐
块元素 特征：默认情况下，不论其内容是否满行，都独占一行，
行内元素 特征：默认情况下，可以与其他行内元素共占一行。
<p></p>段落标签
特征：在<p>标签前后各填充一个空行
常用的属性
align：设置标签的水平对齐方式
取值：
left 设置标签内容左对齐
center 设置标签的内容居中对齐
right 设置标签的内容右对齐
<br>标签
换行标签，在当前位置添加一个换行符
<pre></pre>
预格式化标签
主要对文本进行预格式化，会保留其中的空白字符，如：空格，回车，tab
标签的设计思想
表形：主是标签在浏览器中默认的显示效果（外观），主是给浏览者看
表意：主是包含所具有的含意，主要是供搜索引擎（SEO）理解。
<strong> 主要是对网面内文本和关键字进行设置，对于SEO的权重仅次于<h>标签
<em>主要是对网页的文本进行设置。对于搜索引擎的权重依次于<strong>
网页前端设计师
网页前端设计师，主要的工作就是将从设计师得到的PSD文件，进行切图与编码，最终实现网页的展示。
中级前端设计师，主要就是对负责产品的整个流程，主要负责与各部门的沟通，他就应该具有前詹性
所需的技能：HTML标签语言 CSS JS语言 主实现结构与样式的分离，结构与行为的分离
列表标签
一、 有序列表
标签语法： order list
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
…
…
</ol>
常用的属性：
type：设置列表标签的编号类型
取值：1、a（小写字母）、A（大写字母）、i（小写罗马数字）、I（大写罗马数字）
start：设置列表标签编码的超值
正整数
二、 无序列表
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
…
…
</ul>
常用的属性
type：设置列表项编码的类型
取值：circle（圆环）、disc（实心圆点）、square（方形）
三、定义列表
<dl> define list
<dt> define list title 定义列表标题
<dd> define list detail 定义列表项
标签语法：
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
<dd></dd>
…
…
</dl>
dt虽然与dd同级，但他们之间具有一定的逻辑关系，dd是对dt进一步的描述、解释、说明。
标签的嵌套
HTML中任何一个标签都可以看成一个容器。任何一个双边标签都可以包含其他边标签或双边标签，但是标签不允许交差嵌套
|
