新手建设html5网站 第1篇
1:html (内容)
2:css (表现)
3:JavaScript (行为)
一般大家说的行为和表现从内容上分离，就是说css和JavaScript从html文档里面分离开来，比如css另建一个的专门文件，或者的专门文件。
css用来控制内容的表现(就是你看到的丰富的效果)，而JavaScript用来控制页面的动态交互的行为(就是你操作中的动态的交互)。
大致也是这样3块：头部，内容区域，页脚
新手建设html5网站 第2篇
文字的装饰效果的语法类似，只是使用的标签不同。
文字装饰效果的语法类似，只是标签不同。语法格式如下：
（其中strike标签也是被HTML5淘汰的标签）
在写数学公式或方程式时，会遇到上标和下标的写法，语法格式如下：
那么我们完成两个实例：
运行：
运行：
在网页制作过程中，特殊符号（如引号、空格等）也是由代码控制的。一般情况下，特殊符号的代码由前缀“&”、字符名称和后缀分号“；”组成，使用方法和空格符号类似，具体如下表所示：
实例：
_引用这段话_
<括起来这段话>
3×4=12
人民出版社©
效果：
在HTML5中，段落效果是通过
标签实现的，
标签会自动在其后创建一些空白，浏览器会自动添加这些空间。语法格式如下;
段落文字
其中，可以使用成对的
标签来包含段落，也可以使用单独的
标签来划分段落。
实例：选择李白的《早发白帝城》来展示
标签位置不同所表现的不同段落效果
《早发白帝城》 朝辞白帝彩云间，千里江陵一日还。 两岸猿声啼不住，轻舟已过万重山。
《早发白帝城》
朝辞白帝彩云间，千里江陵一日还。 两岸猿声啼不住，轻舟已过万重山。
《早发白帝城》
朝辞白帝彩云间，千里江陵一日还。
两岸猿声啼不住，轻舟已过万重山。
让我们看看随着
标签位置不同所展现的三种不同的效果：（上面提到的空格属性值 效果也得到了体现）
从上图的效果我们可以看到：第一种当我们用
标签把所有文字包含起来时，段落是一整段没有换行效果的，第三种当我们用三对
标签实现三行展示效果时，文字的行间距又有点太大了，这时我们可以使用换行标签
来文字的紧凑换行显示。 语法格式如下：
一段文字
一段文字
如果需要多次换行，可以连续使用多个换行标签。对比一下使用多个
标签和
标签的换行效果：
《早发白帝城》
朝辞白帝彩云间，千里江陵一日还。
两岸猿声啼不住，轻舟已过万重山。
《早发白帝城》
朝辞白帝彩云间，千里江陵一日还。
两岸猿声啼不住，轻舟已过万重山。
效果如图：
一般我们制作网页是用各种标签对文字进行排版的，但实际做项目的时候会需要一些特殊的排版效果，这时使用标签控制非常麻烦，解决办法就是使用原格式标签进行排版，如空格、制表符等。
让我们做一个实例，运用特殊的文字符号，绘制出《恶搞之家》的布莱恩字符画，用来表示网页错误页面内容（404页面）：
运行：
布莱恩小贴士提醒您：
水平线用于段落与段落之间的分隔，使文档结构清晰明白，文字的排版更整齐。水平线自身具有很多属性，如宽度、高度、颜色、排列、对齐等，在HTML5中经常会用到水平线，合理使用水平线可以获取非常好的页面装饰效果，一篇内容繁杂的文档，如果合理放置几条水平线就会变得层次分明，变于阅读（本文也用了许多水平线^.^）。
在HTML5中使用
实例：
《鬼灭之刃 立志篇》
《鬼灭之刃 无限列车篇》
《鬼灭之刃 游郭篇》
《鬼灭之刃 锻刀村篇》
《鬼灭之刃 柱训练篇》
《鬼灭之刃 无限城篇》
运行：
如上图所示，默认情况下水平线在网页中显示是100%的宽度，在我们实际创建网页时，可以对水平线的宽度进行设置，语法格式如下：
在这个语法中，“水平线的宽度” 可以是确定的像素值，也可以是窗口宽度值的百分比。
实例：
我们的故事开始
故事的开头总是这样,
适逢其会，猝不及防。
故事的结局总是这样，
花开两朵，天各一方。
我们的故事结束
运行：
新手建设html5网站 第3篇
分析并统计目标用户使用设备的基本情况，清楚明确设备的类型和屏幕大小，例如，移动设备手机端以及平板端，在设计以及实现的时候要注意添加收拾功能，至于屏幕的尺寸，在设计时要注意手机以及平板端的横向以及纵向的大小，电脑端则要注意屏幕的普屏及宽屏。
设备类型：包括移动设备(手机、平板)和PC。对于移动设备，设计和实现的时候注意增加手势的功能。屏幕尺寸：包括各种手机屏幕的尺寸(包括横向和竖向)、各种平板的尺寸(包括横向和竖向)、普通电脑屏幕和宽屏。需要考虑的问题：某个页面进行响应式设计时其适用的尺寸范围是哪些?例如，某搜索网站的搜索结果页面，跨度可以从手机到宽屏，而该首页，由于结构过于复杂，想直接迁移到手机上，不太现实，不如直接设计一个手机版的首页。结合用户需求和实现成本，对适用的尺寸进行取舍。比如一些功能操作的页面，用户一般没有在移动端进行操作的需求，没有必要进行响应式设计。
新手建设html5网站 第4篇
html5网页制作流程。针对确定下来的几个尺寸分别制作不同的线框原型，需要考虑清楚不同尺寸下，页面的布局如何变化，内容尺寸如何缩放，功能、内容的删减，甚至针对特殊的环境作特殊化的设计等，这个过程需要设计师和前端开发人员保持密切的沟通。
需要强调一下，响应式设计的目的在于，针对不同设备的屏幕规格区间，进行功能及内容的输出格式预设，所以网站制作中只需要选取一些具有代表性的设备，而不必顾全所有已知的规格类型，我们制作线框原型的主要目标是规划样式背后的逻辑。
新手建设html5网站 第5篇
显示效果：
这里值得一提的是在编程软件中代码状态可能是这样的：
这里的align显示是被划去的状态，但是不影响运行效果。这是因为在HTML5中align 属性已经不再被推荐使用，就是它过时了，是之前HTML4的东西，因为它不是语义化的标签，也不符合CSS布局的最佳实践。（其实在面试的时候面试官会问到一些HTML5和HTML4 的不同，这需要我们慢慢积累），现代Web开发推荐使用CSS来控制元素的对齐方式（还没学到CSS，我们慢慢操作不要着急，这里简单提一下）：
新手建设html5网站 第6篇
(1)、尽量保持小屏幕规格样式的简洁。在UI元素风格方面，可以多与前端开发人员交流，尽量采用可以通过CSS3实现的常规风格样式，减少背景图片的使用。
(2)、要保证内容的字体字号在所有设备中都足够可读，尤其是在手机上。
(3)、与传统Web设计开发相似，最终产出的页面必定会与视觉稿有所出入，尤其对于响应式站点来说，由于在布局结构和细节样式等方面都需要有调整变化的能力，所以在开发过程中产生设计还原度方面问题的几率会更大。