第1篇-html与css入门

作者: 你单排吧 | 来源:发表于2020-03-31 15:46 被阅读0次

一、WEB前端标准的组成部分

Web前端标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。主要包括结构（Structure——HTML）、表现（Presentation——CSS）和行为（Behavior——JavaScript）三个方面：
第一、网页的结构HTML5 ---作用：负责网站整体的结构和内容----重要
第二、网页的样式、表现CSS3----作用：负责网页的样式---美化我们页面
第三、网页的行为、特效JS---Javascript--负责网页动效（动画）

二、常见浏览器介绍

浏览器是网页运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我们平时称为五大浏览器。

1560932750109.png

查看浏览器占有的市场份额（了解）

https://h5.m.jd.com/dev/3dm8aE4LDBNMkDfcCaRxLnVQ7rqo/index.html 最新浏览器下载地址
查看网站： http://tongji.baidu.com/data/browser

1560932789991.png

浏览器内核（了解）

浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。
渲染引擎 它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
JS 引擎 则是解析 Javascript 语言，执行 javascript语言来实现网页的动态效果。
最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。有一个网页标准计划小组制作了一个 ACID 来测试引擎的兼容性和性能。内核的种类很多，如加上没什么人使用的非商业的免费内核，可能会有10多种，但是常见的浏览器内核可以分这四种：Trident、Gecko、Blink、Webkit。

三、HTML骨架格式

日常生活的书信，我们要遵循共同的约定，这就是所谓的：约定俗成。

timg.jpeg
课堂练习：用记事本，书写我们的第一个HTML 页面！
格式：我们的html语言都是放在一对尖括号里面的<>,有开始就有结束（开始和结束的区别就是结束多了一个反斜杠）<html></html>

<html>---超文本标记语言
  <head>-------网页的头部
    <title></title>----网页的标题
  </head>
  <body></body>网页的主体
</html>

注意：进入代码阶段输入法首先切换到英文状态下，先测试自己输入法是英文状态下

新建一个名字为demo 的 .txt 文件。
里面写入刚才的HTML 骨架。
把后缀名改为 .html。
右击--谷歌浏览器打开。
为了便于记忆，我给大家介绍一个：猪八戒记忆法

pig.png

四、什么是HTML5

HTML5是HTML语言发展到现在的第5个版本，所以5是一个版本号；HTML最主要作用就是负责网页的结构；
html5=html5（标签）+css3（样式）+JavaScript（行为）+api（应用程序说明书）；

五、HTML5标签关系

标签的相互关系就分为两种：

1、嵌套关系

<head>  <title> </title>  </head>

father.jpg

2、并列关系

<head></head>
<body></body>

xiong.jpg
倡议： 如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位。如果是并列关系，最好上下对齐。

六、开发工具

这些工具你认识几个？

33.png

常用开发软件：微信开发者工具、Vscode、HbuilderX、Webstorm、Sublime
比较少用：Dreamweaver、Hbuilder

七、Vscode配置与快捷键

1、插件安装

按图点击 插件商店 图标：

6.png
搜索 open ，选择 open in browser 进行安装。

7.png
搜索 chinese ，选择 中文简体 进行安装。
安装好中文插件后，需要重启vscode生效。

2、快捷键设置

通过 首选项 进入 键盘快捷方式

4.png
搜索 向下：

5.png
双击即可修改，我一般习惯使用 ctrl+shift+D，你也可以根据个人喜好修改。如果快捷键有冲突，它会提示你。
这个快捷键用于：快速复制当前行。

往后，随着我们学习的深入，会安装越来越多的插件。

3、常用快捷键

文字太长需要换行？
alt+z
直接打开默认浏览器？
alt+b

八、文档类型与字符集

<!DOCTYPE html>

1、`<!DOCTYPE html>`的作用

这句话就是告诉我们使用哪个html版本？我们使用的是 html 5 的版本。 html有很多版本，那我们应该告诉用户和浏览器我们使用的版本号。
<!DOCTYPE> 标签位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范，必需在开头处使用<!DOCTYPE>标签为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能按指定的文档类型进行解析。
注意：一些老网站可能用的还是老版本的文档类型比如 XHTML之类的，但是我们学的是HTML5,而且HTML5的文档类型兼容很好(向下兼容的原则)，所以大家放心的使用HTML5的文档类型就好了。
html5以前的文档类型：

1.XHTML1.1
    语法：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    
2.XHTML 1.0 Frameset
    语法：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
    
3.XHTML 1.0 Transitional
    语法：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

4.XHTML 1.0 Strict
    语法：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

5.HTML 4.01 Frameset
    语法：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

