HTML基础笔记(推荐)

下面我就详细讲解一下“HTML基础笔记(推荐)”的完整攻略。

1. 确定HTML文档的基本结构

在编写HTML文档之前，我们需要确定HTML文档的基本结构。一个标准的HTML文档通常由以下几个部分组成：

<!DOCTYPE html>    // 文档类型声明
<html lang="en">   // html标签，指定语言并包含整个html文档
<head>            // head标签，包含网页的元信息
    <meta charset="UTF-8">  // 设置字符编码
    <title>Page Title</title>   // 设置网页标题
</head>
<body>            // body标签，包含网页的主体内容
    <!-- 这里是网页的主体内容 -->
</body>
</html>

通过上面的基本结构，我们可以开始编写HTML文档了。

2. 学习HTML标记

HTML是一种标记语言，通过各种标记对文本进行标记和格式化，使其能够在浏览器中显示出来。常见的一些HTML标记有：

文本标记：p、h1~h6、a、img等
列表标记：ul、ol、li等
表格标记：table、tr、td等
表单标记：form、input、label等
其他：div、span、input、textarea、button等

标记的使用方法也各不相同，我们可以根据需要逐一学习。

3. 样式设置

HTML的样式可以通过CSS进行设置。我们可以通过内联样式、内部样式和外部样式表等方式来设置样式。

例如，我们可以通过内联样式来设置某个元素的背景颜色：

<div style="background-color: #f0f0f0;">这是一个div元素</div>

同时也可以通过内部样式和外部样式表来设置多个元素的样式：

<head>
    <style>
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>这是一个段落，文字颜色为红色。</p>
</body>

或者使用外部样式表，在html文件的头部引入一个单独的CSS文件：

<head>
    <link href="style.css" rel="stylesheet">
</head>
<body>
    <p class="red-text">这是一个段落，文字颜色为红色。</p>
</body>

上述代码中，style.css文件包含了对p元素设置为红色的样式。

示例

示例一：表格制作

<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>20</td>
        <td>男</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>22</td>
        <td>女</td>
    </tr>
</table>

上面的代码中，使用table标签和tr标签制作表格，并利用th、td标签设置表头和单元格内容。

示例二：表单制作

<form>
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name"><br>

    <label for="gender">性别：</label>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">男</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女</label><br>

    <label for="city">城市：</label>
    <select name="city" id="city">
        <option value="shanghai">上海</option>
        <option value="beijing">北京</option>
        <option value="guangzhou">广州</option>
    </select><br>

    <input type="submit" value="提交">
</form>

上面的代码中，使用form、label、input、select等标签制作表单，并利用属性设置表单的属性、表单元素的类型和值。其中，radio类型的标签需要设置name属性相同，才能实现单选功能。select标签绑定option标签，提供城市选择功能。最后，通过submit属性的设置，实现表单提交功能。

结语

以上就是HTML基础笔记的完整攻略。通过对HTML文档结构、标记和样式进行学习，我们可以掌握HTML的基础知识，并知道如何在页面中使用它。同时，通过上述示例的学习，也可以快速掌握表格制作和表单制作的方法。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：HTML基础笔记(推荐) - Python技术站

1. 确定HTML文档的基本结构

2. 学习HTML标记

3. 样式设置

示例

示例一：表格制作

示例二：表单制作

结语

相关文章