html基础02

meta标签和link标签

xt+tab:xhtml transitional

xf+tab：xhtml framset

xs+tab：xhtml strict

！+tab--->h5标签结构

meta标签：<meta charset=''编码格式字符集'  >

                   编码ascII识别abc和加减乘除   ansi满足英语   unicode识别日文韩文  gbk/gb2312中文  big5繁体字符  utf-8支持180-280不同语种通用字符集

                   关键字：<meta   name=‘keywords’给seo（搜索引擎的优化）看，排资源排名   content=‘关键字眼’>

                   网页描述：<meta   name=‘description’   content=‘描述’>给seo看

                   网页重定向：<meta   http-equiv=‘refresh’   content=‘5；网页’>5秒跳转到哪

link标签：链接外部样式表文件 <link rel=''stylesheet''   href=''1.css''>

                  网页图标 <link rel=''icon''   href=''图标名字''>

表格行与列：

显示数据，是对网页重构的有益补充。

<table  border=‘边框’  width=‘宽’  heigh=’高‘   cellspacing=’单元格距离‘ cellpadding=’内容到边框距离‘  align=’整个表格对齐方式left/right/center‘  bgcolor=“背景颜色’>

    <tr>     行

         <td align=’数据对齐方式‘>    列

         </td> 

    </tr>

</table>

表格的标准结构

<table>
               <thead>
                         <tr><td></td></tr>
                </thead>
                <tbody>
                         <tr><td></td></tr>
                </tbody>
                <tfoot>
                         <tr><td></td></tr>
                </tfoot>
</table>

sublime里可以：table>tr*3>td*3  

表头和单元格合并

<caption>表头标签</caption>

<td colspan='合并同一行的几列'  rowspan='合并同一列的几行 ><td>

表格标题，内容垂直对其方式，边框颜色

表格标题--表头<th></th>

bordercolor=‘边框颜色’

内容垂直对其方式 valign=‘top / 默认middle / bottom’

细线表格

背景带颜色table的bgcolor=‘颜色’

单元格白色tr的bgcolor=‘颜色’    

单元格距离变小cellspcaing=‘1’

表单：收集信息。

提示信息+表单控件   

<form action='处理信息'  method='方法：get通过地址栏提供（传输）信息   / post通过文件处理信息' ></form>

文本输入框：<input type='text'  name=''名字  value='默认值' maxlength=‘限制输入字符最大长度’  readonly=‘readonly 只读，不能写’ disabled=‘disabled未激活状态’>

密码输入框：<input type='password'  name=''/>

单选框：<input type='radio'  name=''相同名字，才会有单选效果’   checked=’checked‘默认选中  >   当两个默认选中

从浏览器解析，从上往下读，当两个默认选中，下面选中会把上面覆盖。

表单之下拉列表

<select>

<optgroup label='所属分组'></optgroup>

        <option selected=’selected‘默认选中   multiple=’multiple设置为多选项‘>内容</option>

</select>

表单之多选框，按钮，信息分组

多选框<input type='checkbox'  name='' checked=’checked‘默认选中 />

多行文本框：<textarea   cols='控制字符长度'  rows='行数''></texteara>

文件上传控件：<input type='file'   />

按钮：<input type='button不能实现提交信息配合js使用/ reset 重置 回归默认状态 / submit可以信息提交 '  name=''/   value=’按钮字‘>

图片按钮：<input type='image '  src=''/ 可以信息提交  >

<fieldset>表单信息分组</fieldset>

<legend>表单信息分组名<legend>

h5表单控件

网址控件<input type='url'>网址格式

日期控件<input type='date'>年月日

时间控件<input type='time'>时分秒

邮件控件<input type='email'>xxx@xx.com

数据控件<input type='number'  step=’增加减少的量‘>

滑块控件<input type='range'  step=’增加减少的量‘>

标签语义化：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）

意义：网页结构合理。

            有利于Seo：和搜素引擎建立良好的沟通，有了良好的结构和语句，使你的网页内容自然容易被搜索引擎抓起。

             方便其他设备解析

             便于团队开发和维护。

好的语义化网站的标准是：去掉样式表文件之后，结构依旧清晰.

注意：少于无语义div与span

            在语义不明显，既可以使用div或p时，尽量yongp，p在默认情况下有上下间距，对兼容特殊终端有利

            不要使用纯样式标签，如：b，font，u等，改用css样式

            需要强调文本，可以包含在strong（加粗）或者em（斜体）下