博主信息

博文 4

粉丝 0

访问量 5032

专题推荐

1. HTML 文档结构

HTML 文档就是我们所谓的网页，浏览器的作用便是读取 HTML 文档，然后以网页的形式将内容呈现出来。以下便是一个基本的 HTML文档结构。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

1.1 DOCTYPE 元素

DOCTYPE 元素用来告诉浏览器，这是一个 HTML文档。

1.2 <html> 元素

<html> 元素是根元素，用来表示文档中 HTML 部分的开始。lang 属性指定页面内容的默认语言，此处 en 表示英语。

1.3 <head> 元素

head元素包含文档的元数据，向浏览器提供有关文档内容和标记的信息。
<meta charset="UTF-8">表示网页采取UTF-8编码；<title>Document</title>表示该 HTML 文档的标题为“Document”。
viewport 的概念可参考[https://www.cnblogs.com/gaogch/p/10628613.html]

1.4 <body> 元素

<body> 元素部分就是访问网页的用户可以在浏览器上看到的内容。

2. 元素与属性的关系

HTML 使用标记标签(Markup tag)来描述网页，HTML 标记标签简称为 HTML 标签(HTML tag)，一般由开始标签（Opening tag）与结束标签（Closing tag）构成标签对，HTML 元素（Element）指的是从开始标签到结束标签的所有代码。
比如：<P> 是一个标签；
<p>文本<p/>则是一个元素；
HTML文档由元素组成，而每个元素都可以被多个属性（Attribute）修饰，属性为 HTML 元素提供各种附加信息，它总以“属性名=属性值”这种名值对的形式出现，而且属性总是在 HTML的开始标签中进行定义。
比如：

<body>
<h2>我是一段平平无奇的文本</h2>
</body>

效果为：

为<body> 元素赋予背景颜色属性，属性值为红色之后：

<body bgcolor="red">
<h2>我是一段平平无奇的文本</h2>
</body>

效果变成了：

3. 语义化的结构元素

HTML 语义话是指在进行 HTML 文档代码的编写时，对所要呈现的内容使用准确的标签，简而言之,就是不仅有利于开发者理解网页的，也方便机器识别文档的布局结构。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <header>
<!-- <header> 标签定义文档的页眉（介绍信息)-->
    </header>
    <main>
<!-- <main> 标签规定文档的主要内容。 -->
    <nav>
<!--<nav> 标签定义导航链接，可将有导航性质的链接归在一个区域，使页面元素语义更加明确-->
    </nav>
    </main>
    <footer>
<!-- <footer> 标签定义文档或节的页脚。 -->
    </footer>
</body>
</html>

4. 语义化的文本元素

<!DOCTYPE html>
<html>
<head>
    <title>语义化的文本元素</title>
</head>
<body>
    <nav>
<!--<nav> 标签定义导航链接，可将有导航性质的链接归在一个区域，使页面元素语义更加明确-->
    </nav>
    <article>
<!-- <article>表示页面中的一块与上下文不相关的独立内容,
                它可以是一篇文章、论坛帖子或是用户评论 -->
    </article>
    <aside>
        <!-- aside用于定义当前页面或文章的附属信息，比如侧面栏等 -->
        我是侧边栏
    </aside>
    <mark>
<!-- mark可以在文本中高亮显示某些字符-->
        高亮我
    </mark>
<!-- 告诉浏览器，该文本是一个地址信息 -->
    <address>地址</address>
</body>
</html>

5. 链接元素

我们通过使用<a>标签在 HTML 文档中创建链接。链接元素可以实现网页间的跳转、站内跳转、下载文件、拨打电话、发送邮件等功能。

<!--链接元素中，href属性来描述链接的地址-->
<a href="www.baidu.com">百度一下，你就知道</a>
<!-- 可以设置属性，使得链接可在新标签页中打开 -->
<a href="www.baidu.com" target="_blank">百度一下，你就知道</a>
<!-- 链接元素可用来发送邮件 -->
<a href="mailto:someone@163.com" >发送邮件</a>
<!-- 链接元素可以实现下载文档的功能 -->
<a href="test.html download="test.html">点此下载</a>
<!-- 链接元素还可以调出关联的应用程序拨打电话 -->
<a href="tel:18612349876">致电</a>
<!-- 网页内的跳转可以运用链接元素实现 -->
<a href="#anchor">点击跳转</a>
<p id="anchor" style="margin-top: 800px">没错，跳到这儿来了</p>
<!-- 回到顶部 -->
<a href="#">回到顶部</a>

6. 列表元素

HTML 列表分为无序列表、有序列表以及自定义列表。

无序列表

  <!-- 无序列表 -->
    <ul>
      <li>中超</li>
      <li>英超</li>
      <li>西甲</li>
      <li>德甲</li>
      <li>意甲</li>
    </ul>
    <!-- 改变无序列表项目符号 -->
    <ul type="circle">
      <li>中超</li>
      <li>英超</li>
      <li>西甲</li>
      <li>德甲</li>
      <li>意甲</li>
    </ul>
    <!-- 改变无序列表项目符号 -->
    <ul type="square">
      <li>中超</li>
      <li>英超</li>
      <li>西甲</li>
      <li>德甲</li>
      <li>意甲</li>
    </ul>

效果如下：

有序列表

    <!-- 有序列表 -->
    <ol>
      <li>梅西</li>
      <li>C罗</li>
      <li>内马尔</li>
      <li>姆巴佩</li>
      <li>萨拉赫</li>
    </ol>
    <!-- 改变有序列表项目符号 -->
    <ol type="A">
      <li>梅西</li>
      <li>C罗</li>
      <li>内马尔</li>
      <li>姆巴佩</li>
      <li>萨拉赫</li>
    </ol>
    <!-- 再次改变有序列表项目符号 -->
    <ol type="I">
      <li>梅西</li>
      <li>C罗</li>
      <li>内马尔</li>
      <li>姆巴佩</li>
      <li>萨拉赫</li>
    </ol>
    <!-- 再次改变有序列表项目符号 -->
    <ol type="i">
      <li>梅西</li>
      <li>C罗</li>
      <li>内马尔</li>
      <li>姆巴佩</li>
      <li>萨拉赫</li>
    </ol>

效果如下：

定义列表

  <dl>
      <dt>早餐</dt>
      <dd>牛奶</dd>
      <dd>面包</dd>
      <dd>鸡蛋</dd>
      <dt>午餐</dt>
      <dd>米饭</dd>
      <dd>番茄炒鸡蛋</dd>
      <dd>白斩鸡</dd>
      <dt>晚餐</dt>
      <dd>面条</dd>
      <dd>牛肉</dd>
  </dl>

效果如下：

批改老师：

天蓬老师

批改状态：合格

老师批语：还可以

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

CSS究竟是怎么工作的？

2020-08-01 21:01:13