HTML入门学习笔记（二）

最新推荐文章于 2024-07-05 20:20:47 发布

去选择自己的路

最新推荐文章于 2024-07-05 20:20:47 发布

阅读量90

点赞数

文章标签： html 学习前端

本文链接：https://blog.csdn.net/m0_73121489/article/details/130032868

版权

文章目录

文本格式进阶
文档的基本组成部分
HTML 调试

文本格式进阶

描述列表

描述列表使用与其他列表类型不同的闭合标签——<dl>；此外，每一项都用<dt>元素闭合。每个描述都用 <dd>元素闭合。

<dl>
  <dt>内心独白</dt>
    <dd>戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。</dd>
  <dt>语言独白</dt>
    <dd>戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。</dd>
  <dt>旁白</dt>
    <dd>戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。</dd>
</dl>

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

引文

块引用

如果一个块级内容（一个段落、多个段落、一个列表等）从其他地方被引用，你应该把它用 <blockquote> 元素包裹起来表示，并且在 cite 属性里用 URL 来指向引用的资源。

<p>
    我家的狗有点胖
</p>
<p>块引用:</p>
<blockquote
  cite="https://www.baidu.com">
  <p>
    我家的狗有点胖<!--缩进-->
  </p>
</blockquote>

在这里插入图片描述

行内引用

使用到 <q>标签

<p>
    <q>我家的狗有点胖</q>
</p>

在这里插入图片描述

引文

<cite>标签是为了包含所引用资源的标题

<a href="">
<cite>我家的狗有点胖</cite>
</a>

在这里插入图片描述

这里引用的默认字体是斜体。

缩略语

缩略语标签：<abbr>——它常被用来包裹一个缩略语或缩写，并且提供缩写的解释。

<p>
    我在学习<abbr>HTML</abbr>
</p>
<br>
<p>
    我在学习<abbr title="666">HTML</abbr>
</p>

效果：
我在学习HTML
我在学习HTML

下面有一条虚线，且鼠标停在上面的时候会显示title的内容。

上标和下标

<p>
  葡萄糖的化学方程式是
  C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>。
</p>
<p>如果 x<sup>2</sup> 的值为 9，那么 x 的值必为 3 或 -3。</p>

在这里插入图片描述

标记计算机代码的标签

<code>：用于标记计算机通用代码。
<pre>：用于保留空白字符（通常用于代码块）——如果文本中使用了缩进或多余的空白，浏览器将忽略它，你将不会在呈现的页面上看到它。
但是，如果你将文本包含在 <pre></pre> 标签中，
那么空白将会以与你在文本编辑器中看到的相同的方式渲染出来。
<var>：用于标记具体变量名。
<kbd>：用于标记输入电脑的键盘（或其他类型）输入。
<samp>：用于标记计算机程序的输出。

文档的基本组成部分

用于构建内容的标签

标准组件：页眉、导航栏、主内容、侧边栏和页脚

专用标签:

标签	语义
<hrader>	页头
<nav>	导航栏
<main>	主内容。主内容中还可以有各种子内容区段，可用<article>、<section> 和 <div> 等元素表示。
<aside>	侧边栏
<footer>	页脚，经常嵌套在 <main> 中

HTML 布局元素细节

<main> 存放每个页面独有的内容。每个页面上只能用一次 <main>，且直接位于 <body> 中。最好不要把它嵌套进其他元素。

<article> 包围的内容即一篇文章，与页面其他部分无关（比如一篇博文）。

<section> 与 <article> 类似，但 <section> 更适用于组织页面使其按功能（比如迷你地图、一组文章标题和摘要）分块。一般的最佳用法是：以标题作为开头；也可以把一篇 <article> 分成若干部分并分别置于不同的 <section> 中，也可以把一个区段 <section> 分成若干部分并分别置于不同的 <article> 中，取决于上下文。

<aside> 包含一些间接信息（术语条目、作者简介、相关链接，等等）。

<header> 是简介形式的内容。如果它是 <body> 的子元素，那么就是网站的全局页眉。如果它是 <article> 或**<section>** 的子元素，那么它是这些部分特有的页眉（此 <header> 非彼标题）。

<nav> 包含页面主导航功能。其中不应包含二级链接等内容。

<footer> 包含了页面的页脚部分。

无语义元素

<span> 是一个内联的（inline）无语义元素,<div> 是一个块级无语义元素

<div class="container">
    <span class="text">我家的狗有点胖</span>
</div>
<p class="new">我家的狗有点胖</p>

<head>里的<style>标签里的代码：

<style>
     .container{
         margin-top: 50px;
         text-align: center;
         background-color: #000;
     }
     .text{
         font-size: 50px;
         color: #fff;letter-spacing: 0px;
     }
     .new{
         font-size:50px;
         text-align: center;
     }

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

HTML 调试

可以去试试 Markup Validation Service，这里可以调试你的HTML有没有错误。

去选择自己的路

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML入门学习笔记（二）

用于保留空白字符（通常用于代码块）——如果文本中使用了缩进或多余的空白，浏览器将忽略它，你将不会在呈现的页面上看到它。如果一个块级内容（一个段落、多个段落、一个列表等）从其他地方被引用，你应该把它用。<article> 包围的内容即一篇文章，与页面其他部分无关（比如一篇博文）。或**<section>** 的子元素，那么它是这些部分特有的页眉（此。下面有一条虚线，且鼠标停在上面的时候会显示title的内容。那么空白将会以与你在文本编辑器中看到的相同的方式渲染出来。的子元素，那么就是网站的全局页眉。
复制链接

扫一扫