页面制作之HTML

标签

---

　　常用属性

• id
• class
• style
• title

　　　　— <a href ="/" title="收藏">收藏</a>(用于hover时出现title提示)

---

　  文档章节

• body
• header

　　　　　可以包括标题、Logo、搜索表单、独立章节头部等；

• nav

　　　　可以包括有导航性质的内容；

• aside

　　　　　和主要内容无关区域，如侧边栏、插入广告、工具性内容；

• article

　　　　   主题内容，独立可重复的内容，如论坛的帖子、博客的评论、新闻文章等独立内容，相邻article标签的内容不具有关联性；

• section

　　　　　主题内容，内容的专题组，一般包含在article标签中带标题，相邻section标签中的内容是有关联性的；

• foorter

　　　　　可以包括章节尾部、版权信息、相关文章链接等；

• hx

　　　　　标题标签。

---

　　文本

• 超链接

　　　　<a></a>

• • 创建指向另一个文档的链接

　　　　　target属性：【语法】<a target="value">

　　　　　　　　　　　【属性值】_blank　　在新窗口中打开被链接文档。

　　　　　　　　　　　　　　　　_self        默认。在相同的框架中打开被链接文档。

　　　　　　　　　　　　　　　　_parent　　在父框架集中打开被链接文档。

　　　　　　　　　　　　　　　　_top　　在整个窗口中打开被链接文档。

　　　　　　　　　　　　　　　　framename　　在指定的框架中打开被链接文档。

• • 创建一个文档内部的锚点

　　　　　例   <a href="#pay">支付</a>

　　　　　　　<div id="pay">支付......<div>

• • 链接到Email地址、电话拨号

　　　　　例    <a href="mailto:sakraaaaaa@qq.com">联系我</a>也可以在a标签中写入抄送和主题。

　　　　　例    <a href="tel:1511111111">联系我</a>

• 强调
  • <em>斜体</em>语义上的强调；
  • <strong>粗体</strong>重要性上的强调；
• 行内容器
  • <span>不想特别强调，但是有一定样式</span>
• 换行
  • <br>
• 引用
  • <cite>作品名称、人物</cite>斜体
  • <q>简短的文字</q>行内元素，在内容始末加“”
  • <blockquote>大段引用</blockquote>块级元素，默认带有左右40px的外边距，不带“”
  • <code>代码</code>
  • <b>摘要中的关键字、产品的名称</b>想要粗体但是不想表达强调时；
  • <i>技术术语等</i>

---

　　组合内容

• 分区
  • div
• 段落
  • p
• 列表
  • 无序列表<ul>

　　　　如 导航、节目列表、用户列表；

• • 有序列表<ol>

　　　　序号可以通过type属性来改变；

• • 自定义列表<dl>

　　　　如 问答的格式；一系列“name-value”名值对的列表；

　　　　<dt>列表项</dt>

　　　　<dd>列表项的描述</dd>：一个dt可以搭配多个dd，dd默认有缩进。

　　

　　注：列表是可嵌套的！

• 格式化内容
  • <pre></pre>

　　　　保留空格和换行。

---

　　嵌入资源

• img（自闭合标签）

　　插入图片  【必需属性】<img src=" 图片地址"  alt="替代文本" />

• iframe

　　嵌入页面，内联框架 <iframe src="http://www.baidu.com"></iframe>

　　在一个页面中的操作不好影响到该嵌入页面，当前页面与嵌入页面的代码分离。

• object

　　嵌入外部资源（如：插件）

　　<object 插件>
　　  <param 插件参数>
　　</object>

• embed

　　嵌入外部资源（如：插件）

• video

　　插入视频【标签】：<source  视频文件><track  引入视频字幕>

　　　　　　【属性】：controls 控制控制条的属性；poster 插入封面

• audio

　　插入音频

• 图
  • canvas　　基于像素，提供绘制函数，可以利用脚本绘制，可以实现性能要求高、场景复杂的（如实时数据的展示、游戏等）；
  • svg　　可缩放矢量图形，提供一些图形（如线性、圆形、矩形），可以实现高保真的静态的图形图像
• 热点区域
  • map>area 如商品展示(area是自闭合标签)

　　　　　<img .... usemap="#Map1">

　　　　　<map name="Map1">

　　　　　　　　<area shape="形状" coords="热点区域范围(根据形状定义)" href="" target="">

　　　　　</map>

---

　　表格

　　<table>

　　　　<caption>表格标题</caption>

　　　　<thead>

　　　　　　<tr><th>表格</th><th>的头</th></tr>

　　　　</thead>

　　　　<tbody>

　　　　　　<tr><th  rowspan="2">表头单元格</th><td>普通单元格</td><td>普通单元格</td></tr>

　　　　</tbody>

　　　　<tfoot>

　　　　　　<tr><td  colspan="3">表格</td><td>的尾</td></tr>

　　　　</tfoot>

　　</table>

　　　/*tr 行，td 列，th 头，rowspan 跨行，colspan 跨列。*/

---

　　表单

　　<form　action="/表单提交的后台地址" method="表单提交方式">

　　　　<fieldset>

　　　　　　<legend>分区标题</legend>

　　　　　　<label  for="对应标签id">文本内容</label>

　　　　　　<input  type="文本输入框类型/重置提交按钮/单选多选框" name="提交给后端数据的名称" value="">

　　　　　　<select  id="对应lable的for属性值">

　　　　　　　　<optgroup  lable="group1">

　　　　　　　　　　<option  value="">选项1</option>

　　　　　　　　　　<option  value="">选项2</option>

　　　　　　　　</optgroup>

　　　　　　</select>

　　　　　　<textarea  name="" ...></textarea>

　　　　</fieldset>

　　　　　　......

　　　　<fieldset>

　　　　　　......

　　　　</fieldset>

　　</form>

　　/*fieldset：做表单分区，select：做下拉菜单,optgroup：对select选项进行分组，label：功能提示，常用与其他标签连用，textarea：多行文本输入*/

　　【input属性】checked 默认选中，display 禁止操作，name 值(相同类型的input值相同)，placeholder  显示提示信息，value 默认值，readonly 只读文本框，hidden 对用户隐藏；

　　【input>type属性值】checkbox 多选框 ，radio 单选框 ，

　　　　　　　　　　　　　submit 提交按钮 ，reset  重置按钮，

　　　　　　　　　　　　　email  (有些浏览器会对其进行结构检验，出错时会有提醒)，

　　　　　　　　　　　　　range 一定范围内的数据，

　　　　　　　　　　　　　color 拾色器，

　　　　　　　　　　　　　number，url ，tel，search，

　　　　　　　　　　　　　date picker（）；

　　【option属性值】selected 默认选中。

---

　　语义化

　　　　含义：指用合理HTML标记以及其特有的属性去格式化文档内容。

　　　　作用：SEO（Search Engine Optimization）；

　　　　　　　提高可访问性；

　　　　　　　提高代码可读性，便于多人的修改维护、提高开发效率。

---