任务3.3 符合W3C标准的HTML5网页

模块3认识HTML5的文档结构任务3.3符合W3C标准网页设计项目教程（HTML5+CSS3+JavaScript）学习目标▸从HTML结构到CSS表现与JavaScript行为知识目标理解元素、属性与值的概念；掌握HTML元素的嵌套关系；了解块级元素与语义化标记。能力目标能搭建符合W3C标准的HTML5网页；能在页面中引入CSS样式与JS脚本。素养目标强化标准意识与代码规范；培养分层设计与模块化思维；提升综合实践与调试能力。02任务描述▸通过综合实例，演示HTML、CSS、JavaScript的分层协作逻辑通过综合实例，演示HTML、CSS、JavaScript的分层协作逻辑本实例在文档的head标记内增加了CSS样式表和JavaScript脚本代码，它们分别改变了网页的外观格式和网页的行为，是符合W3C标准的三层分离实践。元素

标签+内容属性

附加信息语义化

用最恰当的元素033.3.1HTML元素与属性▸元素、属性与值构成HTML的基本单元元素与属性标签通常包含元素、属性与值三个要素。非空元素成对出现，如<p>…</p>。空元素无内容，如图像标记img。嵌套与语义化外层元素为父元素，内层为子元素。嵌套关系决定解析逻辑与样式继承。语义化强调用最恰当元素标记内容。04HTML元素、属性与值▸一个完整的元素由开始标签、内容与结束标签组成<p开始标签class属性名="tip"属性值>内容内容</p>结束标签元素开始标签+内容+结束标签，构成完整的标记单元属性写在开始标签内，为元素提供附加信息值属性的取值，通常用双引号括起来提示：非空元素成对出现，如<p>…</p>；空元素没有结束标签，如<img>。05元素的嵌套与父子关系▸外层元素是父元素，被包裹的内层元素是子元素<div>

父元素，包裹下面所有内容<h1>主标题</h1>

div的子元素<p>正文<em>强调内容</em></p>

div的子元素<em>强调内容</em>

p的子元素，也是div的后代06综合实例：交互式用户卡片▸HTML搭结构、CSS定样式、JavaScript加交互<!DOCTYPEhtml>

<htmllang="zh-CN">

<head>

<metacharset="UTF-8">

<title>用户卡片</title>

<style>

#card{width:300px;padding:20px;text-align:center;}

img{width:100px;border-radius:50%;}

button{margin-top:15px;padding:8px15px;}

</style>

</head>

<body>

<divid="card">

<imgsrc="#"alt="头像">

<h2id="name">访客</h2>

<p>点击次数：<spanid="count">0</span></p>

<buttononclick="changeColor()">换背景</button>

</div>

<script>

letclicks=0;

functionchangeColor(){

clicks++;

document.getElementById("count").innerText=clicks;

document.getElementById("card").style.background=

"linear-gradient(45deg,#f66,#6cf)";

}

</script>

</body>

</html>三层分工与运行效果HTML——div、img、h2、p、button搭建卡片结构CSS——<style>内设置尺寸、圆角与按钮样式JS——<script>内响应点击、更新计数与背景三者各司其职，正是Web标准“三层分离”的体现点击“换背景”按钮：计数加一、卡片背景渐变与3.3实例对照，可看到三层分工的完整形态07案例演示3-3：符合W3C标准的网页<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<title>Web标准实例</title>

<styletype="text/css">

p{color:blue;}

h1,p,div{text-align:center;}

img{width:50%;}

</style>

<scripttype="text/javascript">

document.write("欢迎来到我的主页！")

</script>

</head>

<body>

<h1>武汉软件工程职业学院</h1>

<p>HTML教程</p>

<div><imgsrc="img/cover.jpg"/></div>

</body>

</html>w3c.html欢迎来到我的主页！武汉软件工程职业学院HTML教程▢img/cover.jpg——img标签引入的图片运行观察：CSS改变外观格式，JavaScript改变行为，三层分离使代码更易维护。08任务实施：创建交互式用户卡片▸在VSCode中新建user_card.html01搭建结构构建html、head、body完整骨架02编写内容创建卡片、头像、用户名与按钮03设计样式用CSS设置尺寸、边框与圆角04编写交互用JS实现点击计数与换背景05预览调试浏览器中查看效果并迭代优化提示：把CSS写进<style>、JS写进<script>，就是三层分离的基本做法。09任务实施代码（一）：用户卡片▸HTML结构+CSS样式+JS交互<divid="card">

<imgsrc="#"alt="头像">

<h2id="name">访客</h2>

<p>点击次数：<spanid="count">0</span></p>

<buttononclick="changeColor()">换背景</button>

</div>

<script>

letclicks=0;

functionchangeColor(){

clicks++;

document.getElementById("count").innerText=clicks;

}

</script>代码要点div作为卡片容器，id用于定位。CSS的transition实现背景过渡。onclick绑定事件，触发自定义函数。getElementById获取元素并更新内容。10任务小结▸本任务完成从“HTML结构