8. 知道的网页制作会用到的图片格式有哪些?
webp:WebP 格式, 谷歌 (google) 开发的一种旨在加快图片加载速度的图片格式.
并能节省大量的服务器带宽资源和数据空间. Facebook Ebay 等知名网站已经开始测试并使用 WebP 格式.
Apng: 是 PNG 的位图动画扩展, 可以实现 PNG 格式的动态图片效果, 有望代替 GIF 成为下一代动态图标准.
9. 文本标记
1. 特殊字符
1. 表示一个空格
2.< 表示一个< 3.> 表示一个>
4.© 表示版权
5.¥ ¥
2. 文本样式
1.<b></b> : 加粗
2.<i></i> : 斜体
3.<u></u> : 下划线
4.<s></s> : 删除线
5.<sup></sup> : 上标
6.<sub></sub> : 下标
10. 什么是锚点
锚点就是网页中一个记号, 可以通过超级链接跳转到该记号位置处.
1. 定义锚点
1. 使用 a 标记的 name 属性定义锚点
<a name="锚点名称"></a>
2. 使用任意标记的 id 属性定义锚点
<ANY id="锚点名称"></ANY>
2. 链接到锚点
- <a href="# 锚点名称">本页面</a>
- <a href="url# 锚点名称">其它页面</a>
11.div+CSS 的布局有什么优点?
(1)改版的时候更方便 只要改 CSS 文件.
(2)页面加载速度更快, 结构化清晰, 页面显示简洁.
表现与结构相分离.
(3)易于优化 (seo) 搜索引擎更友好, 排名更容易靠前.
12. 行内元素有哪些? 块级元素有哪些? 空 (void) 元素有那些?
首先: CSS 规范规定, 每个元素都有 display 属性, 确定该元素的类型, 每个元素都有默认的 display 值, 如 div 的 display 默认值为 "block", 则为 "块级" 元素; span 默认 display 属性值为 "inline", 是 "行内" 元素.
(1)行内元素有: a b span img input select?
(2)块级元素有: div p ul ol li dl dt dd h1-h6
(3)常见的空元素: br - 换行, hr - 水平分割线;
13.iframe 有那些缺点?
1.iframe 会阻塞主页面的 Onload 事件, 会影响页面的并行加载;
2. 搜索引擎的检索程序无法解读这种页面, 不利于 SEO;
改进: 通过 JavaScript 动态给 iframe 添加 src 属性值, 这样可以绕开以上两个问题.
14.Label 的作用是什么? 是怎么用的?
label 标签来定义表单控制间的关系, 当用户选择该标签时, 浏览器会自动将焦点转到和标签相关的表单控件上.
15. 隐藏元素的几种方法
- (1)display:none;
- (2)visibility:hidden;
- (3)opacity:0;
- (4)position:absolute; left:-10000px;
16. 简述一下 src 与 href 的区别.
src 用于替换当前元素, href 用于在当前文档和引用资源之间确立联系.
17. 实现不使用 border 画出 1px 高的线, 在不同浏览器的标准模式与怪异模式下都能保持一致的效果
<div style="height:1px;overflow:hidden;background:red"></div>
18. 如何给背景图片加上超链接
- <div class="swiper-slide"
- style='background:#dedede url() no-repeat center center;background-size:contain'>
- <a class="banner-a"rel="nofollow" href="#"></a>
- </div>
- .banner-a{
- width:100%;
- height: 8rem;
- display: inline-block;
- }
19. 清除浮动的方法有哪些?
第一种: clear:both
在父元素的里面添加一个空的 clear 的 div(跟浮动的子级同级), 然后再为这个类添加属性值 clear:both; 便可以清除浮动.
第二种: overflow:hidden
在父元素的样式中添加 overflow: hidden; 也可以清除浮动, 如下 CSS 代码, 但不提倡使用这个方法, overflow: hidden; 还有一个意思就是隐藏超出的部分, 处理不好还是会给页面带来麻烦.
第三种: clearfix(推荐使用)
1. 在父集元素类名中添加 clear-fix
2. 写伪类样式
- <style>
- .clear-fix::after {
- content:"";
- display: block;
- clear:both;
- }
- </style>
- <div class="header-line clear-fix">
- <div class="header-logo">
- <a class="logo"href="https://www.meisaas.com/index.html">样式方案</a>
- </div>
- </div>
来源: http://www.bubuko.com/infodetail-3096675.html