- HTML 语言
1、网站设计与开发流程。
- 网页、网站、静态网页、动态网页的概念。
- 网页主要由文字、图像和超链接等元素构成。还可以包含音频、视频以及Flash动画等。
- 一个网站通常包含一个首页和多个子页面。网页与网页之间通过超链接互相访问。
- 静态网页是指用户无论何时何地访问，网页都会显示固定的信息，除非网页源代码被重新修改上传。
- 动态网页显示的内容则会随着用户操作和时间的不同而变化。
- WEB标准：结构（Structure）、表现（Presentation）和行为（Behavior）。分别对应什么？各自作用是什么？
- 结构标准：结构用于对网页元素迚行整理和分类，主要包括XML和XHTML两个部分。 （HTML5）
- 表现标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。（CSS3）
- 行为标准：行为是指网页模型的定义及交互的编写，主要包括DOM和
- ECMAScript两个部分。（JS、JQUERY）
作用：
- 结构：使内容更清晰，更有逻辑性。相当于人体骨骼。
- 表现：用于修饰内容的样式。相当于人的服饰、鞋帽。
- 行为：内容交互及操作效果。相当于人的动作。
- html中英文是什么？html文档的基本格式？
- HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标记语言 ”主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述。
- HTML文档的基本格式:主要包括文档类型声明、 根标记、头部标记、主体标记。
- 网页主流浏览器有哪些？常用的网页编辑软件有哪些？VScode 的常用编辑技巧?
- IE、傲游、猎豹安全浏览器、Firefox、Safari，谷歌，edge，Opera
- Dreamweaver，sublime，hbuilder，VS Code
- HTML5语法书写要点：1.标签不区分大小写；2.允许属性值不使用引号；3.标签严格对称嵌套。
- 常用的单标记、双标记？常用标记的属性？
- 常见单标记：<br><hr><img><input><param><meta><link>
- 文本标记：<h1>…<h6>、<p>、<br />基本属性。
- 水平线标记<hr>的基本属性。
| align | 设置水平线的对齐方式 | 可选择left、right、center三种值，默认为center，居中对齐 |
| size | 设置水平线的粗细 | 以像素为单位，默认为2像素 |
| color | 设置水平线的颜色 | 可用颜色名称、十六进制#RGB、rgb(r,g,b) |
| width | 设置水平线的宽度 | 可以是确定的像素值，也可以是浏览器窗口的百分比，默认为100% |
10、格式化标记：
11、特殊符号
- 图像标记<img>的常用属性？
| 属性 | 属性值 | 描述 |
| src | URL | 图像的路径 |
| alt | 文本 | 图像不能显示时的替换文本 |
| title | 文本 | 鼠标悬停时显示的内容 |
| width | 像素（XHTML不支持%页面百分比） | 设置图像的宽度 |
| height | 像素（XHTML不支持%页面百分比） | 设置图像的高度 |
| border | 数字 | 设置图像边框的宽度 |
| vspace | 像素 | 设置图像顶部和底部的空白（垂直边距） |
| hspace | 像素 | 设置图像左侧和右侧的空白（水平边距） |
| align | left | 将图像对齐到左边 |
| right | 将图像对齐到右边 | |
| top | 将图像的顶端和文本的第一行文字对齐，其他文字居图像下方 | |
| middle | 将图像的水平中线和文本的第一行文字对齐，其他文字居图像下方 | |
| bottom | 将图像的底部和文本的第一行文字对齐，其他文字居图像下方 |
- 相对路径与绝对路径？正确引用格式？
- 绝对路径：一般是指带有盘符的路径或完整的网络地址
- 相对路径：不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置。相对路径的设置分为以下3种：
- 图像文件和html文件位于同一文件夹：只需输入图像文件的名称即可，如<img src="logo.gif" />。
- 图像文件位于html文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src="img/img01/logo.gif" />。
- 图像文件位于html文件的上一级文件夹：在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推，如<img src="../logo.gif" />。
- 视频、音频的标记及主要属性？
<video src="视频文件路径" controls="controls"></video>
| 属性 | 值 | 描述 |
| autoplay | autoplay | 当页面载入完成后自动播放视频。 |
| loop | loop | 视频结束时重新开始播放。 |
| preload | preload | 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。 |
| poster | url | 当视频缓冲不足时，该属性值链接一个图像，并将该图像按照一定的比例显示出来。 |
<audio src="音频文件路径" controls="controls"></audio>
| 属性 | 值 | 描述 |
| autoplay | autoplay | 当页面载入完成后自动播放音频。 |
| loop | loop | 音频结束时重新开始播放。 |
| preload | preload | 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。 |
- 超链接<a>标记的主要属性？
- 列表：无序列表、有序列表书写方法?基本属性？如：用无序列表建立导航条。
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
| 属性 | 名称 | 含义 |
| type （CSS中用list-style代替） | disc | 指定项目符号为一个实心圆点，为默认值 |
| circle | 指定项目符号为一个空心圆点 | |
| square | 指定项目符号为一个实心方块 | |
| none | 无项目符号 |
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>
| 属性 | 名称 | 含义 |
| type （CSS中用list-style代替） | 1 | 数字 |
| A | 大写字母 | |
| a | 小写字母 | |
| I | 罗马数字大写 | |
| i | 罗马数字小写 | |
| start | 第一个的起始编号 | |
| reversed | reversed | 倒序排列 |
- div 和span区别？
div和span两个标签是为了成块展示，规格化。div占用一行，span不会占用一行，内容占多大宽度，span就有多宽。
- 表单？创建表单的方法？表单数据提交方式？
- 在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成
- 在HTML中，<form></form>标记被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，<form> </form>中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
- method属性用于设置表单数据的提交方式，其取值为get或post。get为method属性的默认值，采用get方法，提交的数据将显示在浏览器的地址栏中，保密性差，且有数据量的限制。而post方式的保密性好，并且无数据量的限制。
例：<form action="form_action.asp" method=“post">….</form>
- Input控件（text、password、button、reset、submit 、radio 、checkbox、email 、date、time、file）、select控件、textarea控件等的基本结构和常用属性。
- 引入外部CSS文件的标记<link>主要属性。
| 属性名 | 常用属性值 | 描述 |
| href | URL | 指定引用外部文档的地址 |
| rel | stylesheet | 指定当前文档与引用外部文档的关系，该属性值通常为stylesheet，表示定义一个外部样式表 |
| type | text/css | 引用外部文档的类型为CSS样式表 |
| text/javascript | 引用外部文档的类型为javascript脚本 |
- CSS语法
- CSS样式引入的三种（四种）方法？行内式、内嵌式、链入式、导入式（在CSS中用）。怎样书写和引用？优先级最高行内式
- 行内式：也称内联样式，是通过标记的style属性来设置元素的样式，基本语法格式如下：
<标记名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标记名>
- 内嵌式：是将CSS代码集中写在HTML文档的<head>头部标记中，并且用<style>标记定义，其基本语法格式如下：
<head>
<style type="text/css">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
- 链入式：链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link />标记将外部样式表文件链接到HTML文档中，基本语法格式如下：
<head>
<link href="CSS文件的路径" type="text/css" rel="stylesheet" />
</head>
- CSS的两大性质：继承性和层叠性。各自的含义？哪些属性不具备继承性？
继承性：CSS的继承指的是子标记会继承父标记的所有样式风格，并可以在父标记样式风格的基础上加以修改，产生新样式，而子标记的样式风格则完全不会影响父标记。并不是所有属性都具有继承性。例如，下面的属性就不具有继承性：边框属性、外边距属性、内边距属性、背景属性、定位属性、布局属性、元素宽高属性。
层叠性：层叠是指样式的优先级，权重高的覆盖权重低的。
- CSS基础选择器：标记选择器、类选择器、ID选择器、通配符选择器。声明方法？引用方法？优先级？
标记选择器：负责哪些标记使用哪种样式，基本语法格式如下：
标记名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
类选择器：类选择器使用“.”（英文点号）进行标识，后面紧跟类名，基本语法格式如下：
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
id选择器：id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
通配符选择器：通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：
*{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
| CSS权重 | |
| 选择器 | 权重值 |
| ！important | 正无穷 |
| 行间样式 | 1000 |
| id选择器 | 100 |
| Class选择器，属性选择器，伪类选择器 | 10 |
| 标签选择器、伪元素选择器 | 1 |
| 通配符选择器 | 0 |
| 注：如果权重一样（优先级一样），会显示后面的。 | |
- 文本常用样式属性：font-size、font-family、font-weight、font-style、color、line-height、text-decoration、text-align等。灵活运用。
- 图像样式属性：border、width、height用法。
- 标准盒子模型及所占高度、宽度计算方法。
盒子实际占用的宽=margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
盒子实际占用的高=margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom
- 相邻盒子边距计算规则？
1、水平边距永远不会重合。总边距取两个左右边距之和。
2、在标准文档流中，2个或以上的块级盒模型相邻的垂直margin会重叠。
全部都为正值，取最大者。
不全是正值，则都取绝对值，然后用正值减去最大值。
没有正值，则都取绝对值，然后用0减去最大值。
3、相邻的盒模型中，如果其中的一个是浮动的（float），垂直margin不会重叠，并且浮动的盒模型和它的子元素之间也是这样。
- 块级元素的特点？有哪些常用的块级元素？
1、自己独占一行。
2、高度，宽度、外边距以及内边距都可以控制。
3、宽度默认是容器（父级宽度）的100%。
4、是一个容器及盒子，里面可以放行内或者块级元素。
常见的块元素：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，<div>标签是最典型的块元素。
- 行内元素的特点？有哪些常用的行内元素？
1、相邻行内元素在一行上，一行可以显示多个。
2、高、宽直接设置是无效的。
3、默认宽度就是它本身内容的宽度。
4、行内元素只能容纳文本或则其他行内元素。
常见的行内元素：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的“行内元素”，也称“内联元素”。
- 行内元素与块级元素的转换方式是什么？
块转行内：display:inline。
行内转块：display:block。
- 行内块元素的特点？如何转换？
行内块元素（inline-block）：
1、和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个。
2、默认宽度就是它本身内容的宽度。
3、高度，行高、外边距以及内边距都可以控制。
块、行内元素转换为行内块：display: inline-block。
- 盒模型的CSS属性：border、background-color（颜色的三种表达方式）、background-image、background-repeat、background-position。
- 制作导航菜单？
- 理解什么是浮动？浮动的方法?三个常用属性值？浮动后的元素特点有哪些？
所谓元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中相应位置的过程。在CSS中，通过float属性来定义浮动，其基本语法格式如下：
浮动元素会脱离标准流（脱标）
浮动的元素会一行内显示并且元素顶部对齐
浮动的元素会具有行内块元素的特性
- 块级盒子：没有设置宽度时默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定。
- 行内盒子：宽度默认和内容一样宽，也可以直接设定宽高。
- 浮动的盒子中间是没有缝隙的，是紧挨着一起的。
即：默认宽度由内容决定，同时支持指定高宽，盒子之间无空隙
浮动元素经常和标准流父级搭配使用
为了约束浮动元素位置，我们网页布局一般采取的策略是：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。
- 如何清除浮动？
为了避免左浮动或右浮动对元素的影响，往往需要在该元素中清除浮动。在CSS中，clear属性用于清除浮动，其基本语法格式如下：
选择器{clear:属性值;}
常用方法一：使用空标记清除浮动
在浮动元素之后添加空标记，并对该标记应用“clear:both”样式，可清除元素浮动所产生的影响，这个空标记可以为<div>、<p>、<hr />等任何标记。
常用方法二：使用after伪对象清除浮动
使用after伪对象也可以清除浮动，但是该方法只适用于IE8及以上版本浏览器和其他非IE浏览器。使用after伪对象清除浮动时需要注意以下两点：
（1）必须为需要清除浮动的元素伪对象设置“height:0;”样式，否则该元素会比其实际高度高出若干像素。
（2）必须在伪对象中设置content属性，如“content: "";”。
- overflow属性的四个属性的用法、含义？
- 元素的定位的用法
18、z-index层叠等级属性：在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
19、超链接<a>的CSS属性定义：textdecoration、a:hover。
20、关于列表的CSS样式控制。
- 网页UI设计部分
- 网页用图规范：图的精度（分辨率）、颜色模式，图片类型。
宽度：1920px
可视范围：1200px（左右）
首屏Banner高度：500px-750px（600左右）
主导航条高度：60px（参考值）
一般网站的正文颜色为深灰（通用白底的情况下）
建议：#333333（最深）、#666666、#999999（最浅）
慎用：#000（纯黑）
在设计网页时，图片比例会影响画面的整体效果，所以我们通常给图片设定比例关系。16：9 1：1 4：3
- 网页标注的内容。
- 网页字体分类：衬线体、非衬线体。
- UI设计的四大基本原则：亲密、对齐、重复、对比。在网页中如何运用?
对齐：页面上的每一个元素都应与另一元素有某种视觉联系即对齐。对齐可让作品更清晰、更清爽、更整洁，提高可读性。
重复：网页设计中的视觉元素，如颜色、形状、空间关系、字体、大小等重复出现，增加条理性和统一性。
对比：基本思想是要避免页面上的元素太过相似，如字体、颜色、大小、线宽、形状、空间等。
亲密：彼此相关的项应当在物理位置上靠近，归为一组，形成一个视觉单元，而不是独立的元素。有助于组织信息，为读者提供清晰的结构。
- 掌握PS图标设计的基本操作：合并形状、减去顶层形状、与形状区域相交、排除重叠形状、合并形状组件。
- PS路径选择工具和直接选择工具的用法。
- PS钢笔工具：添加、删除锚点方法。
- 网页图标的主要功能作用。
- 网页图标的设计原则：原则： 1、尽量用偶数值； 2、尽量不引入新的形状和颜色； 3、做弧（U）不做尖（V）； 4、同层运算； 5、尽量选用标准图形。
- 网页图标的主要风格分类：块状、线性、轻质感、拟物化、MBE等。
- Banner：属于网络广告，它区别于传统媒体的优势有哪些？
- Banner的要素：字体、主题、版式、背景。如何分析一个banner广告？
- Banner的主要风格有哪些？
- Banner的主要版式有哪些？简述之优点。
- Banner的背景常用的设计方法有哪些？简述之优点。
- 网页布局方式有哪些？简述之。
- 网页配色方案。
- 网页切图主要切哪些图？
- 网页UI设计中参考线的主要作用。
- 网页UI设计师的主要职责。
扫一扫
3054
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
