初识HTML+CSS

发表于

引言

现在大前端的概念特别火，公司也是准备往这个方向做技术转型。所以，我就开始重拾多年前抛弃的前端知识，从头开始学起。本篇是对自己在慕课网学习《初识HTML+CSS》这门课程做的一个学习笔记。

HTML学习

HTML介绍

  • HTML概念

    Html指的是HyperText Markup Language超文本标记语言，它用标签来描述网页。HTML文档包含了HTML 标签及文本内容，HTML文档也叫做 web 页面。

  • Html标签

    HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

    HTML 标签是由尖括号包围的关键词，比如

    1
    <html>

    HTML 标签通常是成对出现的，比如

    1
    <b></b> <p></p>

    标签对中的第一个标签是开始标签，第二个标签是结束标签。开始标签和结束标签中间放置内容

    HTML标签不区分大小写，如<h1>和<H1>是一样的，但建议小写，因为大部分程序员都是用的小写

    HTML标签可以嵌套的，但现后顺序必须是一致的

  • HTML元素

    “HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.

    但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:

    HTML 元素:

    1
    <p>这是一个段落</p>

  • Web浏览器

    Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。

    浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户：

    注：只有 <body> 标签中的内容才会在浏览器中显示。

  • HTML版本

  • HTML、CSS和JavaScript之间的关系

    1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
    2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
    3. JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

  • HTML文件的基本结构

    1
    2
    3
    4
    <html>
        <head>...</head>
        <body>...</body>
    </html>
    1. <html></html>称为根标签，定义了整个HTML文档。所有的网页标签都在<html></html>中。
    2. <head>标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签，头部标签在下一小节中会有详细介绍。
    3. 在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。

  • HTML注释

    1
    <!--注释文字 -->

