计算机技术与软件专业技术资格 初级网页制作员 应用技术考前速记清单

计算机技术与软件专业技术资格初级网页制作员应用技术考前速记清单核心说明：本清单严格遵循初级网页制作员《应用技术》考试大纲（机考，以代码编写题、案例分析题、实操题为主，侧重网页制作全流程实操能力考查，满分75分，45分合格），紧扣命题规律，聚焦HTML基础实操、CSS样式设计、JavaScript交互实现、网页布局、表单处理、响应式设计及故障排查七大核心模块，提炼必背代码片段、实操步骤、核心技巧及高频易错点，摒弃冗余理论，突出“实操性+应试性”，优先背诵加粗核心内容，适配代码编写、步骤简述、案例分析类题型，助力考前快速扫记、查漏补缺，确保实操类题目不丢分，代码编写规范无误。一、HTML基础实操（掌握级，分值占比25%+，重中之重）1.HTML文档核心结构（必背，代码编写必考）标准文档结构（必考代码）：

<!DOCTYPEhtml><!--文档类型声明，HTML5标准，必须放在首行-->

<htmllang="zh-CN"><!--根元素，lang指定语言为中文-->

<head><!--头部，存放元信息，不显示在页面上-->

<metacharset="UTF-8"><!--字符编码，UTF-8兼容所有中文，必写-->

<title>网页标题</title><!--网页标题，显示在浏览器标签栏，必写-->

<linkrel="stylesheet"href="style.css"><!--引入外部CSS文件，可选-->

</head>

<body><!--主体，网页所有可见内容都放在这里，必写-->

<!--网页内容（文本、图片、链接等）-->

</body>

</html>核心注意点：

所有HTML标签需遵循“闭合原则”，成对标签（如<html></html>）必须闭合，单标签（如<meta>、<img>）需加“/”闭合（HTML5可省略，但考试建议写上，规范得分）；<!DOCTYPEhtml>是HTML5的文档声明，无闭合标签，必须放在文档最顶部，遗漏会导致浏览器进入兼容模式，影响页面渲染；charset="UTF-8"不可遗漏，否则会出现中文乱码，这是考试中常见的代码扣分点。2.常用HTML标签实操（必记，高频代码）（1）文本与段落标签核心标签及代码：

标题标签：<h1>~<h6>（h1最大，h6最小，一个页面建议只写1个h1，用于页面主标题）；段落标签：<p>段落内容</p>（自动换行，段落之间有默认间距）；换行标签：<br/>（单标签，强制换行，区别于<p>的段落间距）；加粗/斜体标签：<strong>加粗文本</strong>（语义化加粗，推荐使用）、<em>斜体文本</em>（语义化斜体）；水平线标签：<hr/>（单标签，插入水平线，可用于分隔内容）。易错点：混淆<br/>与<p>的用法，误将<br/>当作段落分隔，导致页面布局混乱。（2）链接与图像标签（高频考点）链接标签（<a>）必考代码：

<ahref="目标地址"target="_blank">链接文本</a>

<!--核心属性：

href：指定链接目标（本地文件路径或网页URL，必填）；

target="_blank"：新窗口打开链接（常用，考试常考）；

target="_self"：当前窗口打开链接（默认值）-->

<ahref="#top">回到顶部</a><!--锚点链接，跳转至页面顶部或指定锚点-->图像标签（<img>）必考代码：

<imgsrc="图片路径"alt="图片无法显示时的提示文本"width="宽度"height="高度"><!--核心属性：

src：图片路径（本地路径或网络URL，必填，路径错误会导致图片无法显示）；

alt：替代文本（必填，提升可访问性，考试必写，否则扣分）；

width/height：设置图片尺寸（单位：px，可省略，不建议同时设置宽高，避免图片拉伸变形）-->高频易错点：

img标签遗漏alt属性，或src路径写错（如相对路径层级错误）；a标签href属性值为空，或target属性拼写错误（如写成"_blnak"）；锚点链接未设置对应锚点（如<aname="top"></a>），导致跳转失效。（3）列表与分区标签（实操重点）列表标签（必考）：

<!--无序列表（常用，如导航栏、列表项）-->

<ul>

<li>列表项1</li>

<li>列表项2</li>

</ul>

<!--有序列表（如步骤、排名）-->

<ol>

<li>步骤1</li>

<li>步骤2</li>

</ol>

