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>提供文本说明

博主设置当前文章不允许评论。

没有更多推荐了,返回首页