子数涵数·DW纯文字页面-html教程-PHP中文网

首页

web前端

html教程

子数涵数·DW纯文字页面

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Oct 17, 2016 am 09:11 AM

一、设置Mate属性

1.打开Dreamweaver，新建一个的HTML项目。

2.设置Meta属性，点击左上角图示位置，或插入->HTML->文字头标签->Meta。

3.弹出Meta设置的窗口，输入相关信息（最常用的就是author），然后单击确定。

4.同理，在趋于相同的位置单击（插入->HTML->文字头标签->关键字），设置关键字（关键字是用于搜索引擎查找的，用英文状态下的‘,’逗号来分类）。

5.同理，设置说明（说明和关键字的作用相同，都是用于搜索引擎，区别是说明一般是一句话或一段话，较关键字文字更长，不存在分类）。

6.同理，设置刷新（刷新的作用是自动跳转网页，可以是本页面，也可以是其他页面，一般在时效性较强的新闻类网页中常见）。

7.Meta属性设置完成后，我们可以在设计区上方查看，如果你们的DW没有图示部分，可以点击查看->文件头内容（Ctrl+Shift+H）。

二、设置页面属性

1.右键设计区的空白部分，单击页面属性，弹出页面属性窗口（我们这里不做过多的设置，就只设置标题和外观，有兴趣也可每个都试一试）。

2.选中外观，设置其具体参数。

3.选中标题，设置其具体参数。

4.选中标题/编码，设置其具体参数。

5.单击确定，单击设计区，使其获取焦点，输入文字（例如：Hello world），还可以在下方的属性面板中设置它具体属性，这里不做演示。

6.保存页面（Ctrl+S），按下F12，测试预览。

三、代码

现在，已经制作完成了，让我们来看下代码部分。

