没有合适的资源?快使用搜索试试~ 我知道了~
04 Web前端技术.pdf
需积分: 5 0 下载量 148 浏览量
2022-12-04
00:16:04
上传
评论
收藏 589KB PDF 举报
温馨提示
试读
21页
04 Web前端技术.pdf
资源推荐
资源详情
资源评论
《Web 前端技术 - 就业技能》
章节
Ch01 - 初识 HTML
题目 1)
什么是 HTML?
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言,而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
题目 2)
XHTML 和 HTML 有什么区别
HTML 是一种基本的 WEB 网页设计语言,XHTML 是一个基于 XMl 的置标语言最主要的不同
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭标签名必须用小写字母
XHTMl 文档必须拥有根元素
题目 3)
什么是 W3C?W3C 标准包括哪些内容?
(1)World Wide Web Consortium(万维网联盟)成立于 1994 年,Web 技术领域最权威和
具影响力的国际中立性技术标准机构
(2)包括:结构化标准语言(XHTML 、XML)表现标准语言(CSS)行为标准(DOM、
ECMAScript )
题目 4)
HTML5 有哪些新特性,移除了哪些元素?如何处理 HTML5 新标签的浏览器兼容问题?如何
区分 HTML 和 HTML5?
HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。
绘画 canvas
用于媒介回放的 video 和 audio 元素
本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;
sessionStorage 的数据在浏览器关闭后自动删除
语意化更好的内容元素,比如 article,footer,header,nav,section
表单控件:calendar,date,time,email,url,search
新的技术 webworker,websocktGeolocation
移除的元素
纯表现的元素:basefont,big,center,font,s,strike,tt,u;
对可用性产生负面影响的元素:frame,frameset,noframes;
支持 HTML5 新标签:
IE8/IE7/IE6 支持通过 document,createElement 方法产生的标签,可以利用这一特性让这些
浏览器支持 HTML5 新标签,浏览器支持新标签后,还需要添加标签默认的样式。
题目 5)
HTML5 为什么只需要写!DOCTYPE HTML?
HTMl5 不基于 SGML,因此不需要对 DTD 进行引用,但是需要 doctype 来规范浏览器的行为
(让浏览器按照它们应该的方式来运行);而 HTMl4.01 基于 SGMA,所以需要对 DTD 进行引
用,才能告知浏览器文档所使用的文档类型。
章节
Ch02 - 列表表格及表单美化
题目 1)
表格跨行和跨列及文本对齐的属性是什么?
跨行:rowspan="行数"
跨列:colspan="列数"
对齐:align="center/left/right";
题目 2)
form 表单提交属性?设置请求方式属性?请求方式的区别?
表单提交属性:method
请求方式分为两种:post 和 get
post 比较安全,不会在浏览器上看到 form 表单中输入的参数
get 不安全,会在浏览器上看到 form 表单中输入的参数
题目 3)
请分别说出 form 表单中 input 标签文本输入框,密码框,单选按钮,复选框,下拉列表,
文件域,隐藏域,提交按钮,重置按钮,图片提交按钮的属性值?
文本框属性:text
密码框属性:password
单选按钮属性:radio
复选框属性:checkbox
下拉列表属性:<select>
<option value ="1">Volvo</option>
<option value ="2">Saab</option>
<option value="3">Opel</option>
<option value="4">Audi</option>
</select>
文件域属性:file
隐藏域属性:hidden
提交按钮属性:submit
重置按钮属性:reset
图片提交按钮属性:image
题目 4)
请说出无序列表的、有序列表、自定义列表的标签?
无序列表:ul
有序列表:ol
自定义列表:dl
题目 5)
请说出无序列表、有序列表、自定义列表的区别?
有序列表:有序列表中默认的 type 类型是数字,而且是从 1 开始的。它有两个属性:type、
start。
无序列表:无序列表默认的前缀样式是实心圆(disc),ul 标签中的属性是 type,type 属性
值有 disc(实心圆默认)、circle(空心圆)、square(实心正方形)、none(取消前缀)
自定义列表:自定义列表与有序无序的区别是没有前缀,而且是有缩进
章节
Ch03 - CSS
题目 1)
什么是 CSS?
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现 HTML(标准通用标记语言
的一个应用)或 XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS 不仅
可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
题目 2)
请问 CSS 样式有哪些分类?选择器有哪些分类?
CSS 样式分三类:
行内样式:
<div style="width:100px;height:100px;background:red;"></div>
内部:<style type="text/css"></style>>
外部式:就是引用外部 css 文件;
<link href="css.css" type="text/css" rel="stylesheet" />
CSS 选择器分类
基本选择器:
(1 id 选择器 语法:#id 名{css 样式值;...}
(2 class 选择器 语法:.class 名{css 样式值;...}
(3 标签选择器 语法:标签名{css 样式值;...}
(4 交集选择器 语法:EF
(5 并集选择器 语法:E,F,...
(6 选择器的优先级 id 选择器>class 类选择器>标签选择器
层次选择器、结构伪类选择器和属性选择器。
题目 3)
请说出基本选择器和曾次选择器的又细分为哪些选择器?
基本选择器分为:ID 选择器、class 选择器、标签选择器、交集选择器、并集选择器。
层级选择器分为:后代选择器、子选择器、相邻兄弟选择器、同辈选择器。
题目 4)
请说出 CSS 设置字体大小、颜色、粗细、字体行高的语法是哪些?
字体大小语法:font-size:16px(数字代表像素大小、px 为像素单位);
字体颜色语法:color:16 进制颜色或英语:
字体粗细语法:font-weight:bold 或像素;
字体行高语法:line-height:像素大小;
题目 5)
请说出文本对齐方式、文本缩进、垂直方向设置、文本阴影的语法是哪些?
文本对齐方式分三种对齐方式
左对齐语法:text-align:left;
右对齐语法:text-align:right;
居中对齐语法:text-align:center;
文本缩进语法分三种缩进:
按字符缩进:text-index:2em;
按长度缩进:text-index:2cm;
按百分比缩进:text-index:50%;
垂直方向设置分三种垂直:
垂直居中:vertical-align:middle;
垂直低端:vertical-align:bottom;
垂直顶端:vertical-align:top;
文本阴影的语法:text-shadow:阴影颜色 x 轴 y 轴 阴影半径;
章节
Ch04 - 盒子模型、浮动
题目 1)
什么是盒子模型?什么是浮动?
盒子模型:网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)
、边界(margin), CSS 盒子模式都具备这些属性。
这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解,所以叫它盒子模式。
CSS 盒子模型就是在网页设计中经常用到的 CSS 技术所使用的一种思维模型。
浮动:float 是 css 样式中的定位属性,用于设置标签对象的浮动布局,浮动也就是我们所说
标签对象浮动居左靠左(float:left)和浮动居右靠右(float:right)。
题目 2)
盒子模型可以设置哪些属性?
可以设置尺寸、边框、内填充或内边距、边界及外边距、圆角边框、盒子阴影。
题目 3)
浮动可以设置哪些属性?有哪些语法?
浮动可以设置的属性及语法如下:
左浮动:float:left;
右浮动:float:right;
清楚左侧浮动:clear:left;
清楚右侧浮动:clear:right;
清除两侧浮动:clear:both;
题目 4)
显示和隐藏元素的语法是什么?
隐藏:display:none;
显示:display:block;
题目 5)
盒子模型的边框有哪些元素?
上边框:border-top:颜色 大小 样式;
下边框:border-bottom:颜色 大小 样式;
左边框:border-left:颜色 大小 样式;
右边框:border-right:颜色 大小 样式;
所有边框:border:颜色 大小 样式;
(属性值取值 颜色(英语单词或者 16 进制的颜色) 大小(例 1px) 样式(实线:solid 虚
线:dashed))
章节
Ch05 - 定位
题目 1)
相对定位和绝对定位的区别?
相对定位:设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原
本所占的空间仍保留。
绝对定位:绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位不同,
相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位
置。
题目 2)
请说出相对定位和绝对定位的语法?
相对定位的语法:position:relative;
绝对定位的语法:position:absolute;
题目 3)
定位的方式有哪些?
position 属性值:static,relative,absolute,fixed
1)static
static 是默认值,元素位于文档流中,正常显示,忽略元素的 top,bottom,left,right 属
性。z-index 属性始终为 0.
2)relative
相对定位,保留元素在文档流中占用的位置和尺寸,由 left/right/top/bottom 几个属性确定
相对移动的距离,原来的位置保留
3)absolute
绝对定位,将对象从文档流中脱离出来,使用 left/right/top/bottom 等属性相对其最接近的
一个并有定位设置的父元素进行绝对定位;如果没有,则依据 body 对象
4)fixed
fixed 和 absolute 差不多,但是他相对的是窗口的左上角,不会跟随文档滚动。但是如果在
多 frame 页面里面,他相对的是所在 frame 的左上角,而不是浏览器左上角。
题目 4)
定位的属性值都有哪些?每个值得意思?
static:默认值。位置设置为 static 的元素会正常显示,它始终会处于文档流给予的位置
(static 元素会忽略任何 top、bottom、left 或 right 声明)。
absolute:相对于父级元素的绝对定位,s 浮出、脱离布局流,它不占据空间,就是我们所说
的层,其位置相对于最近的已定位父元素而言的位置,可直接指定 “left”、“top”、“right”
以及 “bottom”属性。若父级都没有定位,则以 html(根元素)。(层叠的顺序 z-index:value)
relative:是相对于默认位置的偏移定位,通过设置 left、top、right、bottom 值可将其移至
相对于其正常位置的地方(相对于自己的开始的位置发生的位置上的移动,【不会破坏正常的
布局流】
fixed:相对浏览器的绝对定位,是相对于浏览器窗口的指定坐标进行定位。此元素的位置可
通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否,元素都会留在
那个位置。
题目 5)
你对层的设置了解的有哪些
z-index:0;
默认是 0;
设置层的透明度:
opacity:x x 值为 0-1,值越小越透明
filter:alpha(opacity=x) x 值为 0-100,值越小越透明
章节
Ch06 - 1 号店网页制作一(静态)
题目 1)
每个 HTML 文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗?
<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。此标签可告知浏
览器文档使用哪种 HTML 或 XHTML 规范。(重点:告诉浏览器按照何种规范解析页面)
题目 2)
div+css 的布局较 table 布局有什么优点?
改版的时候更方便 只要改 css 文件。
页面加载速度更快、结构化清晰、页面显示简洁。
剩余20页未读,继续阅读
资源评论
qq_de
- 粉丝: 13
- 资源: 6
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功