总结过去几天所学过的所有HTML知识点

 

换行符<br/>

段落<p>

<p>标签有一个align属性,其中有left(左对齐),right(右对齐),center(居中)值。

<p align="left">这是一个左对齐的段落</p>

 

标题

<h1>标题1</h1>        
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

文本格式化

<b>定义粗体文本</b>
<i> 定义斜体文本 </i>
<del>定义删除文本</del>
<sup>定义上标字</sup>
<sub>定义下标字</sub>

链接

<a href="URL">  </a>

href 定义链接地址、 title 链接提示信息、 target 链接打开方式(_blank 新的空白页,_self 当前页,_top)

<a href="http://www.baidu.com" title=" 链接提示信息" target="blank" >这是一个链接到百度的链接,并打开新的窗口</a>

<a>标签的其他应用: <a href="mailto:邮箱地址">邮件链接</a>

<a href="tel:电话号码">一键拨打</a>

<a href="sms:13181818181">一键发送短信</a>

 

锚点

锚点标签用于使用户"跳"到文档的某个部分。 

<a href="#位置名">  </a>

<a name="位置名">  </a>

<a href="#me"> 我是锚点 </a> 
文字文字
文字文字
文字文字
...
<a name="me"> 点击我,我就跳到"我是锚点"</a>

图像

<img src="图像的路径" width="100" height="100" alt="替代文字" /> // alt 很重要,必填   当图片还没加载好时,alt可以起到一个提示作用

图片相对地址的定义

./              当前目录

../             回到上一层目录

images/         进入一层目录

../images/         回到上一层目录,然后再进入images目录

  

图像热区  

<img src="URL" usemap="# map 名称" />

  <map name="map 名称">

     <area shape="形状" coords="坐标值" href="URL" />

  </map>

      圆形:shape="circle",coords="x,y,z"

          x,y为圆心坐标(x,y)z为圆的半径

      多边形:shape="poly",coords="x1,y1,x2,y2,x3,y3,..."

      矩形:shape="rectangle",coords="x1,y1,x2,y2"

<img src="URL" usemap="#rect" />

  <map name="rect">
     <area shape="rect" coords="148,139,295,0" href="pttp://www.baidu.com" />
</map> //这是一个矩形的图像热区,点击
图像热区就链接到百度

 

audio(音频)

语法: <audio src="song.ogg" controls="controls"></audio>

  考虑到不同浏览器对视频文件的兼容性:

    <audio controls="controls">

      <source src="song.ogg" type="audio/ogg">

      <source src="song.mp3" type="audio/mpeg">

      <p>您的浏览器不支持 audio标签</p>

     </audio >

 

 

autoplay autoplay   如果出现该属性,则音频在就绪后马上播放。

controls controls     如果出现该属性,则向用户显示控件,比如播放按钮。

loop loop        如果出现该属性,则每当音频结束时重新开始播放。

preload preload      如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果 使用 "autoplay",则忽略该属性。

src url          要播放的音频的 URL。

 

 

video(视频)

语法: <video src=“movie.mp4” controls="controls"></video>

  考虑到不同浏览器对视频文件的兼容性:

   <video controls="controls">

      <source src="movie.ogg" type="video/ogg">

      <source src="movie.mp4" type="video/mp4">

      <p>Your browser does not support the video tag.</p>

   </video>

 

属性说明:

  autoplay autoplay          如果出现该属性,则视频在就绪后马上播放。

  controls controls          如果出现该属性,则向用户显示控件,比如播放按钮。

  loop loop              如果出现该属性,则当媒介文件完成播放后再次开始播放。

  muted muted          规定视频的音频输出应该被静音。

  poster URL           规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。

  preload preload        如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果 使用 "autoplay",则忽略该属性。

  src url            要播放的视频的 URL。

   width pixels         设置视频播放器的宽度。

  height pixels         设置视频播放器的高度。

 

 HTML 较常用的实体字符

 

无序列表

 

<ul >
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>

 

 

 

有序列表

 

<ol >
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>

 

 

定义列表

<dl>
  <dt>HTML</dt>
    <dd>html 是超文本标记语言</dd>

  <dt>XHTML</dt>
    <dd>可扩展超文本置标语言 </dd>
    <dd>表现方式与超文本置标语言(HTML)类似,不过语法上更加严格 </dd>
</dl>

 

 

HTML 表格

表格由 <table> 标签以及一个或多个 tr、th或td 元素组成, 单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等

   <table border="1">
         <tr>
             <td>一行一列</td>
            <td>一行二列</td>
        </tr>
        <tr>
            <td>二行一列</td>
            <td>二行二列</td>
        </tr>
    </table>
            

 

属性                 值                       说明

width       px、 %                指定表格的宽度

height      px、%               表格的高度

border        px                 指定表格边框的宽度

cellpadding     px                   指定边框与内容之间的空白

cellspacing    px、 %                指定单元格之间的空白

align       left、 right 、 center        指定对齐方式

valign       top、 middle 、 bottom        垂直排列方式

colspan                            合并列单元格

rowspan                           合并行单元格

  

 

 <iframe> 内嵌框架

说明:

属性      属性值        说明

width        px , %         指定框架的宽度

height       px , %         指定框架的高度

scrolling      yes,no,auto      是否显示滚动条

frameborder    1, 0           是否显示边框

 

iframe可用作链接的目标,链接的target属性必须引用iframe的name属性

语法:

<iframe src="http://www.hao123.com" width="250" height="200" scrolling="no" frameborder="0" name="框架名"></iframe>

 

posted @ 2016-08-04 23:36  H5·can  阅读(301)  评论(0编辑  收藏  举报