2018-04-06

Html基础

1 认识大前端

前端就是利用html+css+js等技术将效果图生成网页。

Html结构标准，相当人的身体；

Css表现标准，相当与给人化妆 变的更漂亮；

Js行为标准，想当与人在唱歌，页面更灵动。

2 认识网页

2.1 网页的组成

网页由文字、图片、输入框、视频、音频、超链接等组成。

2.2 浏览器

浏览器是一个上网的客户端（软件）。

2.3 浏览器内核

渲染引擎：渲染引擎是兼容性问题出现的根原因。

2.4 浏览器和服务器

IIS  web服务器     提供网页浏览服务

2.5 Url地址

Url地址就是咱们说的网址。

3 认识html

3.1 Hyper   text  markup   language

超文本标记语言。

超文本：超链接。（实现页面跳转）

3.2 Html结构标准

Html与htm是一样的。

后缀名不能决定文件格式，只能决定打开文件打开的方式。

3.3 Html标签分类

单标签

双标签

3.4 Html标签关系分类

包含（嵌套关系） 父子

并列关系 兄弟姐妹

3.5  开发工具

Dw历史悠久，设计师使用。

Sublime轻量级    有很多好用的插件。

Webstorm重量级    太过智能。

3.6 sublime快捷键使用

3.7 设置默认浏览器

浏览器右上角，设置里选择设置默认浏览器。

4 标签

4.1 单标签

注释标签    ctrl+/

换行标签  

水平线标签

---

4.2 双标签

◆

文本内容

特点：上下自动生成空白行，
换行不会生成空白行。

◆标题标签

h1-h6 取值到h6，h1在一个页面里只能出现一次。

◆文本标签

文本内容

◆文本格式化标签

文本加粗标签  尽量使用strong

文本倾斜标签    尽量使用em

删除线标签   尽量使用del

下划线标签    尽量使用ins

注意：之所以工作里使用  是因为更有语义化

◆图片标签

Src图片的来源   必写属性

Alt替换文本    图片不显示的时候显示的文字

Title提示文本    鼠标放到图片上显示的文字

Width图片宽度

Height图片高度

注意：图片没有定义宽高的时候，图片按照百分之百比例显示，如果只更改图片的宽度或者高度，图片等比例缩放。

5 路径

5.1 相对路径

相对于文件自身出发，就是相对路径。

◆文件和图片（html文档）在同一个目录(文件夹) ，直接写文件名

◆图片（html文档）在文件在下一级目录里。文件夹名称+/+图片（html）名称

◆图片（html）在文件的上一级目录里，..+/+图片（html）名称

◆图片在文件的上一级的其他目录里，../文件夹名称/图片名称

★总结：找到下一级目录（文件夹）的图片（文件）用/

跳出当前目录使用../

5.2 绝对路径

6 超链接

href去往的路径（跳转的页面） 必写属性

title提示文本   鼠标放到链接上显示的文字

target=”_self”默认值在自身页面打开（关闭自身页面，打开链接页面）

Target=”_blank”打开新页面（自身页面不关闭，打开一个新的链接页面）

6.1 锚链接

a.先定义一个锚点

b.超链接到锚点

6.2 空链不知道链接到那个页面的时候，用空链

6.3 压缩文件下载不推荐使用

6.4 超链接优化写法

  让所有的超链接都在新窗口打开

7 另存为   ctrl+shift+s

8 特殊字符

9 列表

9.1 无序列表

type=”square”小方块

Type=”disc”实心小圆圈

Type=”circle”空心小圆圈

9.2 有序列表

◆type=”1,a,A,i,I”type的值可以为1,a,A,i,I

start=”3”决定了开始的位置。

9.3 自定义列表

10 音乐标签

11 滚动