20170315学习笔记-前端

谷歌浏览器
body   margin 8px
p     margin 16px
h1-h6 margin


ul margin 16px
ol margin 16px
li list-style
dl margin-top/margin-bottom 16px
dd margin-left 40px


块元素：1.独占一行
2.支持宽高
3.嵌套（包含）下，子块元素宽度（没有设置情况下）和父块元素宽度默认一致。


内联元素：1.在一行上显示
 2.不支持宽高
 3.宽度由内容撑开


 
h1 在一个页面里只能出现一次  seo（搜索引擎优化）
font    文本标签  <font size="6" color="red">很少用。14期威武</font> 


strong  文本加粗  更语义化  
b 文本加粗  工作里尽量使用strong
 
em 文字倾斜  更语义化
i 文字倾斜  工作里尽量使用em


del 删除线标签  更语义化
s 删除线标签  工作里尽量使用del


ins 下划线标签  更语义化
u 下划线标签  工作里尽量使用ins


sup 上标
sub 下标


列表
无序
<ul type=""></ul>
type=”square”      小方块
Type=”disc”       实心小圆圈
Type=”circle”      空心小圆圈


有序
<ol type="" start="3"></ol>   start 决定了开始的位置
type=”a”    abcde...
Type=”A”    ABCDE...
Type=”1”    12345...


自定义列表
<dl>
<dt>小标题</dt>
<dd>解释标题</dd>
<dd>解释标题</dd>
<dd>解释标题</dd>
</dl>


音乐标签
<embed src="1.mp3" hidden="true" />   hidden 隐藏


滚动
<marquee behavior="" direction=""></marquee>




charset 编码


ascll 
ansi
unicode
Gbk 
Gb2312
Big5   繁体字符
Utf-8  通用字符集




◆
<!-- 字符编码 -->
<meta charset="UTF-8">
<!-- 关键字 -->
<meta name="keywords" content="Java培训,Android培训,安卓培训。逗号是英文逗号关键字seo 做得好排名越靠前">
<!-- 网页描述 -->
<meta name="description" content="传智慧,似的看得浮点">
<!-- 网页重定向 5秒过后跳转到http://www.baidu.com-->
<meta http-equiv="refresh" content="5;http://www.baidu.com">
<!-- 链接外部样式表文件 -->
<link rel="stylesheet" href="">
<!-- icon图标 -->
<link rel="icon" href="favicon.ico">


◆
meta 的属性有两种：name和http- equiv。
name属性主要用于描述网页，对应于content（网页内容）         
    1、<meta name="Generator" contect="">用以说明生成工具（如Microsoft FrontPage 4.0）等； 
　　2、<meta name="KEYWords" contect="">向搜索引擎说明你的网页的关键词； 
　　3、<meta name="DEscription" contect="">告诉搜索引擎你的站点的主要内容； 
　　4、<meta  name="Author"  contect="你的姓名">告诉搜索引擎你的站点的制作的作者； 
　　5、<meta   name="Robots" contect= "all|none|index|noindex|follow|nofollow"> 
其中的属性说明如下： 
　　设定为all：文件将被检索，且页面上的链接可以被查询； 
　　设定为none：文件将不被检索，且页面上的链接不可以被查询； 
　　设定为index：文件将被检索； 
　　设定为follow：页面上的链接可以被查询； 
　　设定为noindex：文件将不被检索，但页面上的链接可以被查询； 
　　设定为nofollow：文件将不被检索，页面上的链接可以被查询。 


◆
表格
展示数据，是对网页重构的一个有益补充
<table>   表格
<caption>表头</caption> 表头
<tr> 行
<td><td> 列
<td><td>
<td><td>
</tr>
<tr>
<td><td>
<td><td>
<td><td>
</tr>
</table>


属性：
border="1"   边框
cellspacing="0" 单元格与单元格的距离
cellpadding="10"内容距边框的距离
bgcolor="yellow"表格背景颜色
align="center"  center/left/right 如果直接给table用，就是table整个居中；如果给tr/td用，就是tr/td的内容居中


<table border="1" width="500" height="300" cellspacing="0" cellpadding="10" bgcolor="yellow">
<tr align="center">
<td>张三</td>
<td>18</td>
<td>挖掘机</td>
</tr>
<tr>
<td>马六</td>
<td>20</td>
<td>大前端</td>
</tr>
</table>
表格的标准形式table thead tbody tfoot  标准结构全写有利于网页的seo  不写也没错


