1.在网页中添加文本
(1)普通文本添加
在Dreamweaver CS6代码视图的body标签部分直接输入；或者在设计视图下直接输入。
有现成文本的时候，可以使用dreamweaver CS6的“选择性粘贴功能”（在菜单栏中找“编辑”选择“选择性粘贴”命令 或者 Ctrl+Shift+V）
(2)特殊字符文本的添加
在html中，特殊符号以&开头，后面跟相关的特殊字符。如：大括号小括号被用于声明标记，所以如果在html代码中需要输入“<”和“>”字符，不能直接输入，需要当特殊字符处理。在html中，用“<”代表符号“<”，用“>”代表符号">"。例如，输入公式a>b，在html中需要这样表示：a>b。
a.在dreamweaver CS6的设计视图下输入字符可以直接输入，对于部分键盘上没有的字符，可以使用“中文输入法”的软键盘上单击右键，弹出特殊符号分类，进行选择
b.文字与文字之间的空格，如果超过一个的话，第二个空格以后都会被忽略。快捷输入即是切换为“中文输入法”并置于“全角”，直接通过键盘输入
c.如果都没有的情况下，在“插入”中选择“html”中的“特殊字符”或“其他字符”
尽量不要使用过多个” “表示多个空格，因为多数浏览器对空格距离的实现都不一样
(3)使用html5标记添加特殊文本
a.重要文本
通常以粗体显示、强调方式显示或者强调方式显示。html中的<b>、<em>、<strong>实现这三种方式
<!DOCTYPE html>
<html>
<head>
<title>无标题</title>
</head>
<body>
<p><b>粗体文字</b></p>
<p><em>强调文字</em></p>
<p><strong>加强调文字</strong></p>
</body>
</html>
b.斜体文本
以<i></i>实现斜体显示
<!DOCTYPE html>
<html>
<head>
<title>无标题</title>
</head>
<body>
<i>斜体文字的显示</i>
</body>
</html>
以上两个文本仅仅了解，我们应该使用css来实现，而不是html；因为css能实现的控制比html要细致，精确。
c.上标和小标文本
<sup>实现上标文本，<sub>实现下标文本，<sup>和<sub>都是双标记
<!DOCTYPE html>
<html>
<head>
<title>无标题</title>
</head>
<body>
<!-上标显示-->
<p>c=a<sup>2</sup>+b<sup>2</sup></p>
<!-下标显示-->
<p>H<sub>2</sub>O</p>
</body>
</html>
2.文本排版
<br>为换行标记，<p>为换段标记
<h1>~<h6>为标题标记，1代表级别最高，文字最大，依次递减
3.文字列表
(1)建立无序列表<ul>
无顺序，只以符号作为分项标识，无序列表使用一对<ul></ul>标识，每一个列表项使用<li></li>标识
<!DOCTYPE html>
<html>
<head>
<title>无标题</title>
</head>
<body>
<h1>网站建设流程</h1>
<ul>
<li>项目需求</li>
<li>系统分项
<ul>
<li>网站定位</li>
<li>内容收集</li>
<li>栏目规划</li>
<li>网站内容设计</li>
</ul>
</li>
<li>网页草图
<ul>
<li>制作网页草图</li>
<li>将草图转换为网页</li>
</ul>
</li>
</ul>
</body>
</html>
(2)建立有序列表<ol>
每个项目都有前后顺序之分，多数用数字表示
<!DOCTYPE html>
<html>
<head>
<title>无标题</title>
</head>
<body>
<h1>本次学习内容</h1>
<ol>
<li>认识网页</li>
<li>网页与html差异</li>
<li>认识web</li>
<li>网页设计与开发流程</li>
</ol>
</body>
</html>
(3)建立不同类型的无序列表
使用多个<ul>标签建立不同类型的无序列表
<!DOCTYPE html>
<html>
<head>
<title>无标题</title>
</head>
<body>
<h3>水果</h3>
<ul type="disc">
<li>苹果</li><li>香蕉</li><li>橘子</li>
</ul>
<h3>蔬菜</h3>
<ul type="circle">
<li>黄瓜</li><li>西兰花</li><li>芹菜</li>
</ul>
<h3>肉类</h3>
<ul type="square">
<li>牛肉</li><li>羊肉</li><li>鱼肉</li>
</ul>
</body>
</html>
(4)建立不同类型的有序列表
使用多个<ol>标签
<!DOCTYPE html>
<html>
<head>
<title>无标题</title>
</head>
<body>
<h3>数字</h3>
<ol>
<li>苹果</li><li>香蕉</li><li>橘子</li>
</ol>
<h3>字母</h3>
<ol type="A">
<li>黄瓜</li><li>西兰花</li><li>芹菜</li>
</ol>
</body>
</html>
(5)建立嵌套列表
使用<ul>可以制作网页的嵌套列表
<!DOCTYPE html>
<html>
<head>
<title>无标题</title>
</head>
<body>
<h3>饮料</h3>
<ul>
<li>咖啡</li>
<li>茶</li>
<ul>
<li>红茶</li>
<li>绿茶
<ul>
<li>中国茶</li>
<li>非洲茶</li>
</ul>
</li>
</ul>
<li>牛奶</li>
</ul>
</body>
</html>
(6)自定义列表
自定义列表标签<dl>
<!DOCTYPE html>
<html>
<head>
<title>无标题</title>
</head>
<body>
<h3>自定义列表</h3>
<dl>
<dt>电脑</dt>
<dd>是可以按照程序运行的设备。。。</dd>
<dt>显示器</dt>
<dd>是以视觉显示信息。。。</dd>
</dl>
</body>
</html>
4.网页中的图像<img>
网页可使用的图像可以是GIF、JPEG、BMP、TIFF、PNG等格式图片
(1)在网页中插入图像
属性 值 描述
alt text 定义有关图形的短描述
src URL 要显示的图像的URL
height pixels% 定义图像的高度
ismap URL 把图像定义为服务器端的图像映射
usemap URL 定义作为客户端图像映射的一幅图像。可参阅<map>和<area>标签了解其工作原理
vspace pixels 定义图像顶部和底部的空白。不支持。应使用css代替
width pixels% 设置图像的宽度
a.插入图像
src属性是指定图片源文件的路径，是必不可少的属性。
<img src="图片路径">
b.从不同来源插入图像
在插入图像时可以将其他文件夹或者服务器的图片显示在网页中
(2)设置图像的宽带和高度
一般按照原始尺寸显示，但也可以任意设置显示尺寸
只为图片设置一个属性时，另外一个按照原尺寸长宽来显示。图片单位可以是百分比(相对尺寸)或者数值(绝对尺寸)
网页中插入的是位图，所以放大尺寸时，图像会出现马赛克，变得模糊
<!DOCTYPE html>
<html>
<head>
<title>无标题</title>
</head>
<body>
<img src="11.jpg">
<img src="11.jpg" width="200">
<img src="11.jpg" width="200" height="300">
</body>
</html>
(3)设置图像的提示文字
提示文字可以方便搜索引擎检索
当浏览网页时，如果图片下载完成将鼠标移动至图片上会出现提示文字
如果图像没有下载成功，图像的位置也会显示
<!DOCTYPE html>
<html>
<head>
<title>图片文字提示</title>
</head>
<body>
<img src="11.jpg" alt="霸气的女孩">
</body>
</html>
在火狐浏览器中不支持
(4)将图片设置为网页背景
通常使用GIF和JPG文件都可以作html背景，如果图像小于页面，图像会进行重复
<!DOCTYPE html>
<html>
<body background="111.jpg">
<h3>背景图片</h3>
</body>
</html>
(5)排列图像
插入图片后可以对图片进行排序，常用的排序方式为居中，底部对齐，顶部对齐几种
bottom对齐方式时默认的对齐方式
<!DOCTYPE html>
<html>
<body>
<h2>未设置对齐方式</h2>
<p>图像<img src="222.jpg">在文本中</p>
<h2>已设置对齐方式</h2>
<p>图像<img src="222.jpg" align="bottom">在文本中</p>
<p>图像<img src="222.jpg" align="middle">在文本中</p>
<p>图像<img src="222.jpg" align="top">在文本中</p>
</body>
</html>
1836
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
