一、HTML&CSS概述

术语

互联网

万维网联盟，非营利性的组织：w3.org

可扩展的标记语言：extension markup language 用于定义文档结构

什么是HTML？

HTML是W3C组织定义的语言标准，是用于描述页面结构的语言，全称为Hyper Text Markup Language ,即超文本标记语言

（MDN：Mozilla Development Network,Mozilla开发者社区，可中文查看W3C标准）

什么是CSS?

CSS是W3C组织定义的语言标准，是用于描述页面展示的语言，全称为Cascading Style Sheets ，即层叠样式表

执行HTML CSS

由浏览器内核执行（浏览器渲染引擎执行）

市面常见浏览器及其内核

浏览器	内核	备注
IE	Trident	IE、猎豹安全、360极速浏览器、百度浏览器
Firefox	Gecko	火狐浏览器
Safari	Webkit	苹果浏览器
Chrome/Opera	Blink	Chrome/Opera浏览器，Blink其实是Webkit的分支

版本和兼容性

HTML5、CSS3

HTML5:2014年

CSS3：目前还没有制定完成

二、第一个网页

Emmet插件：自动生成HTML代码片段

<!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>
    
</body>
</html>

注释

注释为代码的阅读者提供帮助，注释不参与运行

在HTML中，注释使用如下格式书写:(快捷键ctrl+/)

元素

<title>第一个网页</title>
<a href="http://www.baidu.com">百度</a>

整体：element（元素）

元素=起始标记（begin tag）+结束标记（end tag）+元素内容+元素属性

属性=属性名+属性值

属性的分类：

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

有些元素没有结束标记，这样的元素叫做空元素，例如：

<meta charset="UTF-8">

空元素的两种写法

<meta charset="UTF-8">
<meta charset="UTF-8"/>

元素的嵌套

元素不能相互嵌套
父元素、子元素、祖先元素、后代元素、兄弟元素（拥有同一个父元素的两个元素）

标准的HTML文档结构

<!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>
    
</body>
</html>

<!DOCTYPE html>

文档声明，告诉浏览器，当前文档使用的HTML标准是HTML5.

DOC-document-文档 type-类型 html-超文本标记语言

不写文档声明将导致浏览器进如怪异渲染模式

<html lang="en">
</html>

根元素，一个页面最多只能一个，并且该元素是其他元素的父元素或祖先元素。

HTML5中该元素不是必需的，可以是隐含的

lang属性：language，全局属性，表示该元素内部使用的文字是哪一种自然语言书写而成

en 英文；cmn-hans 官方简中

<head>  
</head>

文档头元素，文档头内部的内容，不会显示到页面上

<meta>

文档的元数据：附加信息

<meta charset="UTF-8">

charset：指定网页内容编码

UTF-8：字符编码

<meta name="viewport" content="width=device-width, initial-scale=1.0">

适配手机端

<title>
</title>

网页标题

<body> 
</body>

文档体，页面上所有要参与显示的元素，都应该放置到文档体中

三、语义化

什么是语义化

每一个HTML元素都有具体的含义

a元素：超链接
p元素：段落
h1-h6元素：1-6级标题

所有元素与展示效果无关

元素展示到页面中的效果应该有CSS决定。

浏览器带有默认的CSS样式，所以每个元素有一些默认的样式

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

为什么需要语义化

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

四、文本元素

HTML5中支持的元素：HTML5元素周期表www.xuanfengge.com/funny/html5…

h

标题：head

h1-h6：表示一级标题到六级标题

利用VScode的Emmet插件可以实现一些批量快捷操作，如快速写出一到六级标题

h$*6>{$级标题}
<body>
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>
</body>

p

段落：paragraphs

利用VScode的Emmet插件生成多个段落

p*6>{这是一段文字}
<body>
    <p>这是一段文字</p>
    <p>这是一段文字</p>
    <p>这是一段文字</p>
    <p>这是一段文字</p>
    <p>这是一段文字</p>
    <p>这是一段文字</p>
</body>

利用VScode的Emmet插件生成乱数假文

乱数假文：没有任何实际含义的文字

p*6>lorem
<body>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing</p>
    <p>Dicta unde voluptate ab earum voluptatibus incidunt </p>
    <p>Veritadicta quidem facilis omnis.</p>
    <p>Provident Dolorem cupiditate in optio corrupti ipsam vitae</p>
    <p>Quia dolores qui aperiam reprehenderit dolor neque laborum eius.</p>
    <p>Numquam,  Mollitia porro modi ad ullam dolore quos, quaerat nihil.</p>
</body>

利用VScode的Emmet插件生成乱数假文，并限定每段字数

