HTML与CSS知识查漏补缺 | 青训营笔记

听风逐浪
125 阅读3分钟

这是我参与「第四届青训营 」笔记创作活动的的第1天

主要是对HTML和CSS中的一些基础知识的查缺补漏

1、HTML基本结构

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>页面标题</title>
  </head>
  <body>
    <h1>一级标题</h1>
    <p>段落内容</p>
  </body>
</html>

  1. <!doctype html>

    <!doctype>用来声明使用的 HTML 版本，<!doctype html>用来声明使用的是 HTML5。

  2. <html>

    文档根标签，其他所有标签都写在根标签中

  3. <head>

    文档的头部，包含页面元数据标签<meta>、标题标签<title>和链接文件标签<link>

  4. <meta>

    页面元数据标签，是数据的数据信息。

    提供HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。

常用属性:

属性名说明
charset定义字符编码方式
name页面信息的简要说明；常用值有keywords、description、viewport
http-equiv给http头部添加一些信息，如设置网页到期时间、设置cookie
content定义与 http-equiv 或 name 属性相关的元信息

  1. <title>

    页面标题，必写

  2. <link>

rel属性常用属性值:

属性名说明
stylesheet链接到样式表(最常用)
shortcut icon指定页面标题旁的logo
alternate stylesheet可替换的样式表，不是所有浏览器都支持

  1. <body>

    用户可见内容

2、HTML引用标签

标签说明
blockquote摘自另一个源的块引用，必须包含块级元素<p>，通常显示为缩进的块。
cite对某个参考文献的引用，比如书籍或者杂志的标题，以斜体显示
q短引用，简短的行内引用，以双引号""显示
pre预格式化，保留空格换行
code代码
strong强调文本，但它强调的程度更强一些，显示加粗字体
em强调文本，以斜体显示
<!-- cite属性表示引用来源 -->
<blockquote cite="http://t.cn/RfjKO0F">
  <p>天才并不是自生自长在深林荒野里的怪物， 是由可以使天才生长的民众产生、长育出来的，所以没有 这种民众，就没有天才。</p>
</blockquote>

<p>我最喜欢的一本书是<cite>小王子</cite>。</p>

<p>在<cite>第一章</cite>，我们讲过<q>字符串是不可变量</q>。</p>

<p><code>const</code>声明创建一个只读的常量。</p>

<pre><code>
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
</code></pre>

<p>在投资之前，<strong>一定要做风险评估</strong>。</p>

<p>Cats <em>are</em> cute animals.</p>

效果图如下： image-20220724002105847

3、字体使用Web Fonts

　　Web字体是一种CSS功能，允许指定的字体文件被下载到本地。

　　这是一种非常有效的方式，这样字体就不受限于本地是否安装了字体，而且大部分浏览器都支持Web字体。

Setp 1 下载网络字体

　　在CSS 中，使用@font-face关键字下载网络字体，有2个必要属性

  • src指定字体资源
  • font-family自定义一个名称
<h1>Web fonts are awesome!</h1>

<style>
  @font-face {
    font-family: "Megrim";
    src: url(https://fonts.gstatic.com/s/megrim/v11/46kulbz5WjvLqJZVam_hVUdI1w.woff2) format('woff2');
  }
</style>

Setp 2 使用字体

　　设置font-famiy属性，而这时 font-family设置的是网络字体的名称，而不再是系统的字体。(网络字体的名称在上一步已经定义。)

<h1>Web fonts are awesome!</h1>
<style>
  h1 {
    font-family: Megrim, Cursive;
  }
</style>
image-20220724121218417

4、字间距spacing

letter-spacing：每个字母之间的左右间距。每个中文相当于一个字母

word-spacing：每个单词之间的左右间距

<style>
.letter{
  letter-spacing:10px;
}
.word{
  word-spacing: 10px;
}
</style>

Hello world!你好，世界
<p class="letter">Hello world!你好，世界</p>
<p class="word">Hello world!你好，世界</p>

网页效果如下： image-20220724122455721

5、空白处理white-space

属性值效果
normol默认。连续的空白符会被合并，换行符会被当作空白符来处理。内容超出容器宽度时换行
nowrap和 normal 一样。但内容超出容器宽度时不换行
pre空白和换行都被保留。类似 HTML 中的 <pre> 标签。内容超出容器宽度时不换行
pre-wrap和 pre 一样。但内容超出容器宽度时换行
pre-line合并空白，但保留换行。内容超出容器宽度时换行
 <p>This is a paragraph.        The text
            is splitted into two lines.</p>

设置不同的 white-space 属性值，放入宽度为200px的块级元素中，在浏览器中效果如下 image-20220724124959762

avatar
文章
阅读
粉丝