百度前端技术实战训练营——HTML基础

capucino_bubble

已于 2023-01-10 11:14:34 修改

阅读量493

点赞数

分类专栏：前端文章标签：前端 html

于 2023-01-09 22:04:59 首次发布

本文链接：https://blog.csdn.net/qq_62215764/article/details/128619554

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

百度前端技术实战训练营——HTML基础

想系统学习前端的可以到 w3school 网站

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

$\newline$

HTML基本结构

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .hi {
            color: red;
        }
    </style>
</head>

<body>
    <p class="hi">Hello World!</p>
</body>

</html>

<!DOCTYPE html> 声明为HTML5文档，位于文档最前面位置。
<html> 元素是HTML页面的根元素
<head> 元素包含了文档的元（meta）数据
<meta> 定义文档元数据，常用来描述当前页面的特性，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8，<meta http-equiv="X-UA-Compatible"> 定义任何 IE 版本都以当前版本所支持的最高级标准模式渲染，避免版本升级造成的影响
<title> 元素指定该文档的标题
<style> 元素定义标签样式
<body> 元素包含可见页面的所有内容

$\newline$

HTML标签

标题

<h1> 定义最大的标题， <h6> 定义最小的标题。

<body>
    <p class="hi">Hello World!</p>
    <!-- h1-h5标签的使用 -->
    <h1>我是一级标签</h1>
    <h2>我是二级标签</h2>
    <h3>我是三级标签</h3>
    <h4>我是四级标签</h4>
    <h5>我是五级标签</h5>
    <h6>我是六级标签</h6>
</body>

效果：
在这里插入图片描述

1到6号标题与1到6号字体逆序对应，比如1号字体对应6号标题，2号字体对应5号标题。

    <!-- h1-h5标签的使用 -->
    <h1>我是一级标题</h1>
    <font size="6">我是六号字体</font>
    <h2>我是二级标题</h2>
    <font size="5">我是五号字体</font>
    <h3>我是三级标题</h3>
    <font size="4">我是四号字体</font>
    <h4>我是四级标题</h4>
    <font size="3">我是三号字体</font>
    <h5>我是五级标题</h5>
    <font size="2">我是二号字体</font>
    <h6>我是六级标题</h6>
    <font size="1">我是一号字体</font>

效果：
在这里插入图片描述
$\newline$

列表

无序列表是一个项目的列表，列表项目使用粗体圆点（典型的小黑圆圈）进行标记，使用 <ul> 标签，每个列表项始于 <li> 标签；有序列表也是一列项目，列表项目使用数字进行标记，始于 <ol> 标签。

    <!-- 列表标签的使用 -->
    <ul>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
    </ul>
    <!-- 列表标签的使用 -->
    <ol>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
    </ol>

效果：
在这里插入图片描述

$\newline$
自定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始，每个自定义列表项以 <dt> 开始，每个自定义列表项的定义以 <dd>开始。

    <dl>
        <dt>自定义列表</dt>
        <dd>- 定义</dd>
        <dt>Coffee</dt>
        <dd>- black hot drink</dd>
        <dt>Milk</dt>
        <dd>- white cold drink</dd>
    </dl>

效果：
在这里插入图片描述

$\newline$

图片

<img>：空标签，只包含属性。
width，height：设置图像的宽度与高度
src： source，源属性的值是图像的 URL 地址
alt ：用来为图像定义一串预备的可替换的文本。在浏览器无法载入图像时，alt属性内容可以告知图片信息

    <!-- 图片标签的使用 -->
    <img width="120" height="100"
        src="https://ts4.cn.mm.bing.net/th?id=ORMS.d71e5f0970eaff06fd06172f8a322e8c&pid=Wdp&w=612&h=304&qlt=90&c=1&rs=1&dpr=1.25&p=0"
        alt="baidu image">
    <!-- 换行 -->
    <br>
    <br>
    <!-- 图片资源无法成功加载 -->
    <img src="https://" alt="baidu image">

效果：
在这里插入图片描述

$\newline$

超链接

HTML 使用超级链接与网络上的另一个文档（页面）相连，点击链接可以从一张页面跳转到另一张页面。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像。

    <!-- 超链接标签 -->
    <a href="http://www.w3school.com.cn">W3School</a>

效果：
在这里插入图片描述
点击可跳转到 W3School 页面

$\newline$

文本

HTML 可以将文档分割为若干段落，段落通过 <p> 标签定义的。使用<br>标签可以在不产生一个新段落的情况下进行换行（新行）。

    <!-- 文本相关标签 -->
    <p>普通的文本<em>着重文字</em></p>
    <p>普通的文本<strong>加重语气</strong></p>
    <p>普通的文本<b>粗体</b></p>
    <p>普通的文本<i>斜体字</i></p>
    <p>普通的文本<small>小字号</small></p>
    <p>普通的文本<sub>下标字</sub></p>
    <p>普通的文本<sup>上标字</sup></p>
    <p>普通的文本<ins>插入字</ins></p>
    <p>普通的文本<del>删除字</del></p>

    <p>这个<br>段落<br>演示了分行的效果</p>

