Web学习.第一天
标签
一个标签可以有任意个属性，标签不区分大小写，标签是闭合的
<html></html> 外围最大的标签，用来表示HTML文件
<head></head>头标签
<title></title>网页的标题标签
1)<a></a>超链接标签,对标签
固定格式<a href=""></a>在引号里写想要链接的页面，在括号中间写超链接字，即鼠标点击的地方
例如：<a href="http://www.baidu.com">百度</a>点击页面出现的百度两个字，就会进入百度搜索的界面
target _blank 跳转页面在新标签上打开
title 当鼠标停在标签上时，会显现title的内容，提示性的文字
2)<img src="" alt="">插入图片的标签，单标签
在src的引号里写图片的名字，或者路径，可以用width和height修改图片的宽和高
3)<!-- -->注释标签
用于开发者看注释，并不在页面中显示Ctrl+？加或者取消注释
4)文字标签
<strong>加粗标签</strong>
<em>使文字倾斜</em>
<u>文字下划线</u>
<del>使文字有删除的效果</del>
<strong><u>即加粗又有下划线</u></strong> 标签的嵌套
5)标题标签
<h1></h1>
h1标签有很强的强调作用，一般一个页面只使用一个，字体最大
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>字体最小
6)控制台，使用键盘上的f12键
7)<meta name="" content=""/>网页关键词描述，写在head里面，用于别人抓取网站的内容
指定关键词，在content里写上关键词，数量一般3-5个，用英文逗号隔开
<meta name="keywords" content="保时捷炮车,劳斯莱斯"/>
指定网站描述，一般80-200字，保证语句通顺,尽量体现关键词
<meta name="description" content="进口跑车详情介绍业务,为广大网友提供一手资讯"/>
8)<meta http-equiv="refresh" content=""/>网页定时跳转
在content的引号里写上时间，还可以加上时间到了之后跳转的页面
<meta http-equiv="refresh" content="5;url=http://houdunren.com"/>
9)DW,HbuiderX MAMP三个学习开发环境
10)网页乱码的解决方案
如果遇到页面乱码的问题，一定不要用hbuider、sublime来解决，强烈推荐emeditor
11)a标签，锚链接，在页面内部进行跳转
快速跳转到页面指定的地方。
<h2 id="biaoti2>标题1</h2>
文章1
<h3>标题2</h3>
文章2
<a href="#biaoti2">快速跳转到标题2</a>
当点击快速跳转到标题2时，跳转到标题2的区域，适合页面中有很多内容时使用。
12)返回顶部效果的实现
<a href="#">返回顶部</a>
13)pre标签，保留空格和换行符
浏览器解析代码时，会将连续的空白字符忽略，或者解析成一个空格，所以使用pre标签。
14)HTML实体
把一些有特殊含义的符号，换一种写法。
h1标签的写法是：<h1>后盾人</h>
在网页中显示为：h1标签的写法是：<h1>后盾人</h>
>:< <:>
版权符号©；空格
15）img标签title和alt属性
<img src="图片名字"title="文字提示" >
在img中使用title，鼠标在图片上时会有提示
<img src="princ.jpg" width="500" title="点击查看大图" alt="一本书的封面"/>
在img中使用alt，当图片名写错时，会显现alt里的内容。“百度在抓取图片时也是根据alt里的内容抓取”
16)图像热点效果的实现
点击图片，跳转到一个网站
<a href="http://www.baidu.com">
<img src="prince.jpg" >
</a>
图像地图、图像热点：点击一张图不同的部分，打开不同的网址
使用DW软件，地图热点模式，可以任意调节不同的地方。
17)网页中常见的图片的格式
JPG不支持透明度，不支持动画，色彩丰富，画质损失小，压缩比高（类比原图片）
PNG支持透明度，不支持动画，色彩丰富，体积会稍大
GIF支持透明度，支持动画，图片颜色较少，
BMP不支持透明度，不支持动画，色彩丰富，体积较大
18)相对路径，绝对路径
相对路径：相对于起点查找，起点是当前代码所在的文件所在的目录
绝对路径：带有完整的
../基于起点的位置，往上找一层
../../基于起点的位置，往上找两层
19)列表元素
第一种方式：无序列表
<ul>
<li></li>
<li></li>
</ul>
第二种：有序列表
<ol>
<li></li>
<li></li>
</ol>
第三种：自定义列表（有标题的列表）
<dl>
<dt>标题</dt>
<dd>元素1</dd>
<dd>元素2</dd>
</dl>
20)表格元素
<table></table>声明一个表格
<tr></tr>声明表格中的行
<td></td>声明表格中具体的单元格（td*6--table键，会生成六行td）
表格是横平竖直的，每一行单元格高度、数量一样，每一列单元格的宽度一样
<table> 此表格是一行六列，可在table里设置border的宽细<table border="1">
<tr> tr*4>td*6快捷方式
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
21)表格常用属性
table有宽度和高度两种属性 <table border="1" width="800" height="550">
tr高度，只表示这一行的高度 <tr height="200" bgcolor="antiquewhite" align="center" valign="middle">
td宽度和高度可单独作用于一个单元格，也可设置颜色，valign<td width="200" bgcolor="yellow" valign="top">周二</td>
bgcolor用来设置颜色
align valign 改变单元格中文字的位置、加在table里表示整个表格居中
22)表格的合并
第一种方法：首先确定要合并的单元格，其后保留要合并的单元格的第一个，删掉其他的，
最后给保留下来的单元格指定横向或纵向单元格数量。
合并左右关系的单元格，用colspan
合并上下关系的单元格，用rowspan
例如：<td colspan="3">yingyv</td>
例如：<td rowspan="2">shengwu </td>
23)表单元素
form表示这是一组表单，发送的时候会有form里所有的内容一起打包发送过去
<form>
<input type="text">单行文本
<input type="password">密码框
<input type="radio">单选按钮
<input type="checkbox">多选按钮
<input type="hidden">隐藏域
<input type="file">文件域
<input type="reset">重置按钮
<input type="submit">提交按钮
<textarea></textarea>多行文本
<select>
<option></option>
<option></option>
</select>下拉列表
</form>
24)表单的发送
在form里添加发送方式get或者post，在action里添加发送的位置。
<form method="post" action="hd.php">
在文本里要加上name属性，提醒接收方你所发送的内容
<input type="text" name="username">
同一组单选按钮的name属性值要一样，发送的时候是发送被选中的单选按钮的value属性值
男<input type="radio" name="sex" value="1" >
女<input type="radio" name="sex" value="0">
同一组多选按钮的name值一样，并且属性石后要加中括号
良田百亩<input type="checkbox" name="family[]" value="liangtian">
家有豪车 <input type="checkbox" name="family[]" value="haoche">
25)表单常用属性
单行文本可以加上value值，在网页中显示默认值
单行文本可以加上disable，代表禁用，修改时这一行文本无法修改
在输入密码的文本框里可以加上maxlength，表示可以输入的最大值
例如：maxlength=8，在密码框里只能输入8位数
单选框check，来指定默认的值
下拉列表项默认选中使用selected，加上size表示显示的下拉选项个数，
26)表单的发送
使用localhost，并没有调试成功，MAMP显示端口号被占用，估计是与之前的设置冲突