网站得基本概念
1,什么是网站
网站(Website)是指在因特网上根据一定的规则,使用HTML(标准通用标记语言)等工具制作的用于展示特定内容相关网页的集合。简单地说,网站是一种沟通工具,人们可以通过网站来发布自己想要公开的资讯,或者利用网站来提供相关的网络服务
2,什么是网页
网页是网站中的一页,是一个包含HTML标签的纯文本文件,它可以存放在世界某个角落的某一台计算机中,是超文本标记语言格式。想要浏览某个网站,需要通过浏览器来观看。
3,什么是html
超文本标记语言或超文本链接标示语言(标准通用标记语言下的一个应用)HTML (HyperText Mark-up Language)是一种制作万维网页面的标准语言,是万维网浏览器使用的一种语言,它消除了不同计算机之间信息交流的障碍。
HTML元素是构建网站的基石。HTML允许嵌入图像与对象,并且可以用于创建交互式表单,它被用来结构化信息——例如标题、段落和列表等等,也可用来在一定程度上描述文档的外观和语义
第一个html页面
<html>
<head>
<tittle></tittle>
</head>
<body>
</body>
<html>
常用得浏览器
谷歌浏览器,火狐浏览器,IE,Safair浏览器,Opera浏览器
浏览器内核
内核的种类很多,常见的浏览器内核可以分这四种: Trident、Gecko、Blink、Webkit作为一名前端开发人员,你写的页面在那些浏览器测试过?这些浏览器的内核分别是什么?下面总结一下各常用浏览器所使用的内核:
IE: Trident内核,也是俗称的IE内核
Chrome:统称为Chromium内核或Chrome内核,以前是Webkit内核,现在是Blink内核Firefox: Gecko内核,俗称Firefox内核
Safari: Webkit内核
Opera:最初是自己的Presto内核,后来是Webkit,现在是Blink内核360、猎豹:IE+Chrome双内核
搜狗、遨游、QQ浏览器: Trident(兼容模式) +Webkit(高速模式)百度、世界之窗:IE内
web标准
Web标准也称网页标准,它由一系列标准组成,这些标准大部分由W3C负责制订,也有一些标准由其他标准组织制定的,如ECMA的ECMAScript标准等。
狭义的Web标准是指网页设计的DIV+CSS化,广义的Web标准是指网页设计要符合W3C和ECMA规范。
在符合标准的网页设计中,CSS与HTML、JavaScript并列称为网页前端设计的3种基本语言,其中:
HTML负责构建网页的基本结构;
cSS负责设计网页的表现效果;
JavaScript负责开发网页的交互效果。
W3C是World Wide Web Consortium 得缩写,中文译为“万维网联盟”,是一个标准化组织。W3C除了制定CSS标准,还制定了HTML,XML等200多项web技术。W3C的官网是 http://www.w3c.org
html语法规范
1,标签的写法
HTML标记标签通常被称为HTML标签(HTML tag)。
HTML标签是由尖括号包围的关键词,比如<html>
HTML标签通常是成对出现的,比如<b>和</b>
标签对中的第一个标签是开始标签,第二个标签是结束标签
特殊标签-自闭和标签(单标签)比如: <br/>
有两种类型的标签:
双标记 <标记名>内容</标记名>
单标记 <标记名 />
属性:
对标签的描述--属性,由属性名和属性值组成 ,属性值一定要写到引号中
<标记名 属性名="属性值" 属性名="属性值" />
<标记名 属性名="属性值" 属性名="属性值">内容</标记名>
2,标签之间的关系
(1) 包含关系
<html>
<body></body>
</html>
(2)并列关系
<html>
<head></head>
<body></body>
</html>
3,标签属性
属性可以为html提供一些额外的信息,或者对html标签进行修饰。属性需要添加在开始标签中,语法格式为:
attr="value"
attr 表示属性名,value 表示属性值。属性值必须使用双引号" " 或者单引号' ' 包围
<!DOCTYPE html> //声明是一个html5.0的版本
<html lang="en"> //网页的根元素,lang是告诉浏览器或者搜索引擎王爷的内容是什么样的语言(zh是中文,en是英文)
<head> //网页的头部内容 头部的内容除开tittle外,其他的内容用户是看不到的
<meta charset="utf-8"> //设置网页编码 ,告诉浏览器需要用对应的编码来渲染并解析html对应的内容
<meta http-equiv="X-UA-Compatible" content="IE=edge"/> //设置浏览器兼容
<meta name="viewport" content="width=device-width,initial-scale=1.0"/> //是否适应大小 设置自动适应浏览器大小
<title></title> //网页标题
</head>
<body>
<div class="clearfloat">
<p class="left">段落1</p>
<p class="right">段落2</p>
</div>
</body>
</html>
编译软件
前端的编译软件有很多 vscode , sublime , hbuilder , webstorm , notepad++
vscode的基本使用
1)!+tab 或者 doc+tab 直接生成html基本页面结构
2)安装一些插件
view in browser 在浏览器中查看
Auto Rename Tag 自动关闭标签,在开始标记的结束括号中键入后,将自动插入结束标记
Bracket Pair Colorizer 个成对儿的括号都会以不同的颜色进行区别
code Runner 万能的语言运行环境