美文网首页
HTML+CSS基础

HTML+CSS基础

作者: 我是阿喵酱 | 来源:发表于2019-07-23 19:41 被阅读0次

任务一：课程简介

任务二：学习内容简介

我们主要学习哪些内容？

根据W3C标准，一个网页主要由三部分组成：结构、表现还有行为。

W3C标准：

  1. 结构 HTML。HTML用于描述页面的结构。
  2. 表现 CSS。CSS用于控制页面中元素的样式。
  3. 行为 JavaScript。JavaScript用于响应用户操作。

这一阶段我们学什么？

主要内容有：

  1. HTML
  2. CSS
  3. 网页布局

万维网联盟（W3C）

万维网联盟World Wide Web Consortium。

  1. W3C专门为了定义网页相关的标准而成立。
  2. W3C定义了网页中的HTML、CSS、DOM、 HTTP、XML等标准。

任务三：HTML简介

HTML

  1. HTML（Hypertext Markup Language） 超文本标记语言。
  2. 它负责网页的三个要素之中的结构。
  3. HTML使用标签的的形式来标识网页中的不同组成部分。
  4. 所谓超文本指的是超链接，使用超链接可 以让我们从一个页面跳转到另一个页面。

任务四：HTML注释

注释

  1. HTML注释中的内容不会在网页中显示。
  2. 格式:
  3. 合理的使用注释可以帮助开发人员理解网页的代码，注释一定要简单明了。
  4. 注释不能嵌套！

最基本的HTML页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    <h1>网页正文</h1>
</body>
</html>

标签

  1. HTML中的标记指的就是标签。

  2. HTML使用标签来描述网页。

  3. 结构：

    ​ <标签名>标签内容</标签名>

    ​ <标签名 />

元素

  1. 我们还将一个完整的标签称为元素。标签=元素

  2. 这里我们可以将元素和标签认为是一个同义词。

  3. <h1>一级标题</h1>

  4. 上边的h1我们就称为元素

  5. <p>我是一个<em>段落</em></p>

  6. p也是一个元素。em是p的子元素，p是em的父元素。

  7. <body> 
    <p><em>内容</em></p> 
</body>

  8. body也是一个元素。body是p和em的祖先元素，p和em是body的后代元素。

任务5：标签的属性

属性

  1. 可以为HTML标签设置属性。
  2. 通过属性为HTML元素提供附加信息。
  3. 属性需要设置在开始标签或自结束标签中。
  4. 属性总是以名值对的形式出现。
  5. 比如：name=“value”
  6. 有些属性可以是任意值，有些则必须是指定值。
  7. 属性名 = "属性值"，一个标签中可以同时设置多个属性，属性之间需要使用空格隔开 
<h1 title="我是一个标题">标题</h1> 
<img src="" alt="" />

常见属性

id

id属性作为标签的唯一标识，在同一个网页中不能 出现相同的id属性值。

class

class属性用来为标签分组，拥有相同class属性的 标签我们认为就是一组，可以出现相同的class属 性，可以为一个元素指定多个class。

title

title属性用来指定标签的标题，指定title以后，鼠标移入到元素上方时，会出现提示文字。

任务6：文档声明

HTML的发展历史

  1. 1993年6月：HTML第一个版本发布。
  2. 1995年11月：HTML2.0
  3. 1997年1月：HTML3.2（W3C推荐）
  4. 1999年12月：HTML4.01（W3C推荐）
  5. 2000年底：XHTML1.0（W3C推荐）
  6. 2014年10月：HTML5（W3C推荐）

DOCTYPE

  1. HTML总共有那么多的版本，而且这其中至 少有三个版本在广泛使用，那么浏览器怎 么知道我们在使用哪个版本呢？
  2. 为了让浏览器知道我们使用的HTML版本我 们还需要在网页的最上边添加一个doctype声明，来告诉浏览器网页的版本

H5

我们会发现html4.01和xhtml的文档声明十 分的麻烦。不过不用担心，以上的内容都 不是我们使用的，我们使用的是html5的文档声明，而且非常简单：

<!DOCTYPE html>

怪异模式

  1. 为了兼容一些旧的页面，浏览器中设置了 两种解析模式：
    1. 标准模式（Standards Mode）
    2. 怪异模式（Quirks Mode）
  2. 怪异模式解析网页时会产生一些不可预期 的行为，所以我们应该避免怪异模式的出 现。
  3. 避免的最好方法就是在页面中编写正确的 doctype。

任务7：进制的简介

简介

几进制就是满几进一

二进制

0 1

10 11 100 101 110 111

十六进制

满16进1

0 1 2 3 4 5 6...9 a b c d e f

10 11 12 ... 19 1a 1b 1c 1d 1e 1f

16进制由于是满16进1，所以必须设置几个特殊的字符来表示10 11 12 13 14 15，使用a b c d e f分别表示10 11 12 13 14 15

八进制

满8进1

0 1 2 3 4 5 6 7

10 11 12 13 14 15 16 17 20 21 22

任务8：乱码问题