单元格合并
colspan 合并行
rowspan 合并列


表格的标题
th    表格标题
bordercolor 边框颜色
valign="top/bottom/middle"内容垂直对齐方式 默认是middle




◆
表单form
表单的作用是收集信息。


<form action="1.php" method="post">
用户名：<input type="text" name="username">
密码：<input type="password" name="pws">
<input type="submit">
</form>


属性：action:处理信息
method=”get | post”   
get通过地址栏提供（传输）信息，安全性差。
post通过1.php来处理信息，安全性高。




文本输入框<input type="text" maxlength="6" readonly="readonly">
密码输入框<input type="password" name="pwd">
属性：
maxlength="6"    限制输入字符长度
readonly=”readonly”  将输入框设置为只读状态（不能编辑）
disabled="disabled"  输入框未激活状态
name="username"   输入框的名称
value="默认内容"     将输入框的内容传给处理文件




<!-- 单选框 -->
<label for="man">男</label>
<input type="radio" id="man" name="gender" checked="checked">
<label for="woman">女</label>
<input type="radio" id="woman" name="gender">
只有name的值设置相同的时候，才能实现单选效果。
checked 设置默认选中项




省（市）:<select>
<option>河北</option>
<option>山西</option>
<option>山东</option>
<option selected="selected">北京</option>
</select>
<select multiple="multiple">
<option>河北</option>
<option>山西</option>
<option>山东</option>
<option selected="selected">北京</option>
</select>


属性：
multiple="multiple" 将下拉列表设置为多选项
selected="selected" 设置默认选中项目


市（区）:<select>
<optgroup label="北京市">
<option>昌平区</option>
<option>海淀区</option>
<option>朝阳区</option>
<option>大兴区</option>
</optgroup>
<optgroup label="广州市">
<option>昌平区</option>
<option>海淀区</option>
<option>朝阳区</option>
<option>大兴区</option>
</optgroup>
</select>
<optgroup></optgroup>   对下拉列表进行分组。
label=””  分组名称




<!-- 多选框 -->
<input type="checkbox" checked="checked">喝酒
<input type="checkbox">抽烟
<input type="checkbox">烫头


<!-- 多行文本框 -->
<textarea name="" id="" cols="30" rows="10"></textarea>
cols  控制输入字符的长度。
rows  控制输入的行数


<!-- 文件上传控件 -->
<input type="file">


<!-- 文件提交按钮 -->
<input type="submit">
可以实现信息提交功能


<!-- 普通按钮 -->
<input type="button" value="普通按钮">
不能实现提交信息，配合JS使用。


<!-- 图片按钮 -->
<input type="image" src="按钮.jpg">
可以实现信息提交功能


<!-- 重置按钮 -->
<input type="reset">
将信息重置到默认状态




表单信息分组
<fieldset></fieldset>    对表单信息分组
<legend></legend>      表单信息分组名称
<form action="">
<fieldset>
<legend>分组信息</legend>
<input type="submit">
<input type="text">
<input type="passwors">
<input type="reset">
<input type="button">
<input type="flie">
<input type="image" src="按钮.jpg">
<input type="radio">
<select name="" id="">
<option value=""></option>
</select>
<input type="checkbox">
</fieldset>
</form>


H5补充表单控件
<!-- 网址控件 -->
<input type="url">
<br>
<!-- 日期控件 -->
<input type="date">
<br>
<!-- 时间控件 -->
<input type="time">
<br>
<!-- 邮件控件 -->
<input type="email">
<br>
<!-- 数字控件 step设置递加值-->
<input type="number" step="5">
<br>
<!-- 滑块控件 -->
<input type="range" step="50">
<br>
<input type="submit">


标签语义化
标签语义化意义：
1.网页结构合理
2.有利于seo：和搜索引擎建立良好沟通，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取；
3.方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）
4.便于团队开发和维护


好的语义化的网站标准就是去掉样式表文件之后，结构依然很清晰。


1：尽可能少的使用无语义的标签div和span；
2：在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
3：不要使用纯样式标签，如：b、font、u等，改用css设置。
4：需要强调的文本，可以包含在strong或者em标签中strong默认样式是加粗（不要用b），em是斜体（不用i）