演示操作 1. 格式化一段排版杂乱的代码 2. 快速选中一个完整的代码段 3. 无效代码高亮显示 4. 通过折叠，检测语法错误（标签书写错误、结束标签漏写等）
15/25
目录 HTML代码常识 与专题制作基础培训
目录
1. HTML代码常识 2. CMS操作讲解 3. 专题制作基础
16/25
设计部前端制作中心
12/25
设计部前端制作中心
HTML代码基础
HTML换行、空格、及其他
在内容编辑过程中，难免会遇到诸如换行、空格、特殊符合等等，而在HTML中又应该怎么处理这些符合？
HTML换行 - <br>
<br>标签插入简单的换行符。<br>标签 是一个空标签，意味着它没有结束标签。所以这 样是错误的：<br></br>
10/25
设计部mg>
在HTML中，图像由<img>标签定义。<img>是空标签，意思是说它只包含属性，并且没有闭合标签。要在页 面上显示图像，你需要使用源属性src。src指source，源属性的值是图像的地址。
1.通过使用href属性 - 创建指向另一个文档的链接
HTML空格及其他符合 – 实体符号
如右侧表格所示，是HTML不同符号的实
体名称和实体编码。你可以通过在搜索引擎搜索：
“html 符号”找到完整的实体符合名称和编码。 例如：这个表格！！！
13/25
设计部前端制作中心
HTML代码基础
HTML注释 - <!-- ... -->
注释标签用来在源文档中插入注释。注释会被浏览器忽略。您可使用注释对您的代码进行解释，这样做有 助于您在以后的时间对代码的编辑。
4.出现在文章属性里面
3.出现在栏目设置里面
8/25
设计部前端制作中心
HTML代码基础
HTML 超链接 - <a>
HTML图像标签 - <img>
HTML注释
HTML网页内容 - <body>
HTML文本格式化
HTML换行、空格、及其他
9/25
设计部前端制作中心
HTML代码基础
HTML 超链接 - <a>
HTML网页信息 - <head>
<head>元素是所有头部元素的容器。<head>内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供 元信息，等等。 以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。
6/25
HTML代码基础 与CMS操作
HTML代码基础与CMS操作
设计部 前端制作中心 陈烈欣
目录 HTML代码常识 与CMS操作
目录
1. HTML代码常识 2. CMS操作讲解 3. 专题制作基础
2/25
设计部前端制作中心
HTML代码基础
HTML
超文本标记语言，即HTML（Hyper Text Mark-up Language），是用于描述网页文档的一种标记语言。
11/25
设计部前端制作中心
HTML代码基础
HTML文本格式化
在HTML 可定义很多供格式化输出的元素，比如粗体和斜体字、上标、下标等。在内容编辑中常用的有如下： 1. 使用<b>标签，可以输出粗体字； 2. 使用<i>标签，可以输出斜体字； 3. 使用<sub>标签，可以输出上标； 4. 使用<sup>标签，可以输出下标；… … more
设计部前端制作中心
HTML代码基础
HTML<title>元素
<title>标签定义文档的标题。<title>标签在所 有 HTML/XHTML文档中都是必需的。
HTML<meta>元素
元数据（metadata）是关于数据的信息。元数 据不会显示在页面上，但是对于机器是可读的。
为什么是必需的
1. 定义浏览器工具栏中的标题 2. 提供页面被添加到收藏夹时显示的标题 3. 显示在搜索引擎结果中的页面标题
2.通过使用href和name属性 - 创建文档内的书签 完整示例： <img src="图片地址" alt="代替文字" height="200" width="200" /> 1. src属性为必需属性，定义了图片的地址 2. alt属性为非必需属性，建议填写，其作用是当图片加载受阻时候有文字提示 3. height和width属性，非必需属性，非成对属性（当两者只设置一个的话，浏览器会约束比例地计算出另一个；如 果都不设置则图片大小为图片原始尺寸；该属性使用不带单位的像素值或者百分比）
注释用处和注意
1.可以用来备份代码 2.标记代码段的起始 3.注释不能嵌套使用
14/25
设计部前端制作中心
HTML代码基础
使用THML工具
HTML工具，即编写HTML代码的编辑器，种类繁多，简单到直接可以用记事本或写字板进行编写，智能到可以高效 地进行HTML代码处理的工具。 DW，Dreamweaver，一款集网页制作和管理网站于一身的所见即所得网页编辑器，优点：功能全面且强大；缺点： 资源占用率高。
谢谢聆听
The End
请多多指教
Thank You
专题制作基础
对专题进行一个简单但完整的策划（布局、颜色、功能块等）
在CMS相应的位置为该专题建立栏目，并进行设置和添加发布设置
进入CMS专题制作系统，选取相应代码块并做好相关设置，拷贝代码
对代码内容填充和修改
把完整代码拷贝至CMS该专题下的代码块中，命名为“新专题内容”
预览、调试无误后进行发布
17/25
有什么用处
1. 规定页面的描述、关键词、作者、时间等元数据 2. 可用于浏览器、搜索引擎、或其他 web 服务 3. 可用于整个网站后台作为一类型的数据
在CMS中的什么地方？会用到这两种类型的内容？
7/25
设计部前端制作中心
HTML代码基础
1.出现在模版里面（例如：首页）
2.出现在代码块里面（例如：专题）
4/25
设计部前端制作中心
HTML代码基础
常见HTML结构
浏览器的作用是读取HTML文档，并以网页的形式显示出它们。浏览器不会显示HTML标签，而是使用标签来解释 页面的内容。
<html> HTML文档
网 页 信 息
<head>
<body>
网 页 内 容
5/25
设计部前端制作中心
HTML代码基础
3/25
设计部前端制作中心
HTML代码基础
超文本
超文本(Hypertext)是用超链接的方法，将各种不同空间的信息组织在一起
的网状文本。
标记
HTML标记通常被称为HTML标签(HTML tag)，标签是由尖括号包围的关 键词，标签通常是成对出现的，等等这样的特征。
语言
HTML是用来描述网页的一种语言。不是一种编程语言，而是一种标记语言(markup language)，作为语言就一定 有对应的语法，例如大小写不敏感、引号要成对使用，等等的基本语法。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当 前文档中的某个部分。有两种使用 <a> 标签的方式：
1.通过使用href属性 - 创建指向另一个文档的链接
2.通过使用href和name属性 - 创建文档内的书签 示例1： <a href="链接地址" title="显示信息" target="_blank">文字</a> 示例2： <a href="#n1" title="显示信息" target="_self">文字</a> <!--… … 这里隔了很多代码--> <a name="n1"></a> <div>内容</div>