<span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><span style="color: #ff00ff;">DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 2</span> <span style="color: #0000ff;"><span style="color: #800000;">html </span><span style="color: #ff0000;">xmlns</span><span style="color: #0000ff;">="http://www.w3.org/1999/xhtml"</span><span style="color: #0000ff;">> <span style="color: #0000ff;"><span style="color: #008000;"><!--<span style="color: #008000;">第一行和第二行是DW对页面的文档信息做的一个设置，无须硬记<span style="color: #008000;">--></span></span></span></span></span>
<span style="color: #008080;"> 3</span> <span style="color: #0000ff;"><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 4</span> <span style="color: #0000ff;"><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="Content-Type"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="text/html; charset=gb2312"</span> <span style="color: #0000ff;">/> <span style="color: #0000ff;"><span style="color: #008000;"><!--<span style="color: #008000;">定义了页面是简体中文，它也属于Meta属性，可以在属性面板下的标题/编码里修改<span style="color: #008000;">--></span></span></span></span></span>
<span style="color: #008080;"> 5</span> <span style="color: #0000ff;"><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>子数涵数·纯文本页面<span style="color: #0000ff;"></span><span style="color: #800000;">title</span><span style="color: #0000ff;">> <span style="color: #000000;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #008000;"><!--<span style="color: #008000;">这就是页面显示的标题<span style="color: #008000;">--></span></span></span></span></span></span></span>
<span style="color: #008080;"> 6</span> <span style="color: #0000ff;"><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="author"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="张子涵"</span> <span style="color: #0000ff;">/> <span style="color: #0000ff;"><span style="color: #008000;"><!--<span style="color: #008000;">我们设定的Meta信息<span style="color: #008000;">--></span></span></span></span>
<span style="color: #008080;"> 7</span> <span style="color: #0000ff;"><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="keywords"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="子数涵数,dreamweaver,网页制作"</span> <span style="color: #0000ff;">/> <span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #008000;"><!--<span style="color: #008000;">我们设定的关键字<span style="color: #008000;">--></span></span></span></span></span>
<span style="color: #008080;"> 8</span> <span style="color: #0000ff;"><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="description"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="子数涵数——记录我的成长之路。"</span> <span style="color: #0000ff;">/> <span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #008000;"><!--<span style="color: #008000;">我们设定的说明<span style="color: #008000;">--></span></span></span></span></span>
<span style="color: #008080;"> 9</span> <span style="color: #0000ff;"><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="refresh"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="10"</span> <span style="color: #0000ff;">/> <span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #008000;"><!--<span style="color: #008000;">我们设定的刷新<span style="color: #008000;">--></span></span></span></span></span>
<span style="color: #008080;">10</span> 
<span style="color: #008080;">11</span> <span style="color: #0000ff;"><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">> <span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #008000;"><!--以下<span style="color: #008000;">是我们设定的页面属性，它属于CSS层叠样式表<span style="color: #008000;">--></span></span></span></span></span>
<span style="color: #008080;">12</span> <span style="background-color: #f5f5f5; color: #800000;"><!--
</span><span style="color: #008080;">13</span> <span style="background-color: #f5f5f5; color: #800000;">body,td,th </span><span style="background-color: #f5f5f5; color: #000000;">{</span>
<span style="color: #008080;">14</span> <span style="background-color: #f5f5f5; color: #ff0000;">    font-family</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 宋体</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;">15</span> <span style="background-color: #f5f5f5; color: #ff0000;">    font-size</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 20px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;">16</span> <span style="background-color: #f5f5f5; color: #ff0000;">    color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #333333</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;">17</span> <span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #008080;">18</span> <span style="background-color: #f5f5f5; color: #800000;">body </span><span style="background-color: #f5f5f5; color: #000000;">{</span>
<span style="color: #008080;">19</span> <span style="background-color: #f5f5f5; color: #ff0000;">    background-color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #CCCCCC</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;">20</span> <span style="background-color: #f5f5f5; color: #ff0000;">    margin-left</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 10px</span><span style="background-color: #f5f5f5; color: #000000;">; <span style="color: #000000;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #008000;"><!--<span style="color: #008000;">以下四行，是外观中的边距<span style="color: #008000;">--></span>
<span style="color: #008080;">21</span> <span style="background-color: #f5f5f5; color: #ff0000;">    margin-top</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 10px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;">22</span> <span style="background-color: #f5f5f5; color: #ff0000;">    margin-right</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 10px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;">23</span> <span style="background-color: #f5f5f5; color: #ff0000;">    margin-bottom</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 10px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;">24</span> <span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #008080;">25</span> <span style="background-color: #f5f5f5; color: #800000;">h1,h2,h3,h4,h5,h6 </span><span style="background-color: #f5f5f5; color: #000000;">{</span>
<span style="color: #008080;">26</span> <span style="background-color: #f5f5f5; color: #ff0000;">    font-family</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 黑体</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;">27</span> <span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #008080;">28</span> <span style="background-color: #f5f5f5; color: #800000;">h1 </span><span style="background-color: #f5f5f5; color: #000000;">{</span>
<span style="color: #008080;">29</span> <span style="background-color: #f5f5f5; color: #ff0000;">    font-size</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 30px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;">30</span> <span style="background-color: #f5f5f5; color: #ff0000;">    color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #663333</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;">31</span> <span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #008080;">32</span> <span style="background-color: #f5f5f5; color: #800000;">-->
</span><span style="color: #008080;">33</span> <span style="color: #0000ff;"></span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">34</span> 
<span style="color: #008080;">35</span> <span style="color: #0000ff;"><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">36</span> <span style="color: #000000;">hello world <span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #008000;"><!--<span style="color: #008000;">这就是页面显示的内容<span style="color: #008000;">--></span></span></span></span></span></span>
<span style="color: #008080;">37</span> <span style="color: #0000ff;"></span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">38</span> <span style="color: #0000ff;"></span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML：建立网页的结构Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义，使用、、等标签。2.提供语义化标记，如、、等，提升SEO效果。3.通过标签实现用户交互，需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号，需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

从文本到网站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一种用于构建网页的语言，通过标签和属性定义网页结构和内容。1）HTML通过标签组织文档结构，如、。2）浏览器解析HTML构建DOM并渲染网页。3）HTML5的新特性如、、增强了多媒体功能。4）常见错误包括标签未闭合和属性值未加引号。5）优化建议包括使用语义化标签和减少文件大小。

了解HTML，CSS和JavaScript：初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：构建Web内容Apr 11, 2025 am 12:12 AM

HTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容，使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。

HTML和代码：仔细观察术语Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代码” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代码”代码“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract