HTML与CSS基础入门 | 青训营笔记

丶寒雪
169 阅读9分钟

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

前言

本文采用VScode作为编辑器，与Chrome作为浏览器。

本文章将会重点介绍以下几点。
HTML：

  • HTML常用标签
  • H5语义化标签
  • 语义化标签作用

CSS：

  • CSS各选择器及其优先级

下面就让我们开始吧

HTML入门

什么是HTML

HTML全称超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

image.png

HTML常用标签

在介绍HTML常用标签前，我们先来分析初始化的HTML骨架。一般我们在VScode里创建一个HTML文件会输入一个感叹号然后回车生成一个基础的HTML骨架，接下来我们逐行分析。

image.png

  • 第一行是声明文档类型，这一行有着历史渊源，我们只需知道这一行是用来声明文档类型为HTML。
  • <html></html>元素是整个网页的根元素，包裹了完整的页面。其有一个lang属性，确定页面以何种语言显示。
  • <head></head>元素是一个容器，包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括了后面我们要说的CSS、字符集、还有SEO(搜索引擎优化)等。
  • <meta></meta>这一元素被称为描述数据的元素，它用法有许多，在这里面有指定使用的字符集，还有视窗，指定IE浏览器以Edge来渲染网页，解决部分IE浏览器的兼容问题。
  • <title></title>这一元素是标题，中间文字内容为浏览器标签页上的标题。
  • <body></body>这一元素包含网页中的所有内容，如引入一张图片<img src="path">等等内容都在这里。

OK我们现在已经分析完初始的HTML骨架了，现在就让我们开始学习常用的HTML标签吧！我很想这么说，但是在这之前我想先强调一个很重要的理念：把每一个标签都当成是一个盒子。

标题与段落

    <h1>这是一级标题</h1>
    <h2>这是二级标题</h2>
    <h3>这是三级标题</h3>
    <h4>这是四级标题</h4>
    <h5>这是五级标题</h5>
    <h6>这是六级标题</h6>
    <p>这是段落标签</p>

以下是此段代码效果

image.png

超链接、输入与图片

    <a href="https://www.baidu.com target="_blank">百度</a>
    <input type="text" value="123">
    <img src="" alt="学校" title="学校">

image.png
标签内的各种关键字都是标签自带的属性

  • href="https://www.baidu.com"即超链接标签跳转的网址，target="_blank"点击链接时是新建标签页跳转，若不添加此属性默认页内跳转。
  • type="text" value="123"其中type和value为<input>标签的属性，text、123等为属性值，type还有许多其它属性值，而value属性是指定输入框中的默认值，<input>标签还有许多其它属性这里就不一一介绍了。
  • 同理<img>标签内的src,alt,title都是属性，其中src的值应为图片所在路径，alt属性值得含义为若图片未正常显示时显示的文字，title属性则是鼠标悬停在图片时所显示的文字。

div与span

    <div>我是div</div>
    <span>我是span</span><span>我是span</span><span>我是span</span>
    <p>我是段落标签</p>

image.png
上面的图片相信大家一眼就能看出来div与span,p标签的区别了。没错，每个div标签独占一行，而每个span标签只占内容大小位置且可以在一行内有多个，而p标签则是默认带有行高，它与span之间的空白就可以看出。

无序列表、有序列表、描述列表

h2>世界电影票房排行榜</h2>
<ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>复仇者联盟</li>
</ol>

<h2>购物清单</h2>
<ul>
  <li>🍇</li>
  <li>🍉</li>
  <li>🍎</li>
</ul>

<h2>霸王别姬</h2>
<dl>
  <dt>导演：</dt>
  <dd>陈凯歌</dd>
  <dt>主演：</dt>
  <dd>张国荣</dd>
  <dd>张丰毅</dd>
  <dd>巩俐</dd>
  <dt>上映日期：</dt>
  <dd>1993-01-01</dd>
</dl>

image.png

  • ol为有序列表容器，li为其中列表元素。
  • ul为无序列表容器，li为其中列表元素。
  • dl为描述列表容器，dt为所需描述对象，dd为描述内容。

引用与代码

<blockquote
    cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"
    >
      <p>
        The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or
        <em>HTML Block Quotation Element</em>) indicates that the enclosed text
        is an extended quotation.
      </p>
    </blockquote>
    <p>
      The quote element — <code>&lt;q&gt;</code> — is
      <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q"
        >intended for short quotations that don't require paragraph breaks.</q
      >
      --
      <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">
        <cite>MDN q page</cite></a
      >.
    </p>
    <pre><code>
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
</code></pre>

image.png

  • <blockquote>标签可以看到图中浏览器给块级引用的默认缩进。这一元素有cite属性可以标明引用链接。
  • <q>标签为行内引用，可以看到与前面句子在同一行上。
  • <cite>标签为引用，一般与<a>标签连用表示引用出处与引用参考网页。
  • <pre>标签内的所有缩进与换行都会被保留，<code>标签与其标签语义一样用来包含代码，通常与<pre>标签连用。
  • <strong>标签有加重意思，效果为加粗标签内文字，<em>效果为标签内文字为斜体。