6.HTML 4.01 Strict
    语法：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

7.HTML 5
    语法：<!DOCTYPE html>

2、DOCTYPE的作用

声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。

document.compatMode：

BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。
CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。
这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat。

3、字符集

记住一点，以后我们统统使用UTF-8 字符集, 这样就避免出现字符集不统一而引起乱码的情况了。

九、【HTML5涉及的标签】

1、标题标签( 熟记)

<hn>   标题文本   </hn>

注意： h1 标签因为重要，尽量少用，一般h1 都是给logo使用。

2、段落标签( 熟记)

单词缩写： paragraph 段落
在网页中要把文字有条理地显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标签就是

<p>  文本内容  </p>
<p align="left">左对齐</p>      align-对齐方式 left左对齐
<p align="center">居中对齐</p>   center--居中对齐
<p align="right">右对齐</p>      right---右对齐

是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。

3、换行标签(熟记)

单词缩写： break 打断 ,换行
在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签

<br />

这时如果还像在word中直接敲回车键换行就不起作用了。

4、水平线标签(认识)

单词缩写： horizontal 横线
在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标签来完成，<hr />就是创建横跨网页水平线的标签。其基本语法格式如下：

<hr />是单标签

在网页中显示默认样式的水平线。
课堂练习2：新闻页面

8.png

5、盒子标签(比较典型的就是div 和 span标签）

div标签----大盒子，没有固定定义，就是一个容器、一个大盒子，可以用来承载任何的内容和标签，经验：用来给网页分区；
span标签-----小盒子，也是一个容器，一般用来承载文字或者小图片。（span自身的语义较轻。）
语法格式：

<div> 这是头部 </div>    <span>今日价格</span>

十、文本格式化标签(熟记)

在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

tab.png

b i s u 只有使用没有强调的意思 strong em del ins 语义更强烈

十一、图像标签img (重点)

单词缩写： image 图像
HTML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像就需要使用图像标签，接下来将详细介绍图像标签<img />以及和他相关的属性。其基本语法格式如下：
该语法中src属性用于指定图像文件的路径和文件名，他是img标签的必需属性。

<img src="图像URL" />

img.png

十二、链接标签(重点)

在HTML中创建超链接非常简单，只需用标签环绕需要被链接的对象即可，其基本语法格式如下：

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

target：用于指定链接页面的打开方式，其取值有 _self和 _blank两种，其中_ _self为默认值，_blank为在新窗口中打开方式。
href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超文本引用
注意：
1.外部链接需要添加 http:// www.baidu.com
2.内部链接直接链接内部页面名称即可比如 < a href="index.html"> 首页 </a>
3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。
4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

十三、列表标签

什么是列表？

list.png

把…制成表,以表显示
容器里面装载着文字或图表的一种形式，叫列表。
列表最大的特点就是整齐、整洁、有序

1、无序列表 ul （重点）

无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>

比如下面这些，新闻是没有顺序的，不用排队，先到先得，后发布先显示。

ul.png

脚下留心：

 1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
 2. <li>与</li>之间相当于一个容器，可以容纳所有元素。
 3. 无序列表会带有自己样式属性，放下那个样式，一会让CSS来！

ul和li的type属性（了解）

<ul type="disc">
    <li>列表项</li>
</ul>

ul和li具有type属性，值分别有：disc(圆点)、square(正方形)、circle(圆圈)

2、有序列表 ol （重点）

gold.png

有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>

所有特性基本与ul 一致。

ol和li的type属性（了解）

<ol type="1">
    <li>列表项</li>
</ol>

ol和li具有type属性，值分别有：1(数字)、a(小写字母)、A(大写字母)、i(小写罗马字母)、I(大写罗马字母)

注意：
1、一般有序列表的type属性不会写给li，因为会导致排序混乱，难以识别；
2、无论是有序列表还是无序列表，type属性在实际开发中都用得极少，了解便可。

3、自定义列表（理解）

定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>

主要使用位置：

9.png

十四、样式

CSS初识

CSS(Cascading Style Sheets)
CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

CSS样式规则

使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，具体格式如下：

gz.png

十五、文字控制三属性

font-size-----------控制文字的字号大小，需要加上px单位；
color------------控制文字的颜色，只针对文字有效；
font-family---------设置文字的字体，中文需要用引号括着；
text-align---------设置文本水平对方式，值有三个：left center right；

<style>
div{
  color: blue;
  font-size: 50px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  text-align: center;
}
</style>

<div>You are my students.</div>

十六、作业

请用html+css，完成以下效果（所有文本都在页面里居中哦！）：

10.png