day0309

day0309

网站建设流程

域名
阿里云 万网
ftp（File Transfer Protocol，文件传输协议）
SEO网站优化 :SearchEngineOptimization=[计算机]搜索引擎优化

SEM 搜索引擎营销Search Engine Marketing

web标准的组成部分都有哪些？html+css+javascript(结构+样式+行为)

HTML基本结构

表格

作用：显示数据，美观度不高

<table>
	<tr>
		<td></td>
		<td></td>
	</tr>
</table>

td和th都是单元格，th有居中和加粗效果

HTML的属性与属性值（用=）

html属性值可以不带单位，默认px，css必须带单位
水平align="center"给table是整体居中，其他就是内容居中
垂直valign="bottom"给tr和td可以，给table无效

width=“表格的宽度”
height=“表格的高度”
border=“表格的边框”
bgcolor=“表格的背景色”
bordercolor=“表格的边框颜色”
cellpadding 单元格与内容的间距，只能给table
cellspacing 单元格之间的距离，只能给table

rules必须给table
rules="all"所有的添加边框 ，单元格之间没有缝隙（虚线等变实线）
rules="cols"所有的添加列边框 ，单元格之间没有缝隙
rules="rows"所有的添加行边框 ，单元格之间没有缝隙
rules="none"所有的没有边框 ，单元格之间没有缝隙
rules="groups"所有的添加组边框 ，单元格之间没有缝隙
列边框盖行边框？

rowspan合并行，必须给td或th

colspan 合并列，必须给td或th

单元格的宽度和高度是自适应的，无法用css固定，内容多了高度会撑开

单元格的宽度和高度，最好都设置在td上

HTML的标签

分组

行分组

表格分组之后，可以方便整体去调整样式
thead表头
tbody表体
tfoot表尾

列分组

放在table里面即可

<col span="列数">/*单标签*/
<colgroup></colgroup>/*双标签*/

1个col或者1个colgroup默认代表的是一个列组，这个列组里面有多少列，看span给的数

col和colgroup的相同点和不同点
相同点：可以列分组，可以修饰样式
不同点：当给table添加属性rules设置单元格边框的时候，想要列分组有边框效果，只能用colgroup

CSS相关的属性（用：）

css:
border-spacing:0px;与html的cellspacing是一样的
设置单元格之间间距的属性，必须给table

border-collapse:collapse合并单元格边框(从里往外合并)

table-layout:fixed ;固定单元格宽度,高度不固定

empty-cells:hide;设置单元格内容为空的时候，隐藏

caption-side:right;设置单元格标题的样式，必须搭配caption标签才有效，也要给到caption标签上
caption-side:left/right/top/bottom;火狐浏览器都支持
caption-side:top/bottom;其他浏览器都支持

表单

作用：用来收集数据

HTML相关的标签

创建表单form

<form action="" method="get">
			<input type="text" name="" id="" value="111" />
			<br>
			<input type="password" name="" id="" value="222" />
</form>

输入框 input 单标签

<input/>

文本域textarea 双标签
下拉菜单select option 双标签
表单字段级
表单字段级标题

HTML相关的属性

type属性 类型

type=“类型”

1. 文本框 type=“text” value属性的作用是定义初始值

<input type="text" name="" id="" value="111" />

2. 密码框password value属性的作用是定义初始值

<input type="password" name="" id="" value="222" />

3. 提交按钮submit value属性的作用是内容修改

<input type="submit" name="" id="" value="提交" />

按钮button value属性的作用是内容修改
（input标签提交与button标签提交相同）

<button type="button">提交</button>

4. 重重按钮reset value属性的作用是内容修改

<input type="reset" name="" id="" value="重置" />

5. 单选按钮radio value属性的作用是定义初始值（传参用）
   单选框的radio name属性必须拥有相同的值

<input type="radio" name="sex" id="" value="men" checked="checked"/>男
<br><br><br>
<input type="radio" name="sex" id="" value="women" />女

6. 多选按钮checkbox value属性的作用是定义初始值

<input type="checkbox" name="hobby" id="" value="football" />足球
<br><br><br>
<input type="checkbox" name="hobby" id="" value="volleyball" checked="checked" />排球
<br><br><br>
<input type="checkbox" name="hobby" id="" value="basketball"  checked="checked" />篮球

7. 文件按钮file value属性的作用是定义初始值

<input type="file" name="" id="" value="" />

8. 图片按钮img value属性的作用是定义初始图

/*<input type="image" />定义图像形式的提交按钮。 */
/*必须把 src 属性 和 alt 属性 与 <input type="image"> 结合使用。*/
<input type="image" name="" id="" value=""  src="../day0225/img/tuwen.png" alt="submit" />

9. 隐藏按钮hidden（常用来存储初始数据） value属性的作用是定义初始值
   hidden 输入类型定义隐藏字段。隐藏字段对于用户是不可见的。隐藏字段常常存储默认值，或者由 JavaScript 改变它们的值。

<input type="hidden" name="country" value="China" />

name属性，所有form内部的标签都可以用，给目标起个名字
value 属性值
checked=“checked” 对于单选和多选有用
disabled=“disabled” 禁用
placeholder 提示信息(框内)，H5新加的，兼容性不好

textarea自带的专属属性

cols 每行字符数（一个汉字占两个字符）
rows 行数

select option

属性selected=“selected”
选中的属性用于下拉菜单，来定义第一个看到的选项

<select name="">
			<option value="">1</option>
			<option value="" selected="selected">2</option>
			<option value="">3</option>
</select>

表单字段级、表单字段级标题

在form里使用
表单字段级fieldset
表单字段级标题legend
以上2个标签搭配使用，可以实现文字在线上给的效果

<fieldset id="">
		<legend>111</legend>

</fieldset>

提示信息的标签label

label框外提示信息
for属性，用来给label做绑定相关控件的
for=“id”

<p>请点击文本标记之一，就可以触发相关控件：</p>

<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>

多个选择

multiple属性，目前是给type=“file”
multiple=“multiple”

选择图片：<input type="file" name="img" multiple="multiple" />

form专有属性

method都是给form的 方法，用来定义表单提交的时候方法是什么

get和post的区别

1. get是获取，post是传递传送
2. get可以在浏览器的地址栏上看到所有参数传递的过程，post是看不到的
3. get的安全性比较低，post的安全性比较高
4. get运输的数据量比较小，post是没有限制的

action都是给form的 提交的目的地，用来指定

表单相关的css修饰

设置placeholder的形式(双冒号：：)
用下面的可以修饰样式，但是兼容差

::-webkit-input-placeholder{
 		color:red;
 }

如果想要设置兼容好，功能比较自由的话， 用value写或者用其他标签写提示信息，定位上去联合js去书写

textarea{
	resize:none;/*去除文本域可以拖拽的效果*/
	outline:none;/*取消点击之后的边框*/

目前改不了单选复选框的样式