p*6>lorem10
<body>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, unde.</p>
    <p>Temporibus cupiditate eaque saepe provident sed optio est error illo!</p>
    <p>Provident ipsa eos ducimus quisquam enim dolorem sapiente beatae iure.</p>
    <p>Illum quia exercitationem aperiam nobis voluptates sit ad odio? Sit?</p>
    <p>Enim maiores aut rerum temporibus nobis eligendi hic, voluptatum inventore!</p>
    <p>Sapiente enim doloribus qui hic iusto ab tenetur, numquam accusantium.</p>
</body>

span【无语义】

没有语义，仅用于样式的设置

某些元素在显示时会独占一行（块级元素），而某些元素不会（行级元素）

现在：HTML5中已经弃用块级元素和行内元素这种说法

pre

预格式化文本元素

空白折叠：在源代码中的连续空白符（空格、换行、制表），在页面显示时，会被折叠为一个空格

在pre元素中的内容，会按照源代码的格式显示到页面上，不会出现空白折叠。

该元素通常用于在网页显示一些代码

pre元素功能的本质：它有一个默认的CSS属性

小技巧

TAB 增加缩进

SHIFT+TAB 减少缩进

HTML实体

实体字符，HTML Entity，通常用于在页面中显示一些特殊符号

表示方法：(包含分号)

&单词；

&#数字;

小于号&lt;或者&#60;
大于号&gt;
空格&nbsp;
版权符号&copy;
and符号&amp;

五、a元素

href属性

英文全称为hyper reference，通常表示跳转地址

跳转地址

<a href="http://www.baidu.com">百度</a>

跳转某个锚点（锚链接）

<a href="#001">第一章</a>
<h2 id="001">第一章</h2>

id属性：全局属性，表示元素在文档中的唯一编号

回到顶部

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

功能性链接

点击后触发某个功能

执行JS代码，javascript:
发送邮件,mailto:（要求用户计算机上安装有邮件发送软件：exchange）
拨打电话,tel:（要求用户计算机上安装有拨号软件或使用移动端）

小技巧

批量生成标题+段落，例

((h2>{章节$})+p>lorem10)*6	

    <h2>章节1</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, velit!</p>
    <h2>章节2</h2>
    <p>Assumenda distinctio quam reiciendis error expedita illo deserunt consequuntur ullam!</p>
    <h2>章节3</h2>
    <p>Nostrum, minus? Obcaecati ea culpa ut harum temporibus amet dolore!</p>
    <h2>章节4</h2>
    <p>Dolorum nisi placeat maiores debitis voluptate accusamus, unde odit harum!</p>
    <h2>章节5</h2>
    <p>Fugit iusto cum odio. Cupiditate doloremque pariatur minima. Earum, adipisci.</p>
    <h2>章节6</h2>
    <p>Corporis vitae suscipit numquam quibusdam consectetur quisquam quaerat sed dolores.</p>

生成了六段带二级标题的,单词字数为10个的乱数假文

批量生成带id的标题+段落，例

((h2[id="chapter$"]>{章节$})+p>lorem10)*6

	<h2 id="chapter1">章节1</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde, officia.</p>
    <h2 id="chapter2">章节2</h2>
    <p>Tempore, dolore ea sit aut consectetur labore molestiae ex veniam.</p>
    <h2 id="chapter3">章节3</h2>
    <p>Rerum earum deserunt blanditiis nostrum optio odit, repudiandae ad illo?</p>
    <h2 id="chapter4">章节4</h2>
    <p>Magni, consectetur veritatis excepturi aliquam voluptatem adipisci itaque sapiente quam.</p>
    <h2 id="chapter5">章节5</h2>
    <p>Delectus laudantium aspernatur itaque animi veniam adipisci, officiis sapiente a?</p>
    <h2 id="chapter6">章节6</h2>
    <p>Facere quisquam excepturi odit voluptatum explicabo assumenda fugit possimus odio!</p>

批量生成锚链接

(a[href="#chapter$"]>{章节$})*6

    <a href="#chapter1">章节1</a>
    <a href="#chapter2">章节2</a>
    <a href="#chapter3">章节3</a>
    <a href="#chapter4">章节4</a>
    <a href="#chapter5">章节5</a>
    <a href="#chapter6">章节6</a>

target属性

表示跳转窗口位置

target的取值：

_self:在当前页面窗口打开，默认值

_blank:在新窗口中打开

<a href="http://www.baidu.com">百度搜索</a>
<a href="http://www.baidu.com" target="_self">百度搜索</a>
<a href="http://www.baidu.com" target="_blank">百度搜索</a>

前端学习-day1