HTML综合练习

hyh2023090208

于 2024-10-08 20:58:54 发布

阅读量244

点赞数 5

文章标签： html 前端

本文链接：https://blog.csdn.net/qy_hell/article/details/142768664

版权

一. 文档结构标签

1.<!DOCTYPE html>：声明文档类型。
2.<html>：HTML文档的根元素。
3.<head>：包含文档的元数据，如标题、样式、脚本链接。
4.<title>：定义网页标题，显示在浏览器标签页上。
5.<body>：包含网页的所有内容。

二. 文本内容标签

1.<h1> to <h6>：定义标题，<h1>是最重要的标题。
2.<p>：定义段落。
3.<br>：换行。
4.<hr>：水平分割线。

三. 链接与图片

1.<a href=" ">：创建超链接。
2.< img src="image_url" alt="描述">：插入图片。

<img>标签有以下属性：

    src：指定图像的URL、可以是相对路径或绝对路径
    alt：指定图像的替代文本，用于当图像无法显示时显示。这个属性是必需的，它提供了对图像的描述，并且对于可访问性也很重要
    width：指定图像的宽度
    height：指定图像的高度
    title：指定图像的标题，当用户将鼠标悬停在图像上时显示
    align：指定图像在页面中的对齐方式。可以使用以下值：left（左对齐）、right（右对齐）、top（顶部对齐）、middle（垂直居中对齐）、bottom（底部对齐）
    border：通过设置border的属性值来定义边框的样式、宽度和颜色
    hspace：用于设置图像左右的空白像素（水平边距）
    vspace：用于设置图像上下的空白像素（垂直边距）

四. 列表

1.<ul>：无序列表。
2.<ol>：有序列表。
3.<li>：列表项。

五. 表格

1.<table>：创建表格。
2.<tr>：表格行。
3.<td>：表格单元格。
4.<th>：表格头部单元格。

六. 表单

1.<form>：定义表单。
2.<input type="text">：文本输入框。
3.<input type="submit">：提交按钮。

实践示例

<!DOCTYPE html>
<html>
<head>
    <title>HTML综合练习</title>
</head>
<body>
    <h1>我的HTML练习页面</h1>
    <p>欢迎来到我的HTML练习页面！</p >
    <hr>
    <h2>链接与图片</h2>
    
    <br>
    < img src="example.jpg" alt="示例图片">
    
    <h2>列表</h2>
    <ul>
        <li>无序列表项1</li>
        <li>无序列表项2</li>
    </ul>
    <ol>
        <li>有序列表项1</li>
        <li>有序列表项2</li>
    </ol>
    
    <h2>表格</h2>
    <table>
        <tr>
            <th>标题1</th>
            <th>标题2</th>
        </tr>
        <tr>
            <td>数据1</td>
            <td>数据2</td>
        </tr>
    </table>
    
    <h2>表单</h2>
    <form action="/submit" method="post">
        <input type="text" placeholder="输入框">
        <input type="submit" value="提交">
    </form>
</body>
</html>