编码问题

  1. 在计算机的内部，文件都是以二进制编码保存的。
  2. 所谓的二进制编码就是指 1 和 0 ，也就是我们的所有内容都需要转换为 1 和 0 。
  3. 中国 两个字在计算机的底层保存的可能要转换为 10100101 这种二进制码，这一过程称为 编码 。
  4. 计算机在读取文件时需要将 10100101 在转换为中国给我们显示这一过程称为 解码 。

字符集

  1. 这就带来一个问题，中国到底是 10100101还是 01011010 到底由谁说了算。
  2. 所以我们还需要一个东西称为 字符集 ，字符集规定了如何将文本转换为二进制编码。
  3. 常见的字符集： ASKII 、 ISO8859-1 、 GBK 、GB2312 、 UTF 8

乱码

  1. 如果我们保存文件时使用的是utf-8进行编码，而浏览器读取页面时使用gb2312，这样就会导致页面中的内容不能正常显示，也就是我们所说的乱码。
  2. 所以我们只需要统一两者使用的字符集就可以解决乱码问题。
  3. 这里为了页面有更好的使用性，我们一般使用utf-8。

解决

  1. 保存文件的编码我们直接通过编辑器即可指定，接下来就是要告诉浏览器使用什么字符集去解析文件。

  2. 在html5中只需要使用meta标签即可完成这个任务：

    <meta charset="utf-8" />

meta

  • 作用：
    • 标签可提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。
    • 标签位于文档的头部，不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。

meta的用法

  • 设置页面的字符集

    • <meta charset="utf-8">

  • 设置网页的描述

    • <meta name="description" content="">

  • 设置网页的关键字

    • <meta name="keywords" content="">

  • 请求的重定向

    • <meta http-equiv="refresh"  content="5;url=地址"/>

任务9：常用的标签

html

  • 作用：
    • <html>标签用于告诉浏览器这个文档中包含的信息是用HTML编写的。
  • 用法：
    • 所有的网页的内容都需要编写到html标签中，一个页面中html标签只能有一个。
    • html标签中有两个子标签head和body。

head

  • 作用：
    • <head>标签用来表示网页的元数据，head中包含了浏览器和搜索引擎使用的其他不可见信息。
  • 用法：
    • head标签作为html标签的子元素的出现，一个网页中只能有一个head。

title

  • 作用：
    • <title>标签表示网页的标题，一般会在网页的标题栏上显示。
    • title标签中的文字，是页面优化的最重要因素。在搜索引擎的搜索时最先看到的、最醒目的内容。
  • 用法：
    • 建议将title标签紧贴着head标签编写，这样搜索引擎可以快速检索到标题标签。
    • 网站中的多个页面的title也不应该重复，这样不利于搜索隐藏检索。

body

  • 作用：
    • <body>标签用来设置网页的主体，所有在页面中能看到的内容都应该编写到body标签中。
  • 用法：
    • body标签作为html的子标签使用。

h1~h6

  • 作用：
    • h1h6都是网页中的标题标签，用来表示网页中的一个标题，不同的是，从h1h6重要性越来越低。
    • 标题标签相当于正文的标题，通常认为重要性仅次于页面的title。
    • 一般标题标签我们只会使用到h3，h3以后的标题标签对于搜索引擎就没有什么意义了。
    • 一个页面中只会使用一个h1标签。

p

  • 作用：
    • <p>标签表示网页中的一个段落。
    • 一般浏览器会在段落的前和后各加上一个换行，也就是段落会在页面中自成一行。

br

  • 作用：
    • <br />标签表示一个换行标签，使用br标签可以使br标签后的内容另起一行。

hr

  • 作用：
    • <hr />标签是水平线标签，使用hr标签可以在页面中打印一条水平线，水平线可以将页面分成上下两个部分。

a

  • 作用：
    • <a>标签是超链接标签，通过a标签，可以快速跳转到其他页面。
  • 属性：
    • href
      • 指向一个链接地址
    • target
      • 设置打开目标页面的位置，可选值：_blank新窗口、_self当前窗口。

任务10：实体

实体

  1. 在HTML中预留了一些字符。
  2. 这些预留字符是不能在网页中直接使用的。
  3. 比如<和>,我们不能直接在页面中使用<和>号，因为浏览器会将它解析为html标签。
  4. 为了可以使用这些预留字符，我们必须在html中使用字符实体。
  5. 语法: &实体名;

字符实体

  • 小于号<
    • &lt;
  • 大于号>
    • &gt;
  • 空格
    • &nbsp;
  • 和符号&
    • &amp;
  • 版权©
    • &copy;
  • 引号"
    • &quot;
  • 注册商标®
    • &reg;
  • 商标™
    • &trade;

任务11：图片标签

img

  • 作用：
    • <img/>标签是图片标签，可以用来向页面中引入一张外部的图片。
  • 属性：
    • src
      • 指向一个外部的图片的路径。
    • alt
      • 图片的描述。搜索引擎可以通过alt属性来识别

相关文章

网友评论

      本文标题：HTML+CSS基础

      本文链接：https://www.haomeiwen.com/subject/fpbalctx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|HTML+CSS基础|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！