<!--列表嵌套：有序列表与无序列表可互相嵌套，考试常考导航栏嵌套-->

<ul>

<li>首页</li>

<li>产品介绍

<ul>

<li>产品1</li>

<li>产品2</li>

</ul>

</li>

</ul>分区标签（核心，页面布局基础）：

<div>：块级元素，用于划分页面区域（如头部、主体、底部），独占一行，可嵌套其他标签，是布局核心标签；<span>：行内元素，用于包裹行内文本（如局部加粗、变色），不独占一行，不能嵌套块级元素；HTML5新增语义化标签（必记）：<header>（头部）、<nav>（导航栏）、<main>（主体）、<footer>（底部）、<section>（内容区块），语义化标签不影响布局，但能提升代码可读性，考试中使用可加分。（4）HTML5新增标签（高频考点）核心新增标签及用途：

<canvas>：用于在网页上绘制图形和动画，需通过JavaScript实现绘制，不支持矢量图形的直接渲染，不能绘制3D图形；<video>：嵌入视频，核心属性：src（视频路径）、controls（显示播放控件）、autoplay（自动播放）、loop（循环播放）；<audio>：嵌入音频，核心属性与video一致，可配合<source>标签指定多种音频格式，确保兼容性；<aside>：侧边栏内容，<article>：独立文章内容，均为语义化标签，适配现代网页开发需求。二、CSS样式设计实操（掌握级，分值占比25%+，重中之重）1.CSS引入方式（必记，实操必考）三种引入方式及代码（按考试频率排序）：

外部样式表（最常用，推荐）：

<!--HTML中引入（head标签内）-->

<linkrel="stylesheet"type="text/css"href="style.css">

<!--注意：href为CSS文件路径，不可写错；type="text/css"可省略，HTML5默认支持-->

<!--CSS文件（style.css）中编写样式-->

body{margin:0;padding:0;}