注：<body>标签内的所有标签都可以添加属性class与id，值由自己选择，且id的值不得与其它相同，即id值必须唯一，而class可以不唯一。

H5语义化标签

首先简要说说什么是H5，H5即HTML5版本的简写，目前各大浏览器都已经支持H5，而H5中添加了许多语义化标签，下面我就简单介绍添加了什么标签。

<header>
        我是版首
        <nav>我是导航</nav>
</header>
    <aside>我是侧边栏</aside>
    <main>我是内容主体
        <section>我是部分内容</section>
        <article>我是文章</article>
    </main>
    <footer>我是页脚</footer>

image.png
可以发现全都是块级元素，独自占一行，那肯定有小伙伴问，块级元素我们有<div>了，还要这些标签干什么呢？这一问题我会在后面回答，接下来让我们看看H5最重要的两个标签<video>与<audio>。

<video src=""></video>
<audio src=""></audio>
  • 这两标签src属性皆为资源地址，并且还有自带的控件，这里就不详细介绍，文章末尾会附上前端er常用的文档网站。

为什么要使用语义化标签

  • 首先是利于我们开发者，类似于<header>，<footer>，<article>等标签我们开发时就能一眼明白标签内的内容是什么，而不是全是<div>，无所适从。
  • 其次，HTML是一个网页的骨架，是一个网页的结构，语义化的标签能方便我们维护页面，也能利用浏览器解析展示页面，利用搜索引擎提取关键词，更利于屏幕阅读器——给盲人读页面内容。

总的来说有以下好处：

  • 代码可读性、可维护性
  • 搜索引擎优化
  • 提升无障碍性

CSS基础入门

如果说HTML是一个网页的骨骼，那么CSS就是一个网页的肌肉，它能给我们的网页增添色彩，让我们的网页更加好看。

什么是CSS

CSS中文名称为层叠样式表（英文全称：Cascading Style Sheets），是一种用来表现HTML或XML等文件样式的计算机语言。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

上面是百度百科的说法，是不是觉得十分苦涩难懂，没有关系，听了我后面的解释你就会明白层叠样式表这一名字的含义了。

如何使用CSS

CSS的使用有三种方法：

  • 内联使用（尽量避免这种写法）
  • 嵌入使用（不推荐使用）
  • 外链引入（推荐使用）
// 这是内联使用
<p style="font-size:20px">这是段落标签</p>

// 这是嵌入使用
<head>
    <style>
    p {font-size: 20px;}
    </style>
</head>

// 这是外链引入
<head>
<link rel="stylesheet" href="./css/style.css">
</head>

CSS语法

CSS规则集（rule-set）由选择器和声明块组成：

image.png
每个规则集都以一个选择器开始，其中有多条声明，每条声明包含属性（key）和值（value），最后以分号结束一条声明。

CSS的各类选择器及其优先级

CSS有以下几类选择器：

  • 简单选择器

    • 标签选择器
    • id选择器
    • 类选择器

  • 组合选择器

  • 伪类选择器

  • 伪元素选择器

  • 属性选择器

// 特殊的选择器，通配符选择器，选择所有标签
* {font-size: 20px;}

// 这是标签选择器
p {font-size: 20px;}

// 这是id选择器
#标签id属性值 {font-size: 20px;}

// 这是类选择器
.标签class属性值 {font-size: 20px}

下面这张图是组合选择器 image.png
下面这张图是属性选择器

image.png 下面代码块为常用的伪类选择器与伪元素选择器

// :hover鼠标悬停时
a:hover {}
// 未访问的链接
a:link{}
// 激活的链接
a:active{}
// 首个子元素
选择器:first-child{}
// 最后一个子元素
选择器:last-child{}

// 下面是伪元素选择器
// 在p标签后插入内容
p::after {}
//在p标签前插入内容
p::before{}

现在每一类选择器都介绍完了，肯定会有小伙伴问那这么多选择器，如果选中了同一个元素怎么办呢？这就引出了我们的下一个知识点，选择器的优先级。 我们先介绍CSS优先级规则:

  • 我们一般采用(0,0,0,0)来统计权重，从左到右为高位到低位。
  • CSS选择规则的权值不同时，权值高优先。
  • CSS选择规则的权值相同时，后定义的规则优先。 内联样式>id选择器>类选择器、伪类选择器、属性选择器>伪元素选择器
    但是凡事都有个特例，例如：
<div id="box"></div>
#box {font-size: 20px;}
div {font-size: 16px!important;}

上面代码块，最后div内容字体大小为16px，因为!important会将这一属性权重提高到最高。
现在我们明白了选择器的优先级，也理解了为什么CSS称为层叠样式表，层叠即为后面的规则集覆盖前面的规则集。样式即为给页面添加样式。

结尾

CSS属性及属性值繁多，如何写少的CSS代码完成预期样式也是一门技术活，CSS入门简单精通却很难，笔者在此写的只是基础中的基础，原本想涵盖常用属性与布局，但自觉技术水平不够也就此搁笔，当然文中也有许多不足，欢迎各位勘误交流。

参考链接

MDN学习Web开发
W3school

avatar
文章
阅读
粉丝