10天学会HTML和CSS（第1天）

chenlunju

于 2021-07-11 09:53:34 发布

阅读量357

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/chenlunju/article/details/118650761

版权

在互联网中，大部分的标准由w3c（万维网联盟 https://www.w3.org/）非盈利组织制定；XML是可扩展标记语言（EXtensible Markup Language）用于定义文档结构；HTML（Hypter Text Markup Language 超文本标记语言)根据w3c标准定义是描述页面结构的语言，页面有什么东西，又表示什么含义。

怎么查阅文档：

MDN：Mozilla Development Network , Mozilla开发者社区。

什么是CSS？

CSS也是w3c定义的语言标准，用于描述页面展示的语言，决定了页面长什么样子。

怎么执行HTML和CSS？交给浏览器执行，实际是浏览器的内核（core），浏览器shell是浏览器的外壳。浏览器内核主要负责JS执行引擎和渲染引擎。

IE：Trident
Firfox：Gecko
Chrome：Webkit / Blink
Safari：Webkit
Opera：Presto / Blink

开发环境准备：

Chrome浏览器
VSCode编辑器：VSCode内置Emmet插件，可以快速的生成HTML代码片段，例如，新建一个index.html文件，用VSCode打开，输入一个感叹号，按住tab键则可以快速生成代码片段。

下面就是一段HTML代码，其中包含了注释和一个h1元素，注释的快捷键是ctrl+/。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 这是注释 -->
    <h1>JavaScript 笔记！</h1>
</body>
</html>

1 元素

元素（又叫标签，标记）由起始标记（begin tag）、结束标记（end tag）、元素内容和元素属性组成。

属性由属性名和属性值组成。

属性的分类：

局部属性：某些元素特有的属性
全局属性：所有元素通用

元素不能交叉嵌套。

标准文档结构：页面、HTML文档

<!DOCTYPE html>文档声明，告诉浏览器当前文档使用的HTML标准是HTML5，如果不写将导致浏览器进入怪异渲染模式。

<html></html>根元素，一个页面最多只能一个，HTML5中不是强求书写。

lang属性全局属性，表示内部使用的文字。

<head></head> 不会显示到页面上。

<meta>文档的元数据。

charset="UTF-8" 指定网页编码，UTF-8是Unicode编码的一个版本

<body></body>所有要参与显示的元素，都应该放置到文档体中。

2 语义化

每一个HTML都有具体的含义
所有元素与展示效果无关

选择什么元素取决于内容的含义，而不是显示出来的效果

为什么需要语义化？

为了搜索引擎的优化（SEO）
为了让浏览器理解网页

3 文本元素

使用emmet插件，输入h$*6{$级标题}后按Tab键快速生成如下代码块。

<body>
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>
</body>

乱数假文：输入lorem按Tab，生成一段随机文字，常用于测试排版。

h1～h6，表示1级标题～6级标题
p 段落
span 无语义元素，用于样式设置
pre 预格式化文本元素，pre元素中的内容不会出现空白折叠。实际上是CSS样式的whitespace：pre

空白折叠：在源代码中连续出现的空白字符，在页面显示的时，会被折叠为一个空格。

以前，某些元素不独占一行叫行级元素，独占一行叫做块级元素。HTML5弃用了这种说法。

4 实体字符

实体字符（HTML Entity）常用于在页面中显示一些特殊符号。两种表示方法：

&单词; 如<是小于符号， 是空格。
&#数字;

5 a元素

超链接，href (hyper reference)，target属性标记跳转方式是在当前位置打开，还是新开页面。

<a href="https://www.baidu.com">JavaScript 笔记</a>

锚链接

<a href="#chapter1">JavaScript 笔记</a>

<a href="#">回到顶部</a>

功能性链接，点击后执行JS代码、发送邮件、拨打电话、

<a href="javascript:alert('ok')">ok</a>

跳转的路径写法：

站内资源一般使用相对路径
站外资源只能使用绝对路径

注意：当跳转的目标和当前页面的协议相同的时候，可以省略协议。

6 img元素

src属性是必须的，它包含了你想嵌入的图片的文件路径。

点击图片实现跳转功能：

<a href="https://www.baidu.com">
    <img src="xxx" alt="">
</a>

usemap属性，可以实现点击图片不同区域实现不同的跳转功能。

<map name="infographic">
    <area shape="poly" coords="130,147,200,107,254,219,130,228"
          href="https://developer.mozilla.org/docs/Web/HTML"
          target="_blank" alt="HTML" />
    <area shape="poly" coords="130,147,130,228,6,219,59,107"
          href="https://developer.mozilla.org/docs/Web/CSS"
          target="_blank" alt="CSS" />
    <area shape="poly" coords="130,147,200,107,130,4,59,107"
          href="https://developer.mozilla.org/docs/Web/JavaScript"
          target="_blank" alt="JavaScript" />
</map>
<img usemap="#infographic" src="/media/examples/mdn-info2.png" alt="MDN infographic" />

figure元素和子元素figcaption，实现图片和文字配合显示。

<figure>
  <img
  src="https://developer.mozilla.org/static/img/favicon144.png"
  alt="A robotic monster over the letters MDN.">
  <figcaption>MDN Logo</figcaption>
</figure>

可替换元素（replaced element ）和非可替换元素（non-replaced element）大部分元素，页面上的显示的结果，取决于元素内容，称为非可替换元素；少部分元素，页面上的显示的结果，取决于元素属性，称为可替换元素。

可替换元素：img，video，iframe。

img元素只设置宽度（高度），则高度（宽度）成比例变化，可以设置object-fit属性，来决定图片适应方式，有fill(默认值）、contain、cover等取值。