Web前台

*与用户进行交互，呈现视觉效果，收集用户信息
*B/S结构：浏览器（Chrome，Firefox），服务器

web前台：html,css,javascript

HTML

-提供内容
-通过标签/标记来设置页面上的内容
-语法格式
单标签：由一个标签组成。例如<hr />
双标签：由“开始标签”和“结束标签”两部分构成。例如<p></p>
-把标签按功能分类
1.文档标签
2.图像标签
3.表单标签
4.超链接标签

CSS

JavaScript

HTML应用

注释的使用
例：快捷键：Ctrl+/

语法

格式标记

语法不分大小写

换行；
<p>换段落标记；
<center>让标记居中；
<li>列表项目标签每个列表使用一个<li>标签；
<ui>声明无序号列表；

---

加一条水平分割线；
<div>分区显示标记，相当于盒子可以嵌套使用；
<ol>声明有序号列表；
&nbsp空格；
&copy版权号；
&reg注册商标；

文档标记

<h>字体大小；
<b>字体变粗；
<i>斜体；
_{文字下标字体标记；
^{文字上标字体标记；
<strong>语义标签表示强调字体变粗；}}

超链接标记

格式<a href= " " target="打开方式" name="页面锚点名称">链接文字或者图片</a>
例：<a href="http://www.baidu.com">化学</a>;
target属性：定义超链接的打开方式
target+值（_seif,black,_parent,_top）
值：
1.默认值，在当前窗口中打开链接；
2.在一个新窗口中打开链接；
3.在父窗口中打开页面（框架中使用较多）
4.在顶层窗口中打开文件（框架中使用较多）；
name锚点的含义是所谓的回到顶点的形式

图像标记

格式：<img src="路径/文件名.图片格式" width="属性值" height="属性值" border="" alt="属性值">
alt:当网页上的图片被加载完成后，鼠标移动到上面去，会显示这个图片指定的属性文字。
如果图像没有下载或者加载失败，会用文字来代替图像显示。
搜索引擎可以通过这个属性的文字来抓取图片。

注意：<img>为单标记，不需要用</img>闭合。

在加载图像文件的时候，文件的路径或者文件名文件格式错误，将无法加载图片。

表单标记

form；<input>;botton;<select>;<textarea>.

form标记

<form action= "服务器端地址" name="表单名称" method="post get">....</form>
例：<form action="#" method="post">...</form>

input（单标签）

放在form内部，用来收集用户输入的。
例：创建各种用户输入框
<input type="text">
*单行文本框：
type="password"（表示一个密码输入域）
type="text"（表示一个文本输入域）
*按钮
type="submit"提交按钮到服务器
type="reset"重置按钮成默认值
type="button"普通按钮没有数据提交功能
*单选框和复选框
单选框：
例：<input type="radio">男<input type="radio">女
成组才能组成单选
复选框：
<input type="checkbox">...<input type="checkbox">....<input type="checkbox">...<input type="checkbox">
*隐藏域：
<input type="hidden">为隐藏表单域
<input type="date">定义date控件
<input type="color">定义拾色器
<input type="e-mail">定义e-mail地址控件
*placeholder属性：显示灰色显示，有输入时消失，消除后再显示。
*name属性：只有设置name属性的表单元素才能在提交表单时传递他们的值。
*value属性：
对于button，reset，submit类型，指定义按钮上的文本
对于text，password，hidden类型，指定义输入字段初始（默认）值
对于CheckBox，radio，image类型，指定义与input元素相关的值，当提交表单时该值会发送到表单的action URL。
form标记是括所有输入的input的
required属性：必须输入项，表单提交时会自动检查
autofocus属性：刷新页面时自动获取焦点。
size属性：设置控件的长度。
maxlength属性：输入框中最大允许输入的字符数。

botton标记（双标签）

定义一个按钮
注意：清始终为<botton>元素规定type属性。否则会默认提交表单。botton标记当中可以放数据
例：<botton><img src="../test1.png"></botton>

select标记

创建下拉列表
格式：<select name="" size="value">
<option value="value" >选项1</option>
<option value="value" >选项2</option>
<option value="value" >选项3</option>
</select>
*selected属性：指定默认的选项。

<textarea>标记

多行文本框，能够输入多行文本的区域
格式：<textarea name="name" rows="value" cols="value" value="value">.....<texearea>
rows和cols属性分别用来指定，现实的行数和列数，单位是字符个数。