.nav{color:#333;}内部样式表（适合单页面样式）：

<head>

<styletype="text/css">

/*内部样式，仅作用于当前HTML文件*/

h1{color:red;font-size:24px;}

p{line-height:1.5;}

</style>

</head>内联样式（临时修改，不推荐，考试偶尔考）：<pstyle="color:blue;font-weight:bold;">内联样式文本</p>

<!--注意：内联样式优先级最高，会覆盖外部和内部样式，不利于维护-->优先级规则（必记，易错点）：内联样式（style属性）>ID选择器>类选择器>标签选择器>通配符选择器；!important可强制提升样式优先级（如p{color:red!important;}），但考试中尽量少用，避免优先级混乱。2.CSS核心选择器（必记，代码编写必考）常用选择器及代码示例（高频）：

选择器类型语法说明标签选择器标签名{样式}作用于所有该标签元素（如p{...}作用于所有段落）类选择器（最常用）.类名{样式}作用于所有class="类名"的元素（如.nav{...}，可复用），考试中创建样式优先使用类选择器ID选择器#ID名{样式}作用于唯一id="ID名"的元素（一个页面只能有一个相同ID）通配符选择器*{样式}作用于页面所有元素（常用作初始化样式，如*{margin:0;padding:0;}）后代选择器父选择器子选择器{样式}作用于父元素下的所有子元素（如.navli{...}作用于nav内的所有li）易错点：

类选择器遗漏“.”、ID选择器遗漏“#”，导致样式失效；混淆后代选择器与子选择器（子选择器用“>”，如.nav>li，仅作用于直接子元素）；过度使用ID选择器，导致样式无法复用，或多个元素使用相同ID，违反HTML规范。3.CSS核心样式属性（必记，高频实操）（1）文本与字体样式（必考）核心属性及代码：

/*字体样式*/

font-family:"微软雅黑",Arial,sans-serif;/*字体，优先微软雅黑，兼容性适配*/

font-size:16px;/*字体大小，单位px，常用14-18px*/

font-weight:normal;/*字体粗细：normal（默认）、bold（加粗）、100-900*/

font-style:normal;/*字体样式：normal（默认）、italic（斜体）*/

/*文本样式*/

color:#333;/*文本颜色，可用十六进制（#fff白色、#000黑色）、rgb()*/

text-align:center;/*文本对齐：left（左）、center（中）、right（右）*/

text-decoration:none;/*文本装饰：none（无，清除链接下划线）、underline（下划线）*/

line-height:1.5;/*行高，常用1.5-1.8，使文本更易读*/

text-indent:2em;/*首行缩进，2em=两个字符，常用于段落*/高频易错点：

text-decoration:none;遗漏，导致链接默认下划线未清除；font-family未设置fallback字体（如Arial），导致字体显示异常；文本颜色与背景颜色混淆，导致文本无法识别（如白色文本配浅色背景）。（2）盒子模型与布局样式（实操重点）盒子模型核心（必记）：每个HTML元素都是一个“盒子”，由内容（content）、内边距（padding）、边框（border）、外边距（margin）组成，box-sizing属性控制盒子尺寸计算方式：content-box（默认，宽高不包含padding和border）、border-box（宽高包含padding和border），考试中常用border-box简化布局计算。核心属性及代码：

/*边框样式*/

border:1pxsolid#ccc;/*边框：宽度样式颜色（solid实线、dashed虚线）*/

border-radius:5px;/*圆角，CSS3新增，常用作按钮、图片圆角*/

box-shadow:02px5px#eee;/*阴影，CSS3新增，提升页面层次感*/

/*内边距（内边距，元素内部与内容的距离）*/

padding:10px;/*四个方向均为10px*/

padding:10px20px;/*上下10px，左右20px*/

/*外边距（外边距，元素与其他元素的距离）*/

margin:10px;/*四个方向均为10px*/

margin:0auto;/*水平居中，仅对块级元素有效（需设置width）*/

/*宽高设置*/

width:100px;/*宽度，单位px、%（相对父元素）*/

height:50px;/*高度，默认由内容撑开*/

box-sizing:border-box;/*盒子模型设置，避免padding和border导致元素溢出*/高频易错点：

margin:0auto;用于行内元素，导致水平居中失效（仅块级元素有效）；未设置box-sizing:border-box，导致padding和border叠加，元素宽度超出父容器；边框样式遗漏（如只写border:1px#ccc;），导致边框无法显示；margin叠加问题（相邻两个块级元素的margin-top和margin-bottom会叠加，取最大值），可通过overflow:hidden;解决。（3）CSS3新增样式（高频考点）核心新增样式：

背景相关：background-image（背景图片）、background-size（背景大小，如cover、contain）、background-position（背景定位）；文本阴影：text-shadow:2px2px3px#666;（水平偏移、垂直偏移、模糊度、阴影颜色）；过渡效果：transition:all0.3s;（实现hover时的平滑过渡，如按钮变色、元素缩放）；弹性布局基础：display:flex;（父容器设置，子元素可灵活排列，简化布局），flex-direction控制排列方向，justify-content控制水平对齐，align-items控制垂直对齐。三、JavaScript基础交互实操（掌握级，分值占比20%+）1.JavaScript引入方式（必记）两种引入方式（考试高频）：

外部引入（推荐）：

<!--放在body标签末尾，避免阻塞页面加载，考试常考此位置-->

<scriptsrc="script.js"type="text/javascript"></script>内部引入（适合简单交互）：

<scripttype="text/javascript">

//内部JS代码，直接写在script标签内

alert("HelloWorld");//弹出提示框，考试基础考点

</script>核心注意点：script标签放在body末尾，避免JS代码执行时DOM元素未加载完成，导致获取元素失败（考试中常见扣分点）。2.核心交互实操（必记，代码编写必考）（1）DOM元素获取（基础，必考）javascript

//1.通过ID获取（最常用，唯一）

varbox=document.getElementById("box");

//2.通过类名获取（返回集合，需通过索引获取单个元素）

varitems=document.getElementsByClassName("item");

varitem1=items[0];//获取第一个类名为item的元素

//3.通过标签名获取（返回集合）

varlis=document.getElementsByTagName("li");

//4.简化获取（HTML5新增，考试偶尔考）

varbox=document.querySelector("#box");//类似CSS选择器，获取第一个匹配元素

varitems=document.querySelectorAll(".item");//获取所有匹配元素（2）元素属性与内容操作（高频）javascript

varbox=document.getElementById("box");

//1.修改元素内容（两种方式）

box.innerText="新内容";//仅修改文本，不解析HTML标签

box.innerHTML="<strong>新内容</strong>";//解析HTML标签，可插入标签

//2.修改元素样式（inline样式，优先级高）

box.style.color="red";

box.style.fontSize="18px";

box.style.display="none";//隐藏元素

box.style.display="block";//显示元素

//3.修改元素属性（如图片src、链接href）

varimg=document.getElementById("img1");

img.src="new.jpg";//修改图片路径

varlink=document.getElementById("link1");

link.href="";//修改链接地址

//4.添加/移除类名（推荐，通过CSS控制样式，避免内联样式混乱）

box.classList.add("active");//添加类名active

box.classList.remove("active");//移除类名active

box.classList.toggle("active");//切换类名（有则移除，无则添加）（3）事件绑定（核心，交互必考）常用事件及代码示例：

//1.点击事件（onclick，最常用，如按钮点击）

varbtn=document.getElementById("btn");

btn.onclick=function(){

alert("按钮被点击了");

//可结合DOM操作，如修改元素内容、显示隐藏元素

varbox=document.getElementById("box");

box.style.display="block";

};

//2.鼠标悬停/离开事件（onmouseover/onmouseout，如导航栏效果）

varnav=document.getElementById("nav");

nav.onmouseover=function(){

this.style.backgroundColor="#f5f5f5";//this指代当前元素

};

nav.onmouseout=function(){

this.style.backgroundColor="white";

};

//3.表单事件（onchange/onblur，如输入框验证）

varinput=document.getElementById("input1");

input.onblur=function(){

//失去焦点时验证输入内容

if(this.value===""){

alert("请输入内容");

}

};

//4.页面加载完成事件（确保DOM元素加载完成后执行JS）

window.onload=function(){

//所有JS交互代码放在这里，避免获取元素失败

varbtn=document.getElementById("btn");

btn.onclick=function(){

alert("页面加载完成后点击");

};

};易错点：

事件绑定未放在window.onload内，导致DOM元素未加载完成，绑定失败；事件函数拼写错误（如onclick写成onclik），导致事件无法触发；修改元素样式时，属性名拼写错误（如fontSize写成fontsize，JS区分大小写）。（4）简单逻辑与表单验证（案例分析高频）表单验证核心代码（必考，案例分析常考）：

<!--HTML表单-->

<formid="myForm"onsubmit="returncheckForm()">

用户名：<inputtype="text"id="username"name="username"><br>

密码：<inputtype="password"id="password"name="password"><br>

<inputtype="submit"value="提交">

</form>

<script>

//JS验证函数

functioncheckForm(){

varusername=document.getElementById("username").value;

varpassword=document.getElementById("password").value;

//验证用户名不为空

if(username===""){

alert("用户名不能为空");

returnfalse;//阻止表单提交

}

//验证密码长度不少于6位

if(password.length<6){

alert("密码长度不能少于6位");

returnfalse;//阻止表单提交

}

//验证通过，允许提交

returntrue;

}

</script>核心逻辑：表单提交时触发onsubmit事件，调用验证函数，验证失败返回false阻止提交，验证通过返回true允许提交，这是案例分析题中表单处理的核心考点，常结合用户体验要求考查。四、网页布局实操（掌握级，分值占比10%+）常见布局方式（必记，实操高频）：

浮动布局（float，传统布局，考试常考）：

/*父容器清除浮动（避免子元素浮动导致父容器高度塌陷，必考）*/

.parent{overflow:hidden;}/*最简单的清除浮动方法*/

/*子元素浮动*/

.left{float:left;width:200px;}/*左浮动*/

.right{float:right;width:300px;}/*右浮动*/

/*注意：浮动元素会脱离文档流，需给父容器清除浮动，否则影响后续元素布局*/弹性布局（flex，CSS3新增，推荐，高频考点）：

/*父容器设置flex*/

.container{

display:flex;/*开启弹性布局*/

justify-content:space-between;/*子元素水平分布，两端对齐*/

align-items:center;/*子元素垂直居中*/

height:100px;/*父容器需设置高度，否则垂直居中无效*/

}

/*子元素自动分配空间*/

.item{flex:1;}/*所有子元素平均分配父容器剩余空间*/定位布局（position，用于特殊元素，如导航栏、悬浮按钮）：

/*相对定位（relative，相对于自身原有位置定位，不脱离文档流）*/

.box{position:relative;top:10px;left:20px;}

/*绝对定位（absolute，相对于最近的已定位父元素定位，脱离文档流）*/

.box2{position:absolute;top:0;right:0;}

/*固定定位（fixed，相对于浏览器窗口定位，固定在页面某个位置）*/

.nav{position:fixed;top:0;width:100%;}/*导航栏固定在顶部，考试常考*/高频考点：导航栏布局（固定定位+弹性布局/浮动布局）、两栏/三栏布局（浮动或flex）、页面居中布局（margin:0auto;），案例分析题常要求根据需求设计布局并编写代码。五、响应式设计与兼容性（熟悉级，分值占比10%+）响应式设计核心（必记）：使网页在不同设备（电脑、手机、平板）上都能正常显示，核心是“媒体查询（MediaQuery）”，根据屏幕尺寸调整样式，适配移动设备的浏览需求。媒体查询核心代码（考试高频）：

/*屏幕宽度小于768px（手机端）时生效*/

@media(max-width:768px){

.container{

width:100%;/*宽度自适应*/

flex-direction:column;/*弹性布局改为垂直排列*/

}

.left,.right{

float:none;/*取消浮动*/

width:100%;/*宽度100%*/

}

nav{

font-size:14px;/*缩小字体*/

}

}

/*核心原则：移动优先，先适配手机端，再适配电脑端*/浏览器兼容性（易错点）：

CSS3新增属性（如flex、border-radius）需添加浏览器前缀（-webkit-、-moz-），确保在旧浏览器中正常显示（如-webkit-border-radius:5px;）；不同浏览器对标签的默认样式不同，需用通配符选择器初始化样式（*{margin:0;padding:0;}）；HTML5新增标签（如<nav>、<header>）在IE8及以下不支持，需设置display:block;使其成为块级元素。六、网页制作全流程与故障排查（掌握级，案例分析必考）1.网页制作标准流程（必记，案例分析答题模板）需求分析：明确网页用途（如宣传页、表单页）、目标用户、核心功能（如导航、表单提交、图片展示），确定页面风格（如现代简约）；页面规划：设计页面结构（头部、主体、底部）、布局方式（如两栏布局）、素材准备（图片、文字、音频/视频）；HTML编写：搭建网页骨架，编写语义化标签，确保结构清晰、标签闭合，完成文本、图片、链接、表单等内容的添加；CSS样式设计：编写CSS样式，实现页面美化、布局调整，优先使用外部样式表，确保样式可复用、易维护；JavaScript交互实现：添加页面交互效果（如按钮点击、表单验证、鼠标悬停），确保交互流畅、逻辑正确；测试优化：在不同浏览器（Chrome、Firefox、Edge）、不同设备上测试，排查布局错乱、交互失效等问题，优化页面加载速度；发布上线：将网页文件（HTML、CSS、JS、素材）上传至服务器，确保文件路径正确，网页可正常访问，可借助FTP工具完成文件上传。2.常见故障排查（必记，案例分析高频）故障排查核心原则：先排查HTML结构（标签闭合、路径），再排查CSS样式（选择器、属性），最后排查JavaScript（语法、事件绑定），逐步定位问题，做好排查记录。常见故障及解决方法：

故障1：图片无法显示→检查img标签src路径（相对路径层级是否正确、文件名是否拼写错误），确认图片文件存在；故障2：样式失效→检查CSS引入路径是否正确、选择器是否写错（如类选择器遗漏“.”）、样式优先级是否冲突，可通过浏览器开发者工具（F12）查看样式是否生效；故障3：JS交互无响应→检查JS引入路径、事件绑定是否正确、DOM元素是否获取成功（可在console打印变量排查）、代码是否有语法错误（如括号不闭合、分号遗漏）；故障4：页面布局错乱→检查浮动是否清除、盒模型设置是否正确、元素宽高是否超出父容器，flex布局需确认父容器是否设置display:flex；故障5：中文乱码→检查HTML文档meta标签charset是否为UTF-8，CSS文件编码是否与HTML一致；故障6：表单无法提交→检查表单onsubmit事件是否调用验证函数、验证函数是否正确返回true/false，表单元素是否设置name属性。七、高频考点汇总（必背，覆盖80%考题）HTML标准文档结构代码，常用标签（a、img、ul/ol/li、div、span、表单标签）的核心属性和用法；CSS三种引入方式、核心选择器（类、ID、后代选择器）、优先级规则，盒子模型相关属性；CSS文本/字体样式、边框/阴影样式、flex布局、浮动布局、定位布局的核心代码；JavaScript引入方式、DOM元素获取方法、事件绑定（onclick、onblur）、表单验证核心逻辑；网页