前端HTML5学习笔记（一）

what️

已于 2024-08-22 10:40:40 修改

阅读量660

点赞数 15

分类专栏： Web前端基础文章标签： html5 学习笔记前端

于 2024-08-22 10:33:58 首次发布

本文链接：https://blog.csdn.net/m0_46317766/article/details/141397025

版权

Web前端基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、整体代码布局

<head> </head>：是头部，存放元数据，不会显示在浏览器上，是一些针对网页的设置项

<body> </body>：body内的内容直接显示在页面上。内容一定要写在标签内。

二、常用标签

注意：大多数标签成对出现，后边的标签比前边的多一个 /

1. 标题标签

<h>：标题标签
：段落标签

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>

    <p>
        风雨犹祝，山海同欢，是承天地之佑。
        星移斗转，沧海桑田，烟火人间依旧。
    </p>

2. 字样标签

：换行
<hr>：分割线
、：字体加粗
、：斜体字
<big>：大字体
：小字体
：下划线
<del>：删除线
：上标
：下标

    这里是
    <!-- （换行符） -->
    <br>换行操作。
    
    <hr>  <!-- 分割线 -->

    <strong>加粗</strong>
    <b>加粗</b>

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

    <big>大字体</big>
    <small>小字体</small>

    <u>下划线</u>
    <del>删除线</del>

    <sub>上标</sub>
    <sup>下标</sup>
    2<sup>4</sup>

    <b>32<sup>4</sup></b>

3. 图片标签

<img>：图片标签

属性：

src 路径，即图片存放的位置。

alt 加载失败时的提示文字。

width height 宽高。

<a>：超链接标签

属性：

a之间填写显示的文字。

href：将要跳转去的地址链接。

target：target="_blank" 在新建标签页打开。

title ：鼠标放到图片上会显示的文字。

    <img src="../image/1.jp" alt="图片加载失败" width="500px" height="300px">
    <br>
    <img src="../image/1.jpg" alt="" width="500px" height="300px">
    <br>
    <hr>
    <p>百度一下<q>你就知道</q></p>
    <a href="https://www.baidu.com/" target="">Baidu</a>
    <a href="https://www.baidu.com/" target="_blank">Baidu</a>
    <br>
    <a href="https://www.baidu.com/" title="点击将跳转到百度"><img src="../image/1.jpg" alt="" width="80px" height="40px"></a>

4. 列表标签

（1）有序列表

ol 为整个列表，li 表示每一个项。

可以利用 type 属性来改变序号的样式：type=" "，默认为数字1

1代表数字，A代表大写字母，a代表小写字母，I代表罗马数字，i代表小写罗马数字。

（2）无序列表

同上。type属性默认是disc小圆点，其他还有 circle圆圈、square方块。

（3）自定义列表

dl为整个列表，dt为列表头，dd为列表项。

    <!-- 有序列表 -->
    <ol type="a">
        <li>计算机</li>
        <li>计算机</li>
        <li>计算机</li>
    </ol>
    <!-- 无序列表  默认disc小圆点，circle圆，square方块-->
    <ul type="">
        <li>计算机</li>
        <li>计算机</li>
        <li>计算机</li>
    </ul>
    <!-- 自定义列表 -->
    <dl>
        <dt>列表头</dt>
        <dd><b>列表项</b></dd>
        <dd>列表项</dd>
        <dd>列表项</dd>
    </dl>

5. 表格标签

（1）创建表格：

表格有三层，最外层是table；中间层是tr，表示行；最内层是td，表示列。

caption 表示表格标题。

th 表头，自带加粗效果。（注：th要写在tr内。）

（2）表格属性：

border为边框，不写border表示没有，一般写1。

width height 是需要定义的宽高。

cellspacing 表格之间的空隙，一般把cellspacing设为0。

align = “center” 水平居中。写在 tr 或 td 都可。

    <table border="1" width="200" height="100" cellspacing="0">
        <caption>标题</caption>
        <tr align="center">
            <th>(1,1)</th>
            <td>(1,2)</td>
        </tr>

        <tr align="center">
            <th>(2,1)</th>
            <td>(2,2)</td>
        </tr>
    </table>

（3）合并单元格

合并列：

colspan （跨列合并），左合并右，把右边的删掉，删除的是同一个tr内的td。

合并行：

rowspan（跨行合并），上合并下，写在需要合并的最上面，把下面的删掉。删除的是不同tr内的td。

（4）练习

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <table border="1" width="400" height="200" cellspacing="0" align="center">
        <tr>
            <td></td>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
            <th>星期六</th>
        </tr>
        <tr>
            <td rowspan="2">上午</td>
            <td>123</td>
            <td>456</td>
            <td>789</td>
            <td>000</td>
            <td>145</td>
            <td>789</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td colspan="7">午休</td>
        </tr>
        <tr>
            <td rowspan="2">下午</td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
    </table>

</body>

</html>