Html基础标签

1.标签：

①标题标签：h1~h6 字号逐级递减   h1只能有一个

②段落标签<p></p>

③水平线标签：<hr>单标签

④换行标签：<br>单标签

⑤文本格式化标签：<b></b>和<strong></strong>加粗     <i></i>和<em></em>斜体

                                <s></s>和<del><del>加删除线     <u></u>和<ins><ins>加下划线

⑤div span标签  注意：div独占一行，可以设置宽高  span一行可以有多个 不可以设置宽高

⑥图像标签img的属性：alt图片不能显示时的替换文本    title鼠标悬停时显示的内容

⑦链接标签：<a href="跳转目标"   target=“目标窗口的弹出的方式”></a>   

      href：用于指定链接目标的url地址，当为标签应用href属性时他就有了超链接的作用

      target：用于指定链接页面的打开方式 其取值为self blank    self为本窗口打开，blank是在新窗口打开

      锚点定位：通过创建锚点链接，用户可以快速定位到目标内容，创建锚点链接分为两步：

             ①使用<a href="#id名">链接文本</a>创建链接文本

             ②使用相应的id名标注跳转目标的位置

路径：绝对路径：从盘符开始    相对路径：相对于自身的位置找   

 <!-- ./ 进入当前文件所在的文件夹   ../ 跳出当前文件所在文件夹 进入上一级文件夹-->
    <img src="images/oldman.jpg" alt="">
    <img src="/Users/maboxuan/Desktop/b0367/html/day01html初始/code/images/oldman.jpg" alt="">
    <img src="../job/圣诞/images/t5.jpg" alt="">

⑧列表标签：无序列表：

 <ul>
        <li>无序列表1</li>
        <li>无序列表2</li>
        <li>无序列表3</li>
        <li>无序列表4</li>
        <li>无序列表5</li>
    </ul>

                     无序列表：

 <ol>
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
        <li>有序列表4</li>
        <li>有序列表5</li>
    </ol>

                     自定义列表：

    <dl>
        <dt>自定义表头</dt>
        <dd>自定义列表项</dd>
        <dd>自定义列表项</dd>
        <dd>自定义列表项</dd>
    </dl>

2.表格table

    <!-- cellspacing 单元格和单元格之间的距离 默认值是2   -->
    <!-- cellpadding 文字和单元格之间的距离  默认值是1 -->
    <!-- 表格默认没有边框  border 值改成大于0 就会显示显示表格 -->
    <!-- align 是设置表格在浏览器的水平对齐方式 -->
    <table border="1" cellspacing="0" cellpadding="5" width="500" height="400" align="left">
        <!-- caption 是表格的名字  默认与表格居中对齐  注意：一定写在table标签的里面 -->
        <caption>学生信息表格</caption>
        <tr>
            <!-- th作为表头  文字加粗 并且水平居中 -->
            <th>表头</th>
            <th>表头</th>
            <th>表头</th>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table>

表格结构：<thead></thead>用于定义表格的头部

                 <tbody></body>用于定义表格的主题

合并单元格：rowspan 跨行合并   colspan 跨列合并

注意：多个内容合并例如把三个td合并会多余两个单元格需要删除

<table border="1" cellspacing="0" cellpadding="5">
        <!-- colspan 横着吞  记住 被吞掉的单元格 要删掉 -->
        <!-- rowspan 竖着吞  记住 被吞掉的单元格 要删掉 -->
        <tr>
            <td colspan="2">单元格1</td>
            <td>单元格3</td>
        </tr>
        <tr>
            <td>单元格4</td>
            <td>单元格5</td>
            <td rowspan="2">单元格6</td>
        </tr>
        <tr>
            <td>单元格7</td>
            <td>单元格8</td>
        </tr>
    </table>

    <table border="1" width="300" height="300" cellspacing="0">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td colspan="2" rowspan="2">5</td>
        </tr>
        <tr>
            <td>7</td>
        </tr>
    </table>

运行结果为：