百度前端实战训练营--HTML基础_百度学习html-优快云博客

本文链接：https://blog.youkuaiyun.com/hechengjiang_009/article/details/128569497

本文介绍了HTML的基础知识，包括HTML简介、常用标签示例（如颜色属性、图片、超链接、文本编辑等）、语义化标签的优点及实践建议。通过实例展示了如何创建网页内容，并强调了学习更多标签和使用编辑工具进行实战的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Day2：HTML基础

详细介绍，可查看网站web 入门 - 学习 Web 开发 | MDN (mozilla.org)

HTML简介：

基本概念：超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是：一组段落、一个重点信息列表、也可以含有图片和数据表。

标签：html、head、body（三大部分）

<!DOCTYPE html>:标识该文档使用的是何种规范

html包揽整个文档

标签举例

例子1:颜色属性，五级标题，列表（有/无序）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="keywords" content="html,css,tutorial" />
  <title>开始学习HTML</title>
  <style>
    .hi {
      color : red;
    }
  </style>
</head>
<body>
  <p class="hi">hello world! </p>
  <!--h1-h5标签使用-->
  
  <h1>一级标题 </h1>
  <h2>二级标题 </h2>
  <h3>三级标题 </h3>
  <h4>四级标题 </h4>
  <h5>五级标题 </h5>
  
  <!-- 列表标签的使用 -->
  
  <ul>
    <li>无序列表</li>
    <li>无序列表</li>
    <li>无序列表</li>
  </ul>
  
  <!-- 列表标签的使用 -->
  <ol>
    <li>有序列表</li>
    <li>有序列表</li>
    <li>有序列表</li>
  </ol>
</body>
</html>

代码效果如下：

例子2:图片(这里的代码直接替换例子一中的body标签中的内容）

<img
       width="520"
       height="300"
       src="https://img-blog.csdnimg.cn/img_convert/2df5731c731c484ed6bd70701f142c72.png"
       alt="图片不见了"
   />

效果如下（此图片为我第一篇开营文章中展示的图片）：

alt属性会在修改src为错误地址时显示：

例子3：超链接

<a href="https://www.w3school.com.cn">W3school</a>

效果如下：

点击后可挑战到W3School

例子4：文本编辑相关（斜体、粗体）

<!-- 和文本相关的一些标签 -->
  <!-- 斜体 -->
  <p>
    这是一段很普通的文字<em>  这是斜体哦</em>
  </p>
  <!-- 粗体 -->
  <p>
    这也是一段普通文字<strong>  这是粗体哦</strong>
  </p>

结果：

例子5：选择框，书写框设计：

<!-- 单行文本区域,默认值和非默认值 -->
  <input type="text" />
  <br>
  <input type="text" placeholder="请填写文本信息"/>
  
  <br>
  <!-- 复选框，可设为选中或未选中 -->
  <input type="checkbox"/> first checkbox
  <input type="checkbox"/> second checkbox
  <br>
  <!-- 让用户选择文件的控件 -->
  <input type="file" />
  <br>
  <!-- 单选框 -->
  <input type="radio" id="radio"/> first radio
  <input type="radio" id="radio"/> second radio
  <br>
  <!-- 提交按钮 -->
  <input type="submit"/>
  <br>
  <!-- 选项框过小，点击不方便，可进行优化，使点击文字也能进行选择 -->
  <label
         ><input
           type="checkbox"
           id="cbox1-pro"
           value="first_checkbox"
          />first_checkbox<label
   >
   <label
         ><input
           type="checkbox"
           id="cbox2-pro"
           value="second_checkbox"
          />second_checkbox<label
   >
  <br>
     
  <!-- 多行纯文本编辑控件 -->
  <!-- cols表示文本域的可视宽度，rows表示元素的输入文本的行数（显示的高度） -->
  <textarea name="story" rows="5" cols="20">
    this is a textarea
  </textarea>
  <br>

效果如下：

例子6：点击列表中文字实现超链接（内嵌a标签，文字在标签内，图片则将a标签包裹住img标签）

<ul>
    <li><a href="这是一个超链接">这是一段文字</li>
</ul>

例子8：整体布局标签

参照上述布局标签实现以下界面（需结合CSS）：

语义化的优点：

可读性（针对普通用户）

利于识别，设置权重，便于爬虫爬取语义化标签（针对搜索引擎）

提高网站可访问行（针对残障人士、特殊阅读器使用）

建议：

这里只是部分标签展示，还有很多标签，可参考MDN、W3school进行学习

使用编辑工具进行实战