HTML5知识点

1.  标题标签:h1-h6

    <h1>郑州商学院h1</h1>

    <h2>郑州商学院h2</h2>

    <h3>郑州商学院h3</h3>

    <h4>郑州商学院h4</h4>

    <h5>郑州商学院h5</h5>

<h6>郑州商学院h6</h6>

1. 段落标签：p

<p>你好</p>

1. 换行：br  （放到哪哪换行）

我来自郑州商学院<br/>信息与机电工程学院

4.水平横线：hr  大小的属性在元素的属性里面 不要加px

        width :  线的宽度

        color :  线的颜色

        size  :  线的粗细

        align :  对齐方式

        noshade : 实心的线

<hr width="100" color="green" size="5" align="right" noshade />

5.字体样式标签：

        strong:加粗  强调的意思  b:纯粹的加粗

        em：斜体 强调的意思

        i ：斜体 纯粹的斜体

        cite：斜体  表示引用(参考文献)

        big： 大小

        small： 大小

        del：删除

        address：地址

<strong>郑州商学院</strong>

<b>郑州商学院</b>

<em>郑州商学院</em>

<big>郑州商学院</big>

<small>郑州商学院</small>

<i>郑州商学院</i>

<cite>郑州商学院</cite>

<del>郑州商学院</del>

<address>郑州商学院</address>

6. 实体符号：

        < :  <  lower than

        > :  >  great than

        空格： 

        版权符号: ©

        " : "

7.图片：img

    title：图片的标题

alt：当图片加失败后显示的内容

Width：宽度

Height：高度

<img src="img/12.jpg" width="800" height="400"  title="123" alt="123">

8. 超链接：a标签

        href:跳转的地址，注意  地址必须加 http: https:

<a href="http://www.baidu.com">百度</a>

    锚点链接：

         a  :  href = "#d1"

        锚点：  

<a href="#d1">html5</a>

<h2 id="d1">html5</h2>

9.无序列表 ： ul  默认符号是 实心圆

        type: 控制列表符号的形状

            square：实心方块

            disc ：实心的圆

            circle：空心圆

<ul>

    <li>足球</li>

    <li>篮球</li>

    <li>乒乓球</li>

</ul>

10.有序列表

        type:标号索引的形式

            A:是大写英文字母

            a:小写因为字母

            I:大写的罗马数字

            i:小写的罗马数字

        start: 表示标号索引的起始位置 start=3 type=A  起始是就是C

ol type="A">

    <li>足球</li>

    <li>篮球</li>

    <li>乒乓球</li>

</ol>

11.自定义列表

dl:自定义列表  图文并茂的模块

   dt: 标题

   dd: 详细内容

<dl>

<dt>糖醋排骨</dt>

<dd>

主料：猪肋排<br>

辅料：葱姜  花椒  大料  香叶  白酒  盐  白糖  红糖  香醋  酱油  油 <br>

做法： 1. 买回来的排骨用清水洗至排骨颜色发白；<br>

                              2. 高压锅加适量清水，放入葱姜，大料，香叶和白酒。<br>

 3. 冲洗干净的排骨放入开水中绰烫。。。。<br>

</dd>

12.表格table

<table>

<tr>

<th>姓名</th>  表头

</tr>

<tr>

<td></td>

</tr>

</table>

align属性：水平方向的对齐方式  left center right

valign： 垂直方向的对齐方式  top  middle  bottom

border:边框

align="center" 水平的对齐方式 也可用在tr 和 td上面

width="800"  也可用在tr 和 td上面

height="600"  也可用在tr 和 td上面

cellspacing="0" 单元格边框的之间的间距

cellpadding="10" 单元格的内边距 内容与边框之间间距

colspan: 跨列

rowspan: 跨行

表格的结构化

thead

tbody

tfoot

caption:表格的标题

<table border="1" height="200px" cellspacing="0" bordercolor="green" width="400px" align="center">

    <thead>

        <tr>

            <th colspan="3">菜谱</th>

        </tr>

    </thead>

 <tbody>

    <tr>

        <td rowspan="2">素菜</td>

        <td>香菇青菜</td>

        <td>番茄鸡蛋</td>

    </tr>

    <tr>

        <td>红烧茄子</td>

        <td>干煸豆角</td>

    </tr>

    <tr>

        <td rowspan="2">荤菜</td>

        <td>红烧排骨</td>

        <td>油焖大虾</td>

    </tr>

    <tr>

        <td>烤全羊</td>

        <td>清蒸鲈鱼</td>

    </tr>

 </tbody>

    <tfoot>

<tr>

<td  colspan="3">[上一页] 　　　　  [下一页]</td>

 </tr>

    </tfoot>

    <caption>菜单</caption>

  13.audio:在页面中引入音频

            src="audio/jay.mp3"  地址

            controls:显示播放控制

            autoplay:自动播放

        source：实现浏览器的兼容性，

      <audio controls autoplay>

        <source src="audio/missmiao.mp4"></source>

        <source src="audio/missmiao.wma"></source>

        <source  src="audio/missmiao.mp3"></source>

        您的浏览器太老了！！！

    </audio>

14.video:在页面中引入视频

            src="audio/jay.mp3"  地址

            controls:显示播放控制

            autoplay:自动播放

            preload:预加载

            loop 设置后，表示反复播放视频

            muted  设置后，表示视频处于静

            poster  指定视频数据载入时显示的图片

        source：实现浏览器的兼容性，

   

    <video poster="img/1.jpg" controls preload muted>

       <source src="img/video/linjunjie.mkv">

    </video>

15.<embed src="audio/tashuo.mp3" autostart loop="2"/>

16.iframe浮动窗体

<table border="1" bordercolor="green" width="100%" height="900" cellspacing="0">

        <tr height="10%">

            <td colspan="2" align="center"><font size="6" color="red" face="宋体">头部</font></td>

        </tr>

        <tr>

            <td width="15%" valign="top">

                <br>

                <br>

                        <!--

                            超链接中的

                                target属性：打开新页面的位置

                                    blank: 在空的页面中打开

                                    self:  在当前窗口中打开

                                    parent: 在父窗口中打开

                                    top:   在顶级窗口中打开

                        -->

                

                 <a href="https://www.163.com" target="content">网易</a><br><br><br>

                <a href="https://www.hao123.com/" target="content">hao123导航网</a><br><br><br>

<td>

<tr>

<iframe src="2_content.html" name="content" width="100%" height="100%" frameborder="0"></iframe>

            </td>

        </tr>

<tr height="10%"><td colspan="2"><font size="6" color="red" face="宋体">footer</font></td></tr>

    </table>