效果：
在这里插入图片描述
$\newline$

输入

<input>为输入标签，输入类型由 type 属性定义。

type="text"：定义用户可输入文本的单行输入字段，在大多数浏览器中，文本域的默认宽度是 20 个字符。placeholder 属性设置文本输入提示信息。

    <!-- 默认值，单行的文本区域，输入中的换行会被自动去除 -->
    Input：<input type="text">
    <br>
    <input type="text" placeholder="请填写文本信息">

效果：
在这里插入图片描述
$\newline$

type="checkbox"：定义复选框，允许用户在一定数目的选择中选取一个或多个选项。

    <!-- 复选框，可设为选中或未选中-->
    <!-- 必须点击框框才能打勾 -->
    <input type="checkbox">first checkbox
    <input type="checkbox" checked="checked">second checkbox

    <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>

效果：
在这里插入图片描述
$\newline$

type="file"：定义输入字段和 "浏览"按钮，供文件上传。

    <!-- 让用户选择文件的控件 -->
    <input type="file">

效果：
在这里插入图片描述
$\newline$

type="radio"：定义单选按钮，允许用户选取给定数目的选择中的一个选项。

    <!-- 单选框， -->
    <label><input type="radio" id="radio">first radio</label>
    <label><input type="radio" name="radio" id="radio2" checked="checked">second radio</label>

效果：
在这里插入图片描述
$\newline$

type="range"：定义进度条。
type="submit"：定义提交按钮，用于向服务器发送表单数据，数据会发送到表单的 action 属性中指定的页面。

 <!-- 控制范围,进度条 -->
    <input type="range">
    <!-- 提交 -->
    <input type="submit">

效果：
在这里插入图片描述
$\newline$

文本域

cols：文本域的可视宽度
rows：元素的输入文本的行数（显示的高度）

    <!-- 多行纯文本编辑控件 -->
    <!-- cols表示文本域的可视宽度，rows表示元素的输入文本的行数（显示的高度） -->
    <textarea name="story" cols="20" rows="5">this is a textarea</textarea>

效果：
在这里插入图片描述

$\newline$

简单应用

使用html标签完成以下页面布局（CSS暂不作要求）。
在这里插入图片描述

$\newline$

标签语义化

常用的语义化标签包括：

<header></header> 头部
<nav></nav> 导航栏
<section></section> 区块（有语义化的div）
<main></main> 主要区域
<artical></artical> 主要内容
<aside></aside> 侧边栏
<footer></footer> 底部
$\newline$
HTML语义化有以下几个好处：

去掉或者丢失样式的时候能够让页面呈现出清晰的结构；
有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页；
便于团队开发和维护，语义化更具可读性，遵循W3C标准，可以减少差异化。

案例页面可划分成以下布局：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>观鸟网</title>
</head>

<body>
    <header>
        <h1>观鸟网</h1>
        <img src="https://b.bdstatic.com/searchbox/icms/searchbox/img/dove.png" alt="bird">

        <nav>
            <ul>
                <li><span>主页</span></li>
                <li><a href="#">开始</a></li>
                <li><a href="#">图片</a></li>
                <li><a href="#">设备</a></li>
                <li><a href="#">论坛</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h2>欢迎</h2>
            <p>观鸟网致力于打造观鸟网络大数据平台,专注于观鸟领域企业服务的门户网站。提供专业观鸟行业资讯、观鸟商机、观鸟招商、观鸟企业及产品。</p>
            <p><em>时不我待</em>！<strong>赶快带齐装备，关上电脑，去拥抱美丽的大自然吧！</strong></p>
        </article>

        <aside>
            <h2>收藏照片</h2>
            <a href="bird1.png">
                <img src="https://img2.baidu.com/it/u=1850166218,879583539&fm=253&fmt=auto&app=138&f=JPEG?w=870&h=489"
                    alt="bird">
            </a>
            <a href="bird2.png">
                <img src="https://img2.baidu.com/it/u=3327157741,426498785&fm=253&fmt=auto&app=138&f=JPEG?w=333&h=500"
                    alt="bird">
            </a>
            <a href="bird3.png">
                <img src="https://img1.baidu.com/it/u=4164080869,1084023483&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
                    alt="bird">
            </a>
            <a href="bird4.png">
                <img src="https://img1.baidu.com/it/u=2912037220,2080048536&fm=253&fmt=auto&app=138&f=JPEG?w=402&h=500"
                    alt="bird">
            </a>
        </aside>
    </main>
    <footer>
        <p>本虚拟站点遵守 CC0 协议。所有内容均可任意修改和复用。原始版本由×××于2020年编写，由×××于2021年汉化。</p>
        <p><a href="http://game-icons.net/lorc/originals/dove.html">鸽子图标</a>由×××绘制</p>
    </footer>
</body>
</html>