1.HTML与CSS

1.HTML与CSS

1.1 什么是HTML？什么是CSS？

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

​ 它不是一种编程语言，而是一种标记语言，用于高速浏览器如何构造你的页面，所以当我们被别人问到，学过什么编程语言的时候，可不要傻傻地回答学过HTML哈。我们可以使用.html与.htm作为HTML文件的后缀名（扩展名）。

​ HTML的特点：

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

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

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

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

CSS (Cascading Style Sheets) 层叠样式表

​ 是一个用于修饰文档（可以是标记语言HTML，也可以是XML或者SVN）的语言，可以将文档以更优雅的形式呈现给用户。

​ CSS的特点：

1.2 HTML和CSS和JavaScript之间的关系？

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

1.3 网页三要素（又称网页三大马车）

html（结构）、css（样式）、javascript（行为动作）。

HTML用于描述页面的结构，CSS用于控制页面中元素的样式，JavaScript用于响应用户操作。如果把网页比喻成一个人的话，那么HTML就像一个人的骨架，CSS就和一个人的皮囊差不多，如同人的五官，发色，瞳色，而JS则是灵魂，让人有了喜怒哀乐，而不是一个冰冷的木偶。

2.初识HTML

2.1 语法

2.1.1 注释

html中只有一种注释，即 ，快捷键：ctrl+ /

2.1.2 元素

单标签元素，仅有一个标签

<meta /> 、<img />、<br/>

双标签元素，由开始标签和结束标签组成

<div></div>
<p></p>

2.1.3 属性

HTML标签都拥有自己的属性，属性应该出现在元素的开始标签内部，属性名和属性值通过"="分割，属性与属性之间通过空格分割，属性名不区分大小写，属性值区分大小写并且属性值可以使用双引号引起来。

​ 核心属性：绝大多数标签都具有的属性。title、id、class、style。

title：描述信息

<div title="div1">div1</div>

id：唯一标识

<div id="div1">div1</div>

class：标识一类元素

<div class="box1">box1</div>

style 样式

<div style="color: red;">我是一个div</div>

2.1.4 其他

2.2 块级元素

eg：html、body、div、p、h1~h6、ul->li、ol->li、dl->dd/dt、header、footer、nav、article、section、aside、address…

特点：

• 独占一行空间
• 默认宽度为100%，如果没有父元素的话，宽度相对视图区而言。如果有父元素，相对父元素而言。
• 高度由子元素或内容决定
• 可以通过css指定其宽度
• 块级元素可以包含行内元素和块级元素

作用：搭建网页结构

建议：不要将块级元素嵌套在行内元素中。

2.3行内元素

元素：span、a、img、strong、b、i、em、sub、sup…

特点：

• 与其他行内元素共享一行空间
• 宽高由自身决定
• 由于不用来搭建网页结构，所以也无需通过css指定其宽度
• 行内元素中不可以嵌套块元素
  作用：在结构中填充网页内容

2.4块级与行内区别 高频面试题 80%

1.块级独占一行，行内共享一行。
2.块级可以直接设置宽高，而行内不行。（通过CSS的display属性，取值为inline-block/block，这样可以给行内元素设置宽高。）
span{
display:block/inline-block;
width:
height:
}
3.块级可以包含行内与块级，而行内只能包含行内。

补充：

inline:

1. 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行.
2. 不能更改元素的height，width的值，大小由内容撑开.
3. 可以使用padding，margin的left和right产生边距效果，但是top和bottom就不行.

block:

1. 使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度.
2. 能够改变元素的height，width的值.
3. 可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.

inline-block:

1. 结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点.
2. 用通俗的话讲，就是不独占一行的块级元素。

3.基础标签

- h1~h6标签

H标签是标题标签，在HTML中一共有六级标签，H1最大，H6最小。

- P标签

段落标签，p标签中的文字，会独占一行，，并且段与段之间会有一个间距,有16px的上下margin。

- br标签

br标签是一个自结束标签，也可以说是一个单标签。一般用作换行。

-hr 标签

hr标签是一个单标签，可以在页面中生成一个分割线。

- a标签

a标签的作用 用于控制页面与页面之间跳转的。

<a href="指定需要跳转的目标界面">需要展现给用户查看的内容</a>
<a href="https://www.baidu.com" target="_blank" title="百度">百度一下</a>

href 放跳转路径
相对./ …/ or 绝对路径
http://ip:端口号/项目名/文件名
target 跳转页面打开位置
_self 默认，在当前窗口打开
_blank 新窗口/新的选项卡

- img标签

img标签 告诉浏览器要显示一张图片

img标签的格式 
<img src="" alt="">

src 放图片路径
相对./ …/ or 绝对路径 （一般用相对路径，网页图片下载到本地后用./ …/获取）
width 宽
height 高
title 鼠标悬停后提示文字

alt:可以用来设置在图片不能显示的时，对图片的描述

告诉浏览器要显示一张图片

img标签的格式 
<img src="" alt="">

src 放图片路径
相对./ …/ or 绝对路径 （一般用相对路径，网页图片下载到本地后用./ …/获取）
width 宽
height 高
title 鼠标悬停后提示文字

alt:可以用来设置在图片不能显示的时，对图片的描述