初识html与css

学习前端第四天——初识Html与css

（第三天是一个对前端的摸底测验）

1.HTML与CSS

1.1.什么是HTML？什么是CSS？

HTML是HyperText Markup Language(超文本标记语言)

它不是一种编程语言，而是一种标记语言，用于告诉浏览器如何构造你的页面。它可以由一系列HTML元素组合成web开发人员想要的简单或者复杂的页面。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。HTML也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。可以使用.html与.htm作为HTML文件的后缀名（扩展名）

HTML特点

超文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下：

1.简易性：超文本标记语言版本升级采用超集方式，从而更加灵活方便。

2.可扩展性：超文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超文本标记语言采取子类	元素的方式，为系统扩展带来保证。

3.平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。

4.通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

CSS (Cascading Style Sheets) 层叠样式表
是一个用于修饰文档（可以是标记语言HTML，也可以是XML或者SVN）的语言，可以将文档以更优雅的形式呈现给用户

1.2.HTML和CSS之间的关系？

1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

1.3.结构，表现，行为？

在前端页面搭建中， HTML用于描述页面的结构，CSS用于控制页面中元素的样式， JavaScript用于响应用户操作。就好比一个人的基本构成，外在表现 衣物，以及行为动作。

2.新学习的知识（笔者并非0基础入坑 在此系统学习之前有着半年左右的前端基础 熟悉一些基础框架 所以此系列博客一般只记录笔者学习到的新知识）

空白
在文档中无论出现多少个空白或者换行，浏览器都解析为一个空白
实体
在HTML中，某些字符是预留的。例如：不能使用小于号<和大于号>，这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities)，实体以&符开始，以;结尾。以下是常见的实体

显示结果	描述	实体名称	实体编号
	空格	&nbsp	&#160
<	小于号	&lt	&#60
>	大于号	&gt	&#62
&	和号	&amp	&#38
"	引号	&quot	&#34
’	撇号	&apos (IE不支持)	&#39
￠	分（cent）	&cent	&#162
£	镑（pound）	&pound	&#163
¥	元（yen）	&yen	&#165
€	欧元（euro）	&euro	&#8364
§	小节	&sect	&#167
©	版权（copyright）	&copy	&#169
®	注册商标	&reg	&#174
™	商标	&trade	&#8482
×	乘号	&times	&#215
÷	除号	&divide	&#247

2.1 块级元素特点

作用：搭建网页结构

特点：

• 独占一行空间
• 默认宽度为100%
• 高度由子元素或内容决定
• 可以通过css指定其宽度和高度

2.2 行内元素特点

作用：在结构中填充网页内容

特点：

• 与其他行内元素共享一行空间
• == 宽高由自身决定==
• 由于不用来搭建网页结构，所以也无需，无法通过css指定其宽高（可替换类行内元素除外）
• 行内元素中不建议嵌套块元素

关于可替换元素：在 CSS 中，可替换元素（replaced element） 的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。可替换元素拥有内置宽高，他们可以设置width和height。
例如<iframe>、<video>、<embed>、<img>等，有些元素在特定情况下会被当作可替换元素处理，例如<option>、<audio>、<canvas>、<object>、<applet>、<input> 等。

2.3 假链接

什么是假链接？
就是点击之后不需要跳转的链接我们称之为假链接

在企业开发初期，其他的界面都没有完成，所以不知道跳转到什么地方，这个时候先用假链接来代替，项目完成后再换成真链接

假链接的格式
1.# 直接回到页面的顶部
2.javascript: 不会自动回到页面的顶部

<a href="#">回到顶部</a>
<a href="javascript:">点我啊</a>

2.4 锚点

1.要想通过a标签跳转到指定的位置, 那么必须告诉a标签一个独一无二的身份证号码, 这样a标签才能在当前界面中找到需要跳转到的目标位置

2.如何和HTML中的标签绑定一个独一无二的身份证号码呢?
在HTML中, 每一个标签都有一个名称叫做id的属性, 这个属性就是用来给标签指定一个独一无二的身份证号码的

3.所以要想实现通过a标签跳转到指定的位置分为两步
3.1给目标位置的标签添加一个id属性, 然后指定一个独一无二的值
3.2告诉a标签你需要跳转到的目标标签对应的独一无二的身份证号码是多少
格式:

<a href="#center">跳转</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p id="center">我是中部</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

注意点:
1.通过我们的a标签跳转到指定的位置, 是没有过度动画的, 是直接一下子就跳转到了指定位置
2.a标签除了可以跳转到当前界面的指定位置以外, 还可以在跳转到其它界面的时候直接跳转到其它界面的指定位置
格式:

//a.html
<a href="b.html#bottom" target="_blank">跳转</a>

//b.html
<p id="bottom">找到我</p>

2.5 base标签

base标签就是专门用来统一指定当前页面中所有的a标签需要如何打开
注意点
1.base标签必须要写在head标签之间
2.如果既在base中指定了target又在a标签中指定了target，那么浏览器会按照a标签中指定的来执行，内联优先级较高

2.6 details

details元素是一种用于标识该元素内部的子元素可以被展开,收缩显示的元素。details元素内并不仅限于放置文字，也可以放置表单,插件或对于一个统计图提供的详细数据表格。

open属性

当该属性值为true时，该元素内部的子元素应该被展开显示；当该属性的值为false时，其内部的子元素应该被收缩起来不显示。默认值为false

summary子元素

summary元素从属于details，用鼠标单击summary元素中的内容文字时，details元素中的其他所有从属元素将会展开或收缩。如果details元素内没有summary元素，浏览器会提供默认文字(详细信息)以供单击。

3 HTML5新增语义化标签

除语义外，与div相同。新的标签带来的是网页布局的改变及提升对搜索引擎的友好（有利于seo搜索引擎的优化，meta中的keywords属性，head标签中的title标签同样有此作用）。

语义化标签的好处

1、代码结构清晰，易于阅读，利于开发和维护

2、提高用户体验，在样式加载失败时，页面结构清晰

3、方便其他设备解析（如屏幕阅读器）根据语义渲染网页。

4、有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重

常见的语义化标签有<header> <video> <article> <aside> <footer> <audio> <nav>等