hmtl笔记

1.class跟id的区别（百度）

①使用范围不同：

CLASS属性允许向一组在CLASS属性上具有相同值的元素应用声明。BODY内的所有元素都有CLASS属性。

ID属性的操作类似于CLASS属性，ID属性的值在整篇文档中必须是唯一的。

②表示方法不同：

CLASS类选择器以标志符（英文句点.）开头，用于指示后面是哪种类型的选择器。对于类选择器，之所以选择句点是因为在很多编程语言中它与术语“类”相关联。翻译成英语，标志符表示“带有类名的元素”。

ID选择器的标志符是散列符号（#）。标志符用来提醒浏览器接下来出现的是ID值。

③用途不同：

可以使用CLASS属性来分类元素。ID属性用来标记文档中唯一元素。

<!-- 使用class选择器的示例代码： -->
<style type="text/css">
.footer{background:red;}
</style> 

<div class="footer">footer</div>


<!-- 使用id选择器的示例代码： -->

<style type="text/css">
#footer{background:red;}
</style>

<div id="footer">footer</div>

2.标签

一些简易的标签我就不一一列举了。

<em></em> <i> </i> 斜体

上标 下标

<pre></pre>保留原格式 换行也会显示

<hr>横线

<br>换行

简写：在字体下面会显示小点

①<abbr title="缩写的全称">缩写.</abbr>

②<acronym title="缩写的全称">缩写</acronym>

<del></del> 删除线

<ins></ins>中间会出现一条横线(插入线)

<adress>联系信息</adress> 说明：联系信息可以是创建者的名字、电子邮箱、电话号码等等

<footer>页脚内容</footer>

<div></div>分模块

3.链接

①<a href="网页链接">这是链接。</a>

②<a href="网页链接" target="_blank">这是在新窗口打开的链接</a>

③<h3  id="id名称">跳转到当前</h3>

<a href="#id名称">这个链接跳转到“跳转到当前”</a>

④<a href="网页链接"><img src="t图片路径" alt="图片显示不出来可以替换的地方或进行文字说明"></a>

4.显示图片、视频、音频

图片

<img src="图片存放路径" alt="图片显示不出来可以替换的地方或进行文字说明" width="  px" height=" px">

px:像素 像素值自己定义

视频

<video controls="controls" width="300px" height="auto">

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

</video>

video标签的属性

音频

<audio controls="controls" loop>

<source src="播放的音频" type="audio/mp3">

</audio>

audio标签的属性

5.表格的tr、td、th

（csdn）

<th>...</th> 定义表头单元格。表格中的文字将以粗体显示，在表格中也可以不用此标签，

<th>标签必须放在<tr>标签内

<tr>...</tr> 定义一行标签，一组行标签内可以建立多组由<td>或<th>标签所定义的单元格，

<tr>必须在一个<table></table>里

（百度搜索）

<th>    定义表格的表头。   

<tr>    定义表格的行。      

<td>    定义表格单元。    

①水平表头

    <p>水平表头</p>
    <table>
        <!-- 如果没有border的话，那么这个表不会线条框住 -->
        <caption>表1.1</caption>
        <tr>
            <th>第一列</th>
            <th>第二列</th>
            <th>第三列</th>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
    </table>

 

②垂直表头

    <table border="2">
        <caption>表1.2</caption>
        <tr>
            <th>第一行</th>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <th>第二行</th>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
    </table>

③ 跨行或跨列表格

    <table border="3">
        <caption>表1.3</caption>
        <tr>
            <th>第一行</th>
            <td>1</td>
            <td colspan="2">2</td>
        </tr>
        <tr>
            <th rowspan="2">第二三行</th>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>

6.列表 

ol 有序列表 文本前面显示序列

1.****

2.****

        <ol start="99">
            <!-- start设置序列号起始值 -->
            <li>花</li>
            <li>太阳</li>
            <li>彩虹</li>
        </ol>

 

ul 无序列表 文本前面显示一个圆点

li 定义列表项目

        <ul>
            <li>花</li>
            <li>太阳</li>
            <li>彩虹</li>
        </ul>

 ③嵌套列表

        <ul>
            <li>Coffee</li>
            <li>Tea
                <ol>
                    <li>Black tea</li>
                    <li>Green tea</li>
                </ol>
            </li>
            <li>Milk
                <ul>
                    <li>Pure Milk</li>
                    <li>Yogurt</li>
                </ul>
            </li>
        </ul>

 7.表单

<form></form>表单，可以嵌套以下这些标签

form标签里的action 属性规定当提交表单时，向何处发送表单数据。

<input></input> 输出框 name属性可以来设置按钮只能选择一个

type的属性

<select></select>选择标签，嵌套<option>选项内容</option>

<textarea></textarea>标签定义多行的文本输入控件。设置rows跟cols属性来规定 textarea 的尺寸

<button></button> 标签定义一个按钮

            <form action="">
                用户名：<input type="text"><br>
                密码：<input type="password"><br>
                性别：<input type="radio" name="sex" value="男">男
                <input type="radio" name="sex" value="女">女<br>
                <!-- 如何不设置name这个属性的话，两者不互斥，也意味着表单男女都能选 -->
                爱好：<input type="checkbox" name="hoby" value="旅游">旅游
                     <input type="checkbox" name="hoby" value="音乐">音乐<br>
                年级：<select name="grade">
                        <option value="grade1">一年级</option>
                        <option value="grade2">二年级</option>
                        <option value="grade3" selected>三年级</option>
                    </select><br>
                座右铭：<textarea name="motto" cols="30" rows="10"></textarea><br>
                按钮：<input type="button" value="按钮"><br>
            </form>

 8.内联框架

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）

 <iframe src="https://blog.youkuaiyun.com/yxxx_5678?spm=1001.2100.3001.5343" frameborder="0"></iframe>
            <!-- frameborder规定是否显示框架周围的边框,取值1有边框，0无边框 -->

iframe的属性