前端_html
一、Web前端开发
1.1、常用的前端工具
1.1.1、Nodpad++
可以取代记事本,有列表标记、自动换行、英文检查、同时编辑多个文件、不限制撤销次数和特殊的英文会标出别的颜色。
特点:没有代码提示,语法高亮,适合英语不好的初学者。(有代码提示的工具不适合初学者记住各种方法的写法,可能会影响笔试)
1.1.2、Visual Studio Code
可以运行在mac、windows和linux系统上,针对编写现代web和云应用的跨平台源代码编辑器,是微软推出的良心之作。
特点:几乎支持所有的主流开发语言的语法高亮、智能代码补全、自定义快捷键、颜色区分和括号匹配。
1.2、浏览器
1.2.1、浏览器大战
第一次浏览器大战,微软发布的IE4.0版本因为比网景公司的浏览器更好的遵循了W3C(world wide web consortium)提出的互联网标准且可以提供一些类似MP3播放之类的功能比网景的浏览器更好,所以网景公司输给了微软公司,网景将公司卖给了AOL。1998年,网景公布了它的浏览器源码,并重新命名为Mozilla,全部程序进行了重写。
2004年基于Mozilla源码的Firefox首次登台,拉开了第二次浏览器大战。第二次大战一些新的基于不同引擎的浏览器也加入了阵营,比如挪威的opera(基于presto引擎)。
1.2.2、五大主流浏览器
Internet Explorer(Windows默认安装)
微软公司推出的一款网页浏览器,简称IE。
Opera浏览器
挪威Opera Software ASA公司旗下的浏览器。1995年,挪威发布了第一版的opera浏览器,使用自己研发的Presto内核。2016年,奇虎360和昆仑万维收购了Opera浏览器,丢弃了强大的presto内核改用google开源的webkit内核,后来,随着Google将浏览器的内核改为blink内核。
Safari浏览器
苹果macos中的浏览器,使用了KDE的KHTML作为浏览器的运算核心。
Firefox浏览器
Mozilla Firefox,中文俗称火狐,是一个自由及开放源码的网页浏览器,使用Gecko排版引擎,支持多种操作系统:mac、Windows、linux等。
chrome浏览器
Google公司开发的网页浏览器,该浏览器基于其他开源软件撰写,包括webkit,目标是提升稳定性、速度和安全,并创造出简单且有效率的使用者界面。
1.2.3、浏览器内核
浏览器最重要(核心)的部分是“Rendering Engine”——渲染引擎,俗称浏览器内核。
渲染引擎:负责对网页语法的解释并渲染网页。
渲染引擎决定了如何显示网页的内容以及页面的格式信息,不同的浏览器内核对网页语法的解释不同,因此,同意网页在不同的内核的浏览器里面的渲染效果不同,所以网页编写者需要在不同内核的浏览器中测试网页显示效果。
四大内核: Trident(IE内核)、webkit、blink和Gecko。
五大主流浏览器都是单核浏览器,但随着浏览器的发展,也出现了双核浏览器,比如:QQ浏览器、360浏览器。
1、IE内核:Trident内核,俗称IE内核
2、Chrome浏览器内核:统称Chrome内核,以前是Webkit内核,现在是Blink内核
3、Firefox浏览器内核:Gecko内核,俗称Firefox内核
4、Safari浏览器内核:Webkit内核
5、Opera浏览器内核:以前是Presto内核,后来是Webkit内核,现在是Blink内核
二、HTML概述
2.1、网页、网站、应用程序
网站:在因特网上根据一定的规则,使用标准通用标记语言下的一个应用制作的用于展示特定内容相关网页的集合。 简单的来说,网站就是一种沟通工具,人们可以通过网站发布信息,也可以获取自己想要的信息。
网页:构成网站的基本元素,是承载各种网站的应用平台。简单的理解:网站由网页构成。 网页是一个包含HTML标签的纯文本文件,可以存放在任意一台计算机中,是超文本标记语言格式。网页要通过浏览器来阅读。
应用程序:为了完成某项或者某几项特定任务而被开发运行于操作系统之上的计算机程序。
2.2、什么是HTML
HTML(Hyper Text Markup Language)超文本标记语言,超文本就是指页面内可以包含图片、链接、音乐、视频等非文字元素。
HTML是一种用于创建网页的标准标记语言,用来描述网页的一种语言,不是编程语言。标记语言指的是由一套标记标签组成的语言。HTML文档包含了HTML标签以及文本内容,该文档也叫做web页面,使用HTML来建立自己的web站点,html运行在浏览器上,由浏览器来解析。
超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。
2.3、什么是HTML5
万维网的核心语言——超文本标记语言的第五次重大修改。
HTML5是链接手机、平板电脑、pc以及其他移动终端的桥梁,可以更丰富地展现页面,让视频、音频、游戏以及其他元素构成一场华丽的代码盛宴。
2.4、Web基础概述
2.4.1、网站构成
网站由三个主要部分构成:网站域名、网站程序、网站空间。
网站域名:访问网站所用的网址,比如:baidu.com。
网站程序:包括用户浏览网站所看到的页面和网站后台管理程序,现在一般都是用成熟的网站管理系统。
网站空间:虚拟主机或服务器,用域存储网站程序及资料,并提供网站程序运行所需要的环境。
2.4.2、页面构成
页面由结构层、表现层、行为层三个部分组成。
eg:当你准备盖一个房子,你需要先盖一个毛坯房,这个就是结构层;盖好毛坯房以后,住进去需要装修,这个就是表现层;装修好可以入住了,但是你想要比较智能化的家,安装了智能AI,你设置了拉开窗帘开灯等功能,就是所谓的行为层。
对于页面来说:
结构层-----> HTML
表现层----->CSS,层叠样式表,用于控制网页样式并允许将样式信息与网页内容分离的一种标记语言。
行为层----->JavaScript,脚本语言,用来给页面添加动态效果和动态交互
2.4.3、B/S、C/S
B/S:浏览器/服务器模式
优点:可在任何地方进行操作不用安装软件
C/S:客户端/服务器模式
优点:交互性强、具有安全的存取模式、响应速度快
三、HTML文档
3.1、HTML文档声明
网页文件即HTML文件,其后缀名为.html。任何一个HTML页面,第一行要用<!DOCTYPE…>进行声明,<!DOCTYPE…>不是HTML标签,它是指示web浏览器关于页面使用哪个HTML版本进行编写的指令。
3.2、HTML文档根标签
<html>元素是HTML页面的根元素,此元素可以告知浏览器这是一个HTML文档。
<html></html>标签限定了文档的开始点和结束点,在它们之间是文档的头部和主体。
头部由<head>标签定义,主体由<body>标签定义。
3.3、头部head标签
<head></head>标签包含了文档的元(meta)数据,用于定义文档的头部,它是所有头部元素的容器。
head中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等。
head标签的子标签:
- base:描述基本的链接地址、链接目标,该标签作为HTML文档中所有的默认链接标签(base会对html文档中所有url产生作用,慎用)
- link:定义文档与外部资源的关系,通常用于链接到样式表
- script:引入外部js或定义内部js代码
- style:用于html文档的样式文件引用地址
- title:定义文档的标题,是head部分中唯一必需的元素
- meta:元,基本的配置项目
meta标签相关:
1. 指定字符集:charset就是charactor set即字符集。
浏览器通过meta来看网页是什么字符集,若meta写的和声明的不匹配,那么浏览器就是乱码。
<meta charset="utf-8">
2. 页面描述,name即名字,content即内容,只要设置Description页面描述,那么百度搜索就可以显示这些。
<meta name="description" content="具体描述。。。">
3. 关键字:告诉搜索引擎,此网页干啥的,能提高搜索命中率,有助于引擎seo优化
<meta name="Keywords" content="网易,邮箱,游戏,新闻">
4. 重定向:
<meta http-equiv="refresh" content="3,http://www.baidu.com">
5. 页面刷新
<meta http-equiv="refresh" content="3">
6.定义网页作者
<meta name="author" content="W">
其他标签:
1、定义标题
<title>百度一下,你就知道</title>
2、加载网页logo
<link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon">
3、引入外部css文件
<link rel="stylesheet" href="my.css">
4、引入本地css样式
<style>p {
color: rebeccapurple;
}
</style>
5、引入文件js,不建议在head标签引用js,需在body标签最后引用
<script src="hello.js"></script>
3.4、主体body
body元素定义文档的主体,包含了可见的页面内容。
3.5、HTML5的优缺点
优点:
1、网络标准统一、HTML5本身是由W3C推荐出来的。
2、多设备、跨平台
3、即时更新。
4、提高可用性和改进用户的友好体验;
5、有几个新的标签,这将有助于开发人员定义重要的内容;
6、可以给站点带来更多的多媒体元素(视频和音频);
7、可以很好的替代Flash和Silverlight;
8、涉及到网站的抓取和索引的时候,对于SEO很友好;
9、被大量应用于移动应用程序和游戏。
缺点:
1、安全:像之前Firefox4的web socket和透明代理的实现存在严重的安全问题,同时web storage、web socket 这样的功能很容易被黑客利用,来盗取用户的信息和资料。
2、完善性:许多特性各浏览器的支持程度也不一样。
3、性能:某些平台上的引擎问题导致HTML5性能低下。
4、浏览器兼容性:最大缺点,IE9以下浏览器几乎全军覆没。
3.6、HTML标签分类
html标签又叫html元素,它分为块级元素、行内块元素和行内元素(内联元素),也可以分为块级元素、行内元素两大类。
3.6.1、块级元素
块级元素是指本身样式属性为display:block;的元素。我们通过用块级元素进行大布局。
特点:独占一行,可以设置宽高。
在不设置宽高的情况下,块级元素的宽高由它本身内容的宽高决定。
常用的块级元素:
- div:常用块级元素
- h1-h6:标题标签,字体大小逐次递减
- hr:水平线分割元素
- ol:有序列表
- ul:无序列表
- li:列表项
- dl:自定义列表
- dt:自定义列表项
- dd:定义描述
- table:表格
- p:段落
- form:交互表单
3.6.2、行内块元素
行内块元素指本身属性为display:inline-block;的元素。
特点:有多大占多大,可以设置宽高
常用行内块元素:img:图片标签
3.6.3、行内元素
内联元素指本身属性:display:inline;的元素。常用行内元素进行文字、小结构的搭建
特点:有多大占多大,不可设置宽高
常用的行内元素:
- span:范围标签
- a:超链接,锚点
- b:加粗
- strong:加粗强调
- i:斜体
- em:斜体强调
- del:文档中已被删除的文本
- br:强制换行
- u:下划线
- textarea:文本域,多行文本输入框
- input输入框
- select:下拉列表
- sub:下标
- sup:上标
- small:小字体文本
1. b和strong的区别:
b和strong都是粗体显示
b是没有任何语义的,strong是有语义的代表与其更强烈的强调文本
2. i和em的区别:
i和em都是斜体表示
i是没有任何语义的,em代表强调文本
3.7、HTML和CSS中的长度单位
3.7.1、绝对长度单位
px
像素长度和在显示器上看到的文字屏幕像素无关。
3.7.2、相对字体的长度
em
一个相对单位。在没有任何css规则的前提下:1em=16px 浏览器默认字体大小16px。
em单位是相对于父元素,当设置了font-size属性以后,它会逐级向上相乘。假设父子元素的font-size都是2em,那么实际上,父元素的font-size是4em。
rem
rem和em都是相对单位,但是rem总是相对于根元素。
3.8、标签及属性语法
3.8.1、标签语法规则
- HTML元素以开始标签起始,以结束标签终止
- 元素的内容是开始标签和结束标签之间的内容
- 某些HTML元素具有空内容(empty content),空元素在开始标签中进行关闭
- 大多数HTML元素拥有属性
双标签:<开始标签>标签内容</结束标签>
单标签(空标签):<开始标签/>
3.8.2、属性语法规则
- HTML元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性以名称/值的形式出现,比如:id=”eg“
四、HTML标签元素
4.1、HTML文档结构相关标签
- html:告诉浏览器其是一个html文档
- head:定义文档的头部,所有头部元素的容器。head中的元素可以引用脚本,指示浏览器在哪里找到样式表,提供元信息等
- body:定义文档的主体,包含文档的所有内容
- base:定义页面中所有链接的默认地址或默认目标(可能对文档中的url产生影响,慎用)
- meta:定义文档的元信息
- link:定义文档与外部资源的关系,链接到表
- script:定义客户端脚本
- style:定义文档的样式信息
- title:定义文档的标题
4.2、HTML基础块级标签
- 标题元素:h1-h6标签,大小逐级递减,不要为了生成粗体或大号文本使用标题
- 段落标签:p标签,p元素会自动创建上下间隙。
- 水平线标签:hr标签,在页面创建一条水平线
4.3、HTML基础布局标签
div:将文档分割成独立的、不同的部分。
4.4、HTML基础行内标签
- 范围标签:span,用来组合行内元素
- 换行标签:br,插入一个简单的换行符
- 超链接:a,使用超链接与网络上的另一个文档相连
4.4.1、超链接
a标签定义超链接,最重要的属性是href,它指示链接的目标
默认情况下,链接将以以下形式出现在浏览器中:
- 一个未被访问过的链接显示为蓝色字体并带有下划线
- 点击链接时,链接显示为红色并带有下划线
- 访问过的链接显示为紫色并带有下划线
基本语法:
<a href="目标链接地址" target="目标窗口位置">
链接文本或图
</a>