网页设计与制作（Dreamweaver CC）（第4版）课件 模块2 HTML代码

网页设计与制作DreamweaverCC（第4版）模块2HTML代码01模块1网页设计基础03模块3初级应用05模块5高级应用02模块2HTML语言04模块4网页布局06模块6测试与发布07模块7综合应用任务2体验HTML文档——网页基础任务描述通过在记事本和Dreamweaver中使用HTML代码制作网页，介绍HTML代码的常用标记及如何使用HTML代码制作简单网页的方法。。任务解析（1）选择“开始→Windows附件→记事本”命令打开“记事本”窗口，输入以下HTML代码：<html><head><title>社会主义核心价值观</title></head><bodybgcolor="#E8EA87"><marqueebehavior="alternate"> <h1>富强、民主、文明、和谐、自由、平等、公正、法治、爱国、敬业、诚信、友善</h1></marquee></body></html></html>任务2体验HTML文档——网页基础任务解析（2）输入完毕，选择“文件→保存”命令，文件名为“web.html”，保存类型为“所有文件”，单击“保存”按钮。（3）在“此电脑”中双击web.html打开浏览器浏览该网页。（4）单击浏览器地址栏上的按钮，将该网页添加到收藏夹中。（5）启动Dreamweaver2021，选择“文件→打开”命令，打开web2.html，单击“文档”工具栏上的“代码”按钮切换到代码视图。（6）在代码窗口中对代码进行修改，如下图所示。任务2体验HTML文档——网页基础任务解析（7）单击“设计”按钮切换到设计视图，按F12键保存并浏览网页。（8）在Dreameaver中打开web3.html，切换到代码视图。（9）在<body>和</body>之间添加以下代码：<tablewidth="1000"border="0"align="center"cellspacing="0"><tr><tdheight="183"><imgsrc="images/pic01.jpg"width="1316"height="300"alt=""/></td></tr><tr><tdheight="327"align="center"><formid="form1"name="form1"method="post"><h2>我要留言/建议</h2><p>任务2体验HTML文档——网页基础任务解析<inputname="xq"type="text"id="x1"placeholder="请输入您的姓名"></p><p><inputname="x2"type="text"id="x2"placeholder="请输入您的联系方式"></p><p><textareaname="t"cols="50"rows="6"id="t"placeholder="请输入您的建议/留言"></textarea></p><p><inputtype="submit"name="s"id="s"value="单击提交"></p></form></td></tr></table>（10）选择“文件→保存”命令，按F12浏览该网页。知识概述一、HTML5文档基本结构二、HTML标签的分类和属性1.标签的分类双标签、单标签2.标签的属性3.标签属性规则（1）一个标签可以包括多个属性，属性必须在开始标签中。（2）标签不区分大小写，但规范写法是全部使用小写。（3）若标签中包含多个属性，各属性之间使用空格分隔。（4）标签中的属性没有前后顺序。（5）一个标签元素的内容可以写成多行。（6）标签中所有字符必须使用半角字符，而不能使用全角字符知识概述二、常用标签1.<title>标记2.<meta>标记3.<link>标记4.<body>标记5.<p>标记6.<br>标记7.<hr>标记8.<img>标记9.<a>标记10.标题标记标题标记是用于定义文档结构、区分内容层级的标记，通常以<h1>到<h6>表示，数字越小，层级越高，视觉上也通常越大、越醒目。知识概述二、常用标签11.列表标记12.表格标记（1）<table>标记（2）<tr>标记（3）<