青训营HTML学习笔记

HTML（超文本标记语言）是一种用于创建网页结构的标记语言。它由一系列的HTML标签组成，每个标签包含不同的元素和属性，用于定义网页内容的结构和样式。

1.HTML基本结构

一个基本的HTML文档由<html></html>标签包围，其中包括了<head></head>和<body></body>标签。<head>标签用于定义文档的元信息，如标题、CSS样式表和脚本文件等。<body></body>标签定义了网页的主要内容。

示例代码：

    <!DOCTYPE html>
    <html> 
    <head> 
        <title>我的网页</title>
        <link rel="stylesheet" type="text/css" href="styles.css">
        <script src="script.js"></script>
    </head>
    <body> 
        <h1>欢迎来到我的网页</h1> 
        <p>这是一个示例网页</p> 
    </body>
    </html>

2.HTML常用标签

<h1>到<h6>标签用于定义标题的级别，数字越小，级别越高。<p>标签用于定义段落。<a>标签用于创建链接。

示例代码：

    <h1>这是一个标题</h1> 
    <p>这是一个段落</p> 
    <a href="http://www.example.com">这是一个链接</a>

3. HTML元素属性

HTML元素可以具有不同的属性，用于控制元素的行为和样式。常见的属性有id、class和style。

示例代码：

<p id="intro" class="highlight" style="color: red;">这是一个带有属性的段落</p>

4. HTML列表

HTML提供了有序列表（<ol>）和无序列表（<ul>）两种列表类型。列表项用<li>标签定义。

示例代码：

   <ol>
       <li>有序列表项1</li>
       <li>有序列表项2</li>
   </ol>
   
   <ul>
       <li>无序列表项1</li> 
       <li>无序列表项2</li>
   </ul>

5. HTML表格

HTML表格由<table>、<tr>和<td>标签组成。<table>定义表格，<tr>定义表格行，<td>定义单元格。

示例代码：

<table>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
    <tr> 
        <td>单元格3</td>
        <td>单元格4</td> 
    </tr>
</table>

6. HTML表单

HTML表单用于收集用户输入的数据。常见的表单元素有输入框（<input>）、下拉列表（<select>）和单选框（<radio>）等。

示例代码：

<form>
    <label>用户名:</label>
    <input type="text" name="username"><br>
    
    <label>性别:</label>
    <input type="radio" name="gender" value="male">男性 
    <input type="radio" name="gender" value="female">女性<br>
    
    <label>兴趣爱好:</label>
    <select name="hobby"> 
        <option value="music">音乐</option>
        <option value="sports">运动</option> 
        <option value="reading">阅读</option>
    </select><br>
    
    <input type="submit" value="提交"> 
</form>

总结：HTML是Web开发中非常基础而重要的技术，在学习HTML时应重点掌握以下几个方面：

学习HTML标签的基本语法和用法，熟悉常见标签和其属性的含义和用法。
学习如何使用CSS样式和布局来美化网页，使其具备吸引力和可读性

HTML学习笔记|青训营