认识标签

  • 语义化

    标签的语义化，其实就是指标签的用途。说的通俗点就是：明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使用 em 标签表示强调等等。

    语义化可以给我们带来什么样的好处呢？

    1. 更容易被搜索引擎收录。

    2. 更容易让屏幕阅读器读出网页内容。

  • Head标签

    <head>元素包含了所有的头部标签元素。在<head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

    可以添加在头部区域的元素标签为: <title>,<style>,<meta>,<link>, <script>,<noscript>, and <base>.

    • title标签

      <title> 标签定义了不同文档的标题。
      <title> 在 HTML/XHTML文档中是必须的。
      <title>元素：

      1.定义了浏览器工具栏的标题

      2.当网页添加到收藏夹时，显示在收藏夹中的标题

      3.显示在搜索引擎结果页面的标题

      1
      2
      3
      4
      5
      6
      7
      8
      <!DOCTYPE html>
      <html>
      	<head>
      		<title>我是网页标题</title>
      	</head>
      	<body>
      	</body>
      <html>

    • base标签

      base 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

      1
      2
      3
      <head>
      <base href="http://www.html.cn/images/" target="_blank">
      </head>

    • link标签

      定义了文档与外部资源之间的关系。

      link标签通常用于链接到样式表:

      1
      2
      3
      <head>
      	<link rel="stylesheet" type="text/css" href="mystyle.css"/>
      </head>

    • style标签

      style标签定义了HTML文档的样式文件引用地址.

    • meta标签

      meta标签描述了一些基本的元数据。元数据也不显示在页面上，但会被浏览器解析。

      META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

      元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      <head>
      	<!--为搜索引擎定义关键词--	>
      	<meta name="keywords" content="HTML,CSS"/>
      	<!--为网页定义描述内容-->
      	<meta name="description" content="免费 web 编程"/>
      	<!--为网页定义作者-->
      	<meta name="author" content="HTML"/>
      	<!--每30秒钟刷新当前页面-->
      	<meta http-equiv="refresh" content="30"/>
      </head>

    • script标签

      script标签用于加载脚本文件，如： JavaScript。

  • 段落与文字

    • hx标签

      标题（Heading）是通过 <h1> -<h6> 等标签进行定义的。其中<h1> 定义最大的标题，<h6> 定义最小的标题。

    • p标签

      段落是通过p标签来定义的，它可以将HTML文档分割为若干段落部分。因为p标签是块级元素，所以浏览器会自动地在段落的前后添加空行。

    • br标签

      用来换行

    • 文本格式化

      HTML 使用标签 <b>(“bold”) 与 <i>(“italic”) 对输出的文本进行格式, 如：粗体 or 斜体

      这些HTML标签被称为格式化标签（请查看底部完整标签参考手册）

      通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。

      然而，这些标签的含义是不同的：

      <b> 与<i> 定义粗体或斜体文本。

      <strong> 或者<em>意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      <b>这是粗体1</b><br/>
      <strong>这是粗体2</strong><br/>
      <i>这是斜体1</i><br/>
      <em>这是斜体2</em><br/>
      <code>一行代码</code><br/>
      <small>这是小号字体</small><br/>
      <big>这是大号字体</big><br/>
      这是<sub>下标</sub>和<sup>上标</sup><br/>
      这是<ins>插入字（字下面带下划线）</ins>和<del>删除字（字带删除线）</del><br/>
      这是<kbd>键盘码（效果字会变小）</kbd><br/>
      <samp>定义计算机代码样本</samp><br/>
      <var>变量a</var><br/>
      <pre>
          大段格式化文字
          大师傅似的
          是豆腐
      </pre>
      <code>这里是代码</code><br/>
      <abbr>这是缩写</abbr><br/>
      <address>定义地址</address><br/>
      <q>短引用</q>
      <blockquote>大量引用大量引用大量引用大量引用大量引用大量引用大量引用大量引用大量引用大量引用大量引用</blockquote>
      <cite>定义引用、引证</cite><br/>
      <dfn>定义一个定义项目</dfn>

      效果如下

    • HTML区块

      大多数 HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始（和结束）；而内联元素则不会。

      块级元素如<h1>,<p>, <ul>,<table>

      内联元素如<b>,<td>, <a>, <img>

      • HTML span标签

        它是内联元素，可用作文本的容器，与 CSS 一同使用时，<span> 元素可用于为部分文本单独设置样式属性，没有语义

      • HTML div标签

        HTML <div> 元素是块级元素，浏览器会在其前后显示折行，可以划分独立得逻辑单元，把相同单元的元素放在div元素里

        如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

    • HTML字符实体

      在 HTML 中，某些字符是预留的。

      比如在 HTML 中不能使用小于号（<）和大于号（>）因为浏览器会误认为它们是标签，所以希望能正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。

      字符实体类似这样：

      比如要想显示空格，必须使用&nbsp;

  • HTML列表

    HTML 支持有序、无序和定义列表。其中，无序列表默认使用粗体圆点（典型的小黑圆圈）进行标记；有序列表默认使用数字进行标记。

    • 有序列表

      有序列表由<ol>标签开头，每个列表项由<li> 标签开头

      1
      2
      3
      4
      5
      6
      <ol>
          <li>篮球</li>
          <li>羽毛球</li>
          <li>足球</li>
          <li>乒乓球</li>
      </ol>

    • 无序列表

      无序列表由<ul> 标签开头，每个列表项由<li> 标签开头

      1
      2
      3
      4
      5
      6
      <ul>
          <li>篮球</li>
          <li>羽毛球</li>
          <li>足球</li>
          <li>乒乓球</li>
      </ul>

    • 定义列表

      定义列表由<dl> 标签开头，每个定义列表项由<dt>标签开头，每个定义列表项的定义以 <dd> 开始

      1
      2
      3
      4
      5
      6
      7
      8
      <dl>
          <dt>LoL</dt>
          <dd>英雄联盟游戏</dd>
          <dt>DOTA</dt>
          <dd>dota游戏</dd>
          <dt>DNF</dt>
          <dd>地下城与勇士</dd>
      </dl>

  • HTML表格

    表格是由 <table> 标签来定义，每个表格的行由<tr>标签定义，每行被分割为若干单元格由 <td> 标签定义。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <!--summary表示表格表述，不显示 border定义边框属性-->
    <table summary="班级表" border="1">
    	<caption>班级表</caption>
    	<tr>
    		<th>ID</th>
    		<th>姓名</th>
    		<th>年龄</th>
    		<th>分数</th>
    	</tr>
    	<tr>
    		<td>1</td>
    		<td>张三</td>
    		<td>18</td>
    		<td>90</td>
    	</tr>
    	<tr>
    		<td>2</td>
    		<td>李四</td>
    		<td>20</td>
    		<td>88</td>
    	</tr>
     </table>

    • 表格列合并

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      <table border="1">
      	<tr>
              <th>姓名>
              <!--colspan 合并列-->
              <th colspan="2">电话</th>
      	</tr>
      	<tr>
      		<td>张三</td>
      		<td>19290390932</td>
      		<td>13290390932</td>
      	</tr>
      </table>

    • 表格行合并

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      <table border="1">
          <tr>
              <th>姓名</th>
              <td>Luck</td>
          </tr>
          <tr>
              <!--rowspan 合并行-->
              <th rowspan="2">电话</th>
              <td>111123123</td>
          </tr>
          <tr>
           <td>323231123</td>
          </tr>
      </table>

  • thead，tfoot,tbody标签

    <thead>标签用于组合 HTML 表格的表头内容，<tbody> 标签用于组合 HTML 表格的主体内容,<tfoot> 标签用于组合 HTML 表格的页脚内容。这三个元素标签要结合起来使用，用来规定表格的各个部分（页脚、表头、主体）。通过使用这些元素，使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。当包含多个页面的长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    <table border="1">
      <caption>月份营业额总表</caption>
      <thead>
        <tr>
          <th>Month</th>
          <th>Savings</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td>Sum</td>
          <td>$180</td>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>January</td>
          <td>$100</td>
        </tr>
        <tr>
          <td>February</td>
          <td>$80</td>
        </tr>
      </tbody>
    </table>

  • HTML表单

    表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容，指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

    • form标签

      form标签用于创建供用户输入的 HTML 表单。

      form标签包含一个或多个如下的表单元素：

      input,textarea,button,select,option,optgroup,fieldset,label

      当表单提交的数据是是被动的，并且没有敏感信息可采用GET的方式提交

      如果表单正在更新数据，或者是包含敏感信息时就可以用POST方式，因为它安全性更高

    • input标签

      用于输入框，其输入类型是由类型属性（type）定义的

      注意:同一组的单选按钮，name 取值一定要一致

    • textarea标签

      <textarea>标签定义一个多行的文本输入控件。

      文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。

      可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。

      1
      <textarea rows="10" cols="20">哈哈，我是默认的内容</textarea>

    • button标签

      <button> 标签定义一个按钮。

      在<button>元素内部，可以放置内容，比如文本或图像。这是该元素与使用 <input>元素创建的按钮之间的不同之处。

      提示：请始终为 <button> 元素规定 type 属性。不同的浏览器对 <button> 元素的 type 属性使用不同的默认值。

    • select标签

      <select> 元素用来创建下拉列表。

      <select> 元素中的 <option>标签定义了列表中的可用选项。 

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      <form>	
      	FirstName: <input type="text" name="firstName" value="Jack"/> <br/>
      	LastName: <input type="text" name="lastName" value="mick"/><br/>
      	你的姓氏：男：<input type="radio" name="sex" value="male" checked="checked"/> 女：<input type="radio" name="sex" value="female"/> <br/>
      	你的爱好：篮球<input type="checkbox" name="hobby" value="basktball"/> 足球<input type="checkbox" name="hobby" value="football"/>乒乓球<input type="checkbox" name="hobby" value="pingpang"/><br/>
      	<input type="password" name="pwd"/><br/>
      	<textarea rows="10" cols="30" name="content">Default world</textarea><br/>
      	<button type="button">点我</button>
      	请选择最喜欢的老师:
      	<select name="teacher">
      	  <option value="mick">Mick</option>
         	  <option value="jack">Jack</option>
            <option value="marry">Marry</option>
      	</select>
      	<input type="submit" value="提交"/>
      </form>

      表单提交的方式默认是Get，所以请求参数是会放到url中的

      如上面提交后url变为file:///C:/Users/Administrator.DESKTOP-EPLRDTE/Desktop/new.html?firstName=Jack&lastName=mick&sex=male&pwd=123&content=Default+world&teacher=jack

  • HTML链接

    HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面

    • a标签

      HTML使用标签 <a>来设置超文本链接。

      超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

      当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

      在标签<a> 中使用了href属性来描述链接的地址。

      默认情况下，链接将以以下形式出现在浏览器中：

      1.一个未访问过的链接显示为蓝色字体并带有下划线。

      2.访问过的链接显示为紫色并带有下划线。

      3.点击链接时，链接显示为红色并带有下划线。

      注意：如果为这些超链接设置了 CSS样式，展示样式会根据 CSS 的设定而显示。

      target属性：可以定义被链接的文档在何处显示，值为_blank链接将在新窗口中打开

      id属性：id属性可用于创建在一个HTML文档书签标记。书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的。当某个a标签定义了id，那么其它链接可以再次指向它

      1
      2
      3
      4
      //点击在新窗口中打开百度
      <a href="https://www.baidu.com" target="_blank" id="baidu">跳向百度</a>
      //点击会跳到上面a标签的位置，并且浏览器的url后面会加上 #baidu
      <a href="#baidu">跳到上面a标签的地方</a>

      <a>标签还有一个作用是可以链接Email地址，使用mailto能让访问者便捷向网站管理者发送电子邮件。我们还可以利用mailto做许多其它事情。

      1
      <a href="mailto:598359782@qq.com?cc=xiao@163.com&bcc=xiao3@163.com&subject=你好，这是标题&body=你好，这是内容" title="">发送邮件</a>

    • link标签

      <link> 标签定义文档与外部资源的关系。

      <link> 标签最常见的用途是链接样式表。

      注意： link 元素是空元素，它仅包含属性。

      注意： 此元素只能存在于 head 部分，不过它可出现任何次数。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8">
      <!--rel属性必需。定义当前文档与被链接文档之间的关系。 type 规定被链接文档的 MIME 类型。-->
      <link rel="stylesheet" type="text/css" href="https://public.xp.cn/down/course_demo/html/styles.css"> 
      </head>

      <body>
      <h1>我是通过样式文件 styles.css 渲染后显示的。</h1>
      <p>我也是。</p>
      </body>
      </html>

    • nav标签

      <nav> 标签定义导航链接的部分。

      并不是所有的 HTML 文档都要使用到 <nav> 元素。<nav> 元素只是作为标注一个导航链接的区域。

      在不同设备上（手机或者PC）可以制定导航链接是否显示，以适应不同屏幕的需求。

      1
      2
      3
      4
      5
      <nav>
      	<a href="https://www.baidu.com">百度</a>
      	<a href="http://www.jikedaohang.com/">极客导航</a>
      	<a href="https://www.google.com/">谷歌</a>
      </nav>

  • HTML颜色

    颜色值由十六进制来表示红、绿、蓝（RGB）。每个颜色的最低值为 0(十六进制为 00)，最高值为 255(十六进制为FF)。十六进制值的写法为 # 号后跟三个或六个十六进制字符。

  • HTML图像

    通过<img>标签在HTML文档中显示图像。<img>标签是一个空标签，只包含属性，并且没有闭合标签。

    要在页面上显示图像，需要使用源属性src，源属性的值是图像的 URL 地址。

    alt 属性用来为图像定义一串预备的可替换的文本，替换文本属性的值是用户定义的。这个属性主要在浏览器无法载入图像时，替换文本属性告诉用户未加载图像的信息。此时浏览器将显示这个替代性的文本而不是图像，这样有助于更好的显示信息

    1
    <img src="https://blog.gamersensei.com/wp-content/uploads/2017/05/Slark-Header1080-768x486.png" alt="小鱼人图片"/>

    title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；

  • HTML属性

    HTML 标签可以拥有属性，属性提供了有关 HTML 元素的更多的信息。它总是在HTML元素的开始标签中定义的，以名称/值对的形式出现，比如：name=”value”。

    1
    2
    3
    <!--a标签的href属性-->
    <a href="http://www.html.cn/">html中文网</a>
    <img src="images/1.jpg">

    注意：属性和属性值对大小写不敏感，但最好还是以小写的形式去写；属性值应该始终被包括在引号内，双引号是最常用的，不过使用单引号也没有问题。

    大多数标签具备的属性

  • HTML框架

    iFrame标签定义了放置在每个框架中的 HTML 文档。通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。

    1
    2
    3
    4
    <!--在body标签中添加iFrame标签，会在当前页面中出现一个单独的页面-->
    <body>
    	<iframe src="http://www.html.cn" frameborder="1" width="1080px" height="300px" scrolling="yes"></iframe>
    </body>