HTML学习总结

realpxx_

已于 2023-06-22 14:47:18 修改

阅读量43

点赞数

文章标签：学习 html

于 2023-06-22 14:42:45 首次发布

本文链接：https://blog.csdn.net/m0_63086810/article/details/131340345

版权

本文介绍了HTML作为超文本标记语言的基础知识，包括标签语法、元数据、文本和链接处理。还涵盖了CSS样式和布局应用，图像和多媒体元素的插入，以及表格和表单的创建。此外，讨论了超链接的使用，用于构建网页导航。

摘要由CSDN通过智能技术生成

HTML（超文本标记语言）用于构建网页的标记语言。

基础知识

学习 HTML 标签的基本语法和结构。
了解页面头部元数据（如标题、字符集）的设置。
掌握常见的文本标签，如标题、段落、链接等。
理解 HTML 文档的基本结构，包括 <!DOCTYPE> 声明、<html> 元素、<head> 元素和 <body> 元素。

<!DOCTYPE html>
<html>
<head>
  <title>My Webpage</title>
  <meta charset="UTF-8">
</head>
<body>
  <h1>My Heading</h1>
  <p>This is a paragraph.</p>
  <a href="https://www.example.com">Visit Example</a>
</body>
</html>

常见标签
掌握常见的 HTML 标签，如标题标签 <h1> 到 <h6>、段落标签 <p>、链接标签 <a> 等
使用标签（tag）来标记不同类型的内容，如标题、段落、图像等。
标签通常成对出现，包括开始标签 <tag> 和结束标签 </tag>。

<h1>主标题</h1>
<h2>副标题</h2>
<p>这是一个段落。</p>

<a href="https://www.example.com">访问示例网站</a>

样式和布局
学习使用内联样式和 <style> 标签为元素添加样式。
掌握常见的 CSS 属性，如颜色、背景、边框等。
使用 <div> 元素进行布局和分组。
块级元素用于组织大段的内容，如 <div>、<p>、<h1> 等。
内联元素用于包裹较小的部分，如 <span>、<strong>、<a> 等。

<style>
  h1 {
    color: blue;
    font-size: 24px;
  }

  .container {
    width: 500px;
    margin: 0 auto;
    border: 1px solid gray;
    padding: 20px;
  }
</style>

<div class="container">
  <h1>Welcome to My Website</h1>
  <p>This is a sample webpage.</p>
</div>

图像和多媒体
学习插入图像和视频等多媒体元素。
了解 <img>、<video> 和 <audio> 等标签的使用。
图像可以使用 <img> 标签插入，通过 src 属性指定图像文件的路径。
可以为链接和图像添加 alt 属性，提供替代文本，这在图像无法加载时很有用。

<img src="image.jpg" alt="My Image">

<video src="video.mp4" controls></video>

<audio src="audio.mp3" controls></audio>

表格和表单

掌握创建表格并填充数据。
了解表单元素的类型和属性，以及提交表单的方法。
使用 <ul>、<ol> 和 <li> 标签创建无序列表、有序列表和列表项。
使用 <table>、<tr>、<th> 和 <td> 标签创建表格。
使用 <form> 标签创建表单，包含用户输入的元素如文本框、复选框、下拉列表等。
使用不同类型的输入字段，如 <input type="text">、<input type="checkbox">、<select> 等。
可以使用 <label> 标签为表单元素添加标签，提升可访问性。
<form> 标签用于创建表单。
<label> 标签用于为表单元素添加标签，提升可访问性。
<input> 标签用于创建不同类型的输入字段，如文本框、复选框等。
<textarea> 标签用于创建多行文本输入框。
<button> 标签用于创建提交按钮。

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>$1</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>$0.5</td>
  </tr>
</table>

<form action="/submit" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br>

  <input type="submit" value="Submit">
</form>

超链接和导航

学习创建超链接和内部锚点。
使用 <a> 标签创建链接，通过 href 属性指定链接的目标 URL。

<a href="https://www.example.com">Visit Example Website</a>

<a href="#section">Go to Section</a>

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>