HTML课堂笔记-0704

html属性

1.通用属性：几乎所有元素都拥有

id,clss,style

2.预置属性：是通用属性的一个子集

id,class,style也是预置的属性，只不过几乎所有元素都会有

3.事件属性：有一个通用前缀，on+事件名称：事件属性

<button onclick="alert('提交成功')">提交</button>

4.自定义属性：有一个通用前缀：“data-”

<div data-user-email="569494973@qq.com">我的邮箱是：</div>
<button onclick="this.nextElementSilbing.textContent = this.previaus">获取邮箱</button>

常用布局标签

1.经典

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

id权重过大，尽量少用或不用，id主要用在表单元素，锚点

2.改进：

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

3.新标签：（html5的语义化）

<header>header</div>
<main>main</div>
<footer>footer</div>

为什么还有大量的开发者，喜欢用div+class模式，不用语义化标签？
1、目前项目90%以上是基于移动端的，不在乎，不依赖搜索引擎优化，seo
2、语义化标签还是数量太小了，不如用class来描述更精准

图片

图片是外部资源，是通过标签引入到当前html中的，通常使用“单标签”，内容通过属性来标注

<img src="" alt="20期" width="200px">

alt属性一般不要省，width与height一般只写一个，不然图片可能会拉伸

链接

<a href="https://php.cn" target="_blank">php.cn</a>20期开班啦
<a href="../0701.zip" target="_blank">下载附件</a>

target默认值为”_self”在当前窗口打开，”_blank”在新窗口中打开当前连接

列表

1、无序列表

<ul>
    <li><a href="">item1</a></li>
    <li><a href="">item1</a></li>
    <li><a href="">item1</a></li>
</ul>

2、有序列表

<ol>
    <li><a href="">item1</a></li>
    <li><a href="">item1</a></li>
    <li><a href="">item1</a></li>
</ol>

3、自定义列表：类似名词解释

<dl>
    <dt>地址：</dt>
    <dd>合肥市政务新区</dd>
    <dt>email:</dt>
    <dd>569494973@qq.com</dd>
</ol>

4、与img、a标签的使用

<ul>
    <li><a href=""><img src="images/bear.jpg" alt="" width="100"></a></li>
    <li><a href=""><img src="images/bear.jpg" alt="" width="100"></a></li>
</ul>

图片，链接，通常不会单独使用，而是与其它元素，如列表组合使用

表格

表格与列表一样，是用“组合元素”来表示，列表是ul＋li或ol＋li
表格是table（表格）＋caption（标题）＋thead（表头）+tbody（表身）+tr（行）+td（列）,表格中的数据必须放在“单元格”中，用
必须先画行，在一行中划分列（单元格）

<table width="500px" boder="1px">
    <caption>表格标题</caption>
    <tbody>
        <thead>  //可选
            <th>XXX</th>
            <th>XXX</th>
            <th>XXX</th>
        </thead>
        <tr>
            <td>XXX</td>
            <td colspan="2">XXX</td> //水平合并，col:列 span:跨越、合并
        </tr>
        <tr> 
            <td>XXX<td>
            <td rowspan="2">XXX</td> //垂直合并，row:垂直方向
            <td>XXX</td>
        </tr>
        <tr> 
            <td>XXX</td>            
            <td>XXX</td>
        </tr>
        <tfoot>  //可选
            <tr>
                <td>XXX</td>
                <td>XXX</td>
                <td>XXX</td>
                <td>XXX</td>
            </tr>
        </tfoot>
    </tbody>
</table>

表头中，th预置了(style=”text-align:center;font-weight:bold”的td标签)