编辑器:
dw:省事儿、控件的拖动
sublime:文艺青年喜欢用
webstorm:编辑快速
Hbuilder:快、生成安装包
Vscode:逻辑性高、各个公司都用(最终选择它)
五大主流浏览器:火狐浏览器 ————因为内核不同 Geoko
谷歌浏览器(最终选择它) (之前是Webkit) Blink
IE浏览器 Trident
safari浏览器 Webkit
欧朋浏览器 Blink
2、浏览器内核
渲染引擎:如何将内容展示在浏览器端
js引擎:解析和执行JavaScript代码的
3、web标准
定义: 不是一个标准,而是一个标准的集合
集合:
结构标准:HTML标准
表现标准:CSS标准
行为标准:JavaScript标准
作用:1、减轻的程序员的压力,只需要开发一套程序即可 (程序员的角度)
2、无序重写、降低流量、容易被搜寻引擎搜索、提高网页的速度,(浏览器的角度)
3、降低公司的成本,更易维护(公司的角度)
4、HTML骨架
定义:HTML “超文本标签语言”,是用来描述网页的一种语言。所谓超文本,因为它可以加入图片、声音、动画、多媒体等内容,不仅如此,它还可以从一个文件跳转到另一个文件,与世界各地主机的文件连接
特点:1、HTML不是一种编程语言,而是一种标记语言
2、标记标签组合而成
总结:HTML就是来搭建网页的,是网页的结构
骨架:html:根标签
head:网页的头部,主要是设置一下网页的属性
body:网页的主体
title:网页的标题
标签与标签之间的关系:
嵌套关系(父子关系):html与body
并列关系(兄弟关系):head与body
标签的分类:双标签:<html></html>
单标签:<meta>、<br>、<hr>、<img>、<base>
5、常用的标签
(1)、标题标签 :h1-h6 head
特点:1、文本自动加粗加大
2、文本的字体大小与h后边的的数字成反比
3、自动换行
(2)、段落标签 paragraph p
特点:自动换行
(3)、水平线标签 hr horizon
特点:显示一条横线 单标签
(4)、换行标签 br
特点:1、单标签
2、可以在文本内容中随处换行
(5)、盒子标签 div
特点:用div来进行网页布局
(6)、组合行内元素标签 span
特点:1、最典型的行内元素,2、不会换行
6、文本语义化标签
加粗 b strong
斜体:i em
下划线:u ins
删除线:s del
区别:strong/em/ ins/del跟具有语气话及强调
7、图片标签
图片标签 img
src属性:图片的路径
jpg/png/gif/psd 注意添加后缀名
再浏览器展示图片的大小就是默认大小
图片的宽
height:图片的高度
title:图片的标题 光标移动到图片上显示对应的属性值
alt:图片不显示时,显示alt的属性值
相对路径:相对于当前位置
1、图片在当前文件夹下 ./ 或者不写
2、图片在当前文件的下一级目录
3、图片在当前文件的上一级目录../
绝对路径:路径是文件的整个目录
8、链接标签
(1)、anchor单词的缩写 锚
href:跳转的路径
跳转方式
跳转线上
跳转本地
# 暂时不知道往哪儿跳转
打开方式
跳转链接后,默认在当前的窗口打开
在新的窗口打开 target="_blank"
在当前窗口打开 target="_self"
(2)、锚点链接
给指定的内容添加id属性,其次在标题中添加链接标签,href的属性值用#与id名对应即可实现锚点定位
(3)、Base
base标签的target属性设置整个网页中所有a链接的跳转方式
9、列表标签
(1)、分类:无序列表、有序列表、自定义列表
(2)、无序:li 特点:1、独占一行
2、没有顺序
3、每一行前有个小点
清除小点: list-style:none;
(3)、有序:ol 特点:1、独占一行
有顺序
每一行前有顺序数字
10、特殊字符(了解)
11、注释标签
在HTML中还有一种特殊的标签——注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标签。其基本语法格式如下:
<!-- 注释语句 --> ctrl + / 或者 ctrl +shift + /