使用DIV+CSS布局网页、使用CSS美化网页、制作精美的商业网站。
会使用HTML的基本结构创建网页，会使用文本相关标签排版文本信息，会使用图像相关标签实现图文并茂的页面，会使用a标签创建超链接、锚链接以及功能性链接。
HTML：Hyper Text（超文本） Markup（构造） Language。
DIV：层叠样式表中的定位技术DIVision，划分、图层；编程中叫整除。
CSS：Cascading Style Sheets，层叠样式表、级联样式表，一种用来表现HTML或XML等文件样式的计算机语言，能做到网页表现与内容分离的一种样式语言。
1.html的网页基本结构：
<html>
<head>
<title>页面名称、标题</title>
</head>//文件的头部
<body>
要显示的内容都放在body中
</body>//主体部分
</html>
<HTML>...</HTML>标签标记着 HTML 文档的开始和结束
网页编辑工具：记事本、UltraEdit。
UltraEdit：一套强大的文本编辑器。
PHP：Hypertext Preprocessor、超文本预处理器，一种通用的开源脚本语言，主要适用于Web开发领域。
JavaScript：有一种直译Ⅹ脚本语言，市一中动态类型、弱类型、基于原型的语言，内置支
持类型。与JavaEase功能一样，可以在浏览器上运行。JavaScript就爱内容与ECMA标准，也成为ECMAScript。
ECMA：欧洲计算机制造协会。
DOCTYPE声明：一个文档类型标记是一种标准通用标记语言的文本类型声明，目的是要告诉通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。
DTD：文本类型定义
DOCTYPE声明：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">//Strict（严格类型）、Transitional（过渡类型）、Frameset（框架类型）
<html xmlns="/1999/xhtml">//网页网址
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
</body>
</html>
如果使用Dreamweaver创建网页，默认的创建XHTML1.0的过渡类型。
2.基本标签：
a：标题标签：通常用于标题或主题，体现标签语义化。
（1）标题的特点：文字变大，上下有间距。
（2）使用标签：<h1></h1>....<h6></h6>(文字由大变小)
b：段落标签：
特点：文字大小不变，用来标示这是一段文字，具有换行功能。
标签：<p></p>
c：换行标签：<br/>
特点：只换行，不设置上下间距
d：水平线标签：<hr width="" align=""/>
说明：width设置宽度，单位可以给百分比，或者多少px像素。align设置水平对齐方式，取值：left、center(默认)、right。
示例：width="50%"或者 width="200px"
e：设置文字格式：
（1）加粗：<strong></strong>
（2）倾斜：<em></em>
注意：如果出现标签嵌套，一定要注意嵌套关系，不要交叉嵌套
错误代码：<strong><em>aaaa</strong></em>，改正：<strong><em>aaa</em></strong>。
f：特殊符号以及转义码：
空格： 、版权符：©、小于号:<、大于号：>、"
g：<title>标签：网页名
h：<meta>标签
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>//网页的字符编码，网页常用的字符编码有gb2312、utf-8
<meta name="keywords" content="中软高科" />//搜索关键词
<meta name="description" content="中软高科是国内最大的......" />//内容描述
3. 图像标签：常用的图片格式：JPG（JPEG）、GIF（JPG、GIF是网页中最常用的格式）、PNG（受浏览器兼容性的限制）、BMP
语法：<img src="path" width="x" height="y" title="text" alt="text"/>
说明：src：图片的路径、width：图片宽度、height：图片高度、title：鼠标悬停提示文字、alt：图像的替代文字，alt属性常和src配合使用。
示例：<img src="a.jpg" width="20px" height="20px" title="图片" alt="图片" />
说明：说明img标签的与之前学习的<br/>标签一样，不是成对的标签，直接在最后以"/"闭合，体现标签的语义化。
4.超链接标签：<a href="path" target="目标窗口位置">链接文本或图像</a>
功能：实现多个页面之间的跳转
语法：<a href="跳转的页面" >文本或图片</a>
示例：文本超链接：<a href="hetao.html" target="_blank">无漂白薄皮核桃</a>
图像超链接：<a href="hetao.html" target="_blank"><img src="image/hetao.jpg" alt="无漂白薄皮核桃" title="无漂白薄皮核桃"/></a>
特殊值：当href="#"时表示刷新
示例：<a href="#">刷新</a>
补充：<a href="" target="窗口的打开方式"></a>：链接在哪个窗口打开
target="_self"表示：相对路径，在当前窗口中打开新页面
target="_blank"表示：绝对路径，新建窗口显示新页面内容
5.超链接效果：
（1）多页面跳转：从一个页面链接到另外一个页面，网站上使用最多的就是页面间链接，例如网站导航菜单、新闻列表、商品列表等链接，通常都是页面间链链。
（2）单页面内容跳转（锚链接：从A页面的甲位置跳转到本页中的乙位置，从A页面的甲位置跳转到B页面中的乙位置。）
实现步骤：a.先定义要跳转的位置：<a name="自定义值">文本</a>
示例：<a name="abc">第一章内容开始</a>
b.开始定义由谁跳转：<a href="#自定义值">文本</a>
示例：<a href="#abc">第一章 花千骨1</a>
整体效果：点击花千骨1，快速跳转到文章开始位置
（3）功能性跳转：跳转到（Outlook）、QQ、MSN
语法：<a href="mailto:收件人的邮箱地址">文本</a>
会使用有序列表实现数据展示，会使用无序列表实现数据展示，会使用定义列表实现数据展示，会使用表格实现数据展示，会使用<iframe>进行页面设计。
无序列表和定义列表在网页制作中应用非常广泛，使用<iframe>可以重用页面内容，在制作网页时可以减少工作量。
1.表的分类：有序列表、无序列表、自定义列表（定义列表常用于图文混排的局部布局）
2.无序列表：<ul type="项目符号">//声明无序列表
<li></li>//声明列表项
<li></li>
</ul>
说明：一对li表示一个列表项，<ul>和<li>标签均为成对出现。列表项中可以包含图片、文本，还可以嵌套列表、其他标签等。
type="disc"：项目符号显示为尸体圆心，默认值。
type="square"：项目符号显示为实体方心
type="circle"：项目符号显示为空心圆。
注意：type可改变无序列表的项目符号即可，并且说明在实际网页制作中通常使用CSS来设置项目符号。
3.有序列表：<ol>//声明有序列表
html获取input输入的数据 <li></li>//声明列表项
</ol>
说明：<ol>和<li>标签均为成对出现，有序列表默认以数字序号显示，与无序列表一样，也可以嵌套列表、可以包含图片、文本、其他标签等
设置项目符号：type="1/a/A/i/I"：使用数字作为项目符、使用大写/小写字母作为项目符号、使用大写/小写罗马数字作为项目符号。
4.自定义列表：<dl>//声明定义列表
<dt>列表项标题</dt>//声明列表项
<dd>列表项内容</dd>//定义列表项内容
</dl>
说明：定义列表也可以嵌套列表、包含图片、文本、其他标签等，以后的网页制作中经常会用到定义列表，特别是图文混排的情况，无项目符号和显示顺序。
5. 表格的基本语法：<table>//表格标签
<tr>//行标签
<td>第1个单元格的内容</td>//列或者单元格标签
<td>第2个单元格的内容</td>
......
</tr>
<tr>
<td>第1个单元格的内容</td>
<td>第2个单元格的内容</td>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论