HTML&CSS设计与构建网站(html)

<!--不包括常见标签-->

<sup>上标

<sub>下标

<blockquote cite="来源">引用长段文字

<q>引用短文字（IE浏览器不支持，回避使用

<abbr title="完整形式">缩写词

<cite>表明引用的来源，通常显示为斜体

<dfn>定义

<address>包含设计者详细信息，显示为斜体

<ins>插入到文档中的内容，带有下划线

<del>从文本中删除的内容，带有删除线

<s>不准确或不相关但不应当删除的内容，带有删除线

<dl>   定义列表

<dt>标题1</dt>

<dd>内容1</dd>

<dt><标题2/dt>

<dd>内容2</dd>

</dl>

<a>链接

①跳转至其他页面 绝对URL

②网站内部的页面跳转 相对URL

    需要表明相关文件所在的位置关系：1）同一文件夹：直接写；2）子/孙文件夹：/document；祖/父文件夹：.../ducument；

③跳转至页面内部特地位置 善用id特性<a href="#">

<a href="mailto:">Email链接

<a href="" target="_blank">在新窗口中打开链接

<img src="" alt="" title="">图像，内联元素

1)<img><p></p>

2)<p><img></p>

<svg><path></svg>获得svg图片的矢量坐标（可以用文本编辑器查看），导入web svg画布

<table>表格，空单元格也要用<td>或<th>表示

<tr>行

  <th scope=""></th>标题，显示粗体,scope特性"row"行标题,"col"列标题

  <td></td>单元格

</tr>

</table>

*跨列：在<td><th>中使用colspan特性表明单元格所跨列数，colspan="2";

*跨行：rowspan;

*适用于长表格<thead><tbody><tfoot>

<form action="" method="">各种表单控件</form>

action特性值为服务器上的一个URL，用来接受表单信息；

method表单提交方法：get/post；

1)<input type="" name="">表单控件，type值创建不同表单，name特性向服务器表明数据；

  type="text"单行文本框，maxlength=""最大输入字符；

  type="password'密码框，字符被掩盖；

  type="radio"单选按钮，value=""发送给服务器的值，checked="checked"预选中；

  type="checkbox"复选框，value，checked；

  type="file"文件上传域，同时创建一个browse按钮，<form method="post">；

  type="submit"提交按钮，value=""值显示按钮上的文本，按钮样式一般默认，也可以通过CSS定义；

  type="image"将图像作为提交按钮，用法同<img>；

  type="hidden"隐藏表单控件；

  type="date"日期控件；type="email"电子邮件控件；type="url"URL输入控件；type="search"搜索输入控件；

*特性placerholder=""预定义文本，在任何文本输入控件上使用；

2)<textarea name=""></textarea>多行文本域，起始标签和结束标签中的文本会显示在文本框中；

3)<select name="">下拉列表框

      <option value=""></option>下拉选项，两个或以上，selected="selected"预选中

    </select>

*可以通过添加特性multiple="multiple"，允许选择多个选项；

*可以通过添加特性size="3",一次显示多个选项数量；

4)<button></button>按钮，可以在起始和结束标签中插入文本和图像；

5)<label for=""></label>标签表单控件，标签表单的文本扩展可选择区域，语义化，for特性声明标签的目标表单控件id；

6)<fieldset>组合表单元素，大多数浏览器会附带边缘线

      <legend></legend>标题

      控件组

    </fieldset>

7)表单验证，一般由javascript实现，HTML5中也引入了。特性required="required"验证表单必填；

<iframe src="" width="" height=""></iframe> 内联框架，在网页中嵌入窗口链接其他网页，如google地图；

*特性seamless=seamless，HTML5，不出现滚动条；

<video src="" width="" height="">视频，HTML5

<source src="" type=' ;codecs="" ' >代替<video>中的src指定多个视频格式，type='video/mp4;codecs="vp8,vorbis"'视频格式及编解码器；

</video>

<audio>用法类似<video>

*poster=""视频播放前显示的图像；

*controls提供默认播放控件；

*autoplay自动播放；

*loop循环播放；

*preload="none/auto/metadata"在页面加载时，不必加载视频/自动载入/只需收集少量信息；

*建议HTML5多格式和FLASH格式组合使用；

HTML5新元素

<article>可以完整独立的文章； <section>有主题性和相关性的内容，通常带有标题

<hgroup>标题组  <aside>附属信息

<figure>独立的流内容，图像、视频、图形、图表等

<figcaption>为<figure>提供文本说明