web前端开发实践

一、web前端开发先备知识

1.web前段开发是创建web页面并呈现给用户的过程。

前端开发，就是是通过HTML、CSS和JavaScript（3个目前最流行的技术），以及衍生出来的技术、框架、解决方案，来实现互联网产品的用户界面交互。

2.web前端开发核心技术（3部分组成：结构、表现、行为）

（1）HTML:（超文本标记语言）简单可以理解为“搭建结构”，它通过标记符号来标记要显示的网页中的各个部分，从而使网页以丰富多彩的形式展示出来。

（2）CSS：（层叠样式表）可以理解为“排版” ，它负责装饰页面。

（3）JavaScript：（应用于客户端的脚本语言）， 添加各式各样的动态功能，使HTML有更好的浏览效果。

3.web前段开发其他技术

（1）SEO（搜索引擎优化）

（2）服务器端技术

4.4种前段开发工具

（1）webstorm

（2）Dreamweaver

（3）Sublime Text

（4）Hbuilder

5.建立正确的站点结构

网页，网站，域名，URL（ ）

#######

<h1 align = "left" >

<p> 向哪一方向对齐：left左，center居中，right右 </p>

<h1 align = "left" style = “color：blue ；font-size：38px” >

<p>style属性，color颜色，font大小</p>

<hr width = "600px" align = "right" color = "red" size = "4px">

<p> hr是显示一条水平线，width长度，size宽度 </p>

比如：我要在网页的开头显示一条分割线，用红色，左边靠齐，并长度为800px，宽度6px

<b> 文本设置加粗的效果 </b>

<strong>强调加粗的效果,设置加粗效果时建议使用strong</strong>

<p>行内元素：一行可以显示多个元素。一块元素：一行只能显示一个元素 </p>

<p>元素是从一开始标签开始到结束标签之间的所有代码</p>

<p>元素需要通过标签来呈现标签就是元素的表现形式</p>

<span>容器，是一个行内元素</span>

比如：“我的世界里很美丽”，我想让美丽这个词变成蓝色，加粗为700，

<span style="color:blue; font-weight:700;">美丽</span>

web中，书名号不能直接打出来，比如打出唐诗三百首

<p>[1]:选自&lt;&lt;唐诗三百首&gt;&gt;</p>

<p> sup上标，sub下标 </p>

<img src = "引用图片的位置" alt=“网页不被显示时出现的图片提示名 ” title = “鼠标追踪图片会显示的文案” >

<img align = "right" src ="">

<img align = "left" hspace = "15px" src = "">hspace表示图片左右文字的间隙

不加hspace时：

<img vspace = "20px" > vspace表示图片周围间隙

<p> title照片的属性

对于图像元素，设置大小的时候只需设置一个，比如，只需设置长度或高度

下面看一下总体效果

img中通常保存跟主本有关的图片