击右上方红色按钮关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！

我们天天都会写HTML结构，然而，HTML本身存在一些个问题，在日常中，我们尤其需要注意这些问题，应该避开这么使用。下面我来列一下一些常见的点：

1、img标签

img元素标签可以不用写alt或title，也能正常显示。

<img src="photo.jpg"/>

2、a标签

a元素标签可以不写href属性，不过这样容易出现问题，即使添加块级元素也不会报错，但是里面的内容在浏览器解析后会发生位置偏移，如果出了问题将很难定位。

<a><h2></h2></a>

3、语义化

并不是所有的标签都是带有语义化的，div，i就是比较典型的例子，所以尽量避免在这些标签里面直接添加文字。实际项目开发中，我们常常把<i>元素标签当作页面上的icon图标来使用。

<div></div>

<i></i>

4、用对元素标签

尽管HTML规范提供了有语义化的列表元素，但我们仍然可以用下面这种方式来定义列表，而且在页面上也可以正常显示。

<div>

<span class="list-item">1</span>

<span class="list-item">2</span>

<span class="list-item">3</span>

</div>

5、属性的随意性

先看一段代码：

<div style="width:100px;height:30px;top:10px;display:relative;"></div>

上面代码中，随意添加top属性也是可以的，只是不生效且不会报错，加入display:relative;也不会提示错误，但是relative并不是display的属性。

6、table的问题

<table>

<thead>table list</thead>

<tr>

<th>list1</th>

</tr>

......

</table>

html定义了table元素，但table是一次性渲染的，如果表格内容较长就比较慢了。

7、label可有无

Date:<input type="text" name="name" />

表单输入项内容不写label也是没问题的，<label>可以定义与表单控件间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

8、不合理的标签

这些个不合理的标签 ，新标准已经弃用了。

<blink></blink>

<marquee></marquee>

<stike></stike>

总结一下：

很显然，这些糟糕的设计不仅降低了页面可读性，拖慢了页面性能，不利于SEO。而且误导了初学者对HTML的理解使用，更有可能让我们在已经出错的情况下找不到错误的原因和方向 。所以，我们必须要避免这些问题的发生。

站建设制作网站可以通过网络进行实现，比如教师和学生的互动。在线学习可老师在上课，学生在各自的家里听课，这解决了地域的问题，这就需要在学习时自己有约束力。企业有一定的实力，在创建网站时思考公司或人士。在实际工作中常常碰到公司自己制作的网站，其中的图形处理技术的确需要学习。总而言之，在制作网站时只要注意收集一些细节问题。相信即便是学习制作网站，也可以设计出让用户满意的网站。平时要多多加强自身技术的学习。可以使用锚标记来创建单页网站。而不是让网站访客浏览网页，可以直接跳到不同的点，也就是滚动的网站。倘若决定在js的道路上深入发展下去，那么制作网站要学习的东西就很多了，将来能从事很多工作，由于已经有了基础。js不仅是html5务必要会的技术，甚至已经成为前端开发的重点技术之一。

转载于佛山镐站网络科技网http://www.wangluo379.cn/zixun/gongsidongtai/1696.html

将焦点放在访客和网站体验上，这样才能够地满足需求，从而吸引和转化。学并通通过调查、反馈分析获取访客的意见。没有访客，网站就什么也不是。在图形效果的基础上进行问题的分析。从图形效果的角度出发来看，图形效果对制作网站具有重要的影响，一个网站想要吸引人的关注就务必对页面视觉设计的足够好，使得画面效果吸引人们的眼球，尤其是对一些图片类型的网站。当今在制作网站过程中技术水平仍旧存在着不足，很多图片制作的并不清晰，画面清晰度差。因而想要将网站制作的好，务必学习借鉴一些经典设计案例，学习一些优异的地方，根据自己的实际需要，促进网页制作的进步，通过不断的学习，注重各类细节，只有细节做好了，网站才能在竞争中占据优势，通过弥补自身的不足之处，将自己的水平打磨的越来越完善。

点图主要是指网页焦点位置的图片，一般焦点图可以是单张图，也可以是一组动态切换的图片的组合。由于处在终端用户视觉焦点位置因此焦点图的作用至关重要，焦点图也成为网站首页面设计的重点。焦点图样式如下所示：

常用实现焦点图或者轮播图的前端技术较多，如JavaScript技术、BootStrap组件、CSS技术等。本文主要介绍使用CSS3提供的动画功能实现简单轮播效果。首先给出轮播实现动画效果如下所示：

1、实现的基本思路

本例题设计实现图文轮播，主要包括图片的轮播与文字轮播两部分，基本思路是实现按照周期改变图层背景实现图片的轮播。改变或者移动文字图层位置实现文字部分的移动及动画效果。

2、animation与@keyframe

通过使用CSS3提供的animation属性方法，我们可以编写动画，实现元素的移动、放缩、颜色改变等动画效果。Animation主要属性包括绑定动画的名称、执行动画的实践、动画啊延迟等相关属性。基本语法如下：

对应属性值分别为动画名称、执行时间、速度曲线、延迟时间、执行次数、是否反向播放；

@keyframes与animation结合使用，主要用于实现对动画进行定义。通过定义动画时长的百分比，确定在各个阶段动画的效果。@keyframes定义形式如下：

@keyframe animation_name{
	0%{样式1}
	100%{样式2}
}

3、transform:translateX

该属性主要用于实现x轴方向元素的移动，需要在使用时提供参数值，参数即为移动的值，正负号表示移动的方向，如：

transform:translateX(-1000px);

4、改变背景background-image

CSS属性background-image主要用于设置元素的背景，常用于页面、图层的背景图片的设置。代码示例如下：

background-image:url('images/1.jpg');

CSS3动画实现焦点图效果实现

本例主要实现图文轮播效果，主要素材为轮播图片，采用了1000*600的图片5张，轮播周期为20s。图片缩略图如下：

页面主要采用div为容器实现布局，其中轮播图片所在层为父层，文字部分为子层，子层相对父层底部定位。根据图片尺寸设置子层宽度为5000，超出部分隐藏。页面布局代码如下：

页面基本HTML代码如上所示，a层为图片展示层，s层为文字展示层，c类型的div为文字容器层。页面效果如下所示：

动画实现主要在style css样式部分进行编写，定义两个动画，名称分别为mymove()与smove()，其中mymove主要用于实现图片切换，绑定到父层a上。Smove主要用于实现文字移动，绑定到s子层上。动画实现部分代码描述如下：

动画实现部分主要代码如上所示，通过@keyframe分别对mymove与smove动画进行规则编写，最终实现图文轮播的效果。本例页面布局样式部分代码如下所示：

本头条号长期关注编程资讯分享；编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见，可以联系作者，共同探讨。期待大家关注！相关文章链接如下：

前端开发-JavaScript DOM动态生成文本框

前端开发-拼图游戏（N数码问题）A*算法智能求解效果展示

前端设计-JavaScript美女拼图游戏开发实例

前端设计-教你如何快速绘制HTML5动画

前端设计-响应式页面开发基础

前端设计-Ajax技术及实例展示