知识点一:软件的分类
一般来说软件分为3类
系统软件:linux,windows
应用软件:QQ 微信
游戏软件:王者荣耀,绝地求生
知识点二:软件的组成(2部分)
客户端和服务器
客户端:使用网络(本地)
服务器:处理业务能力(远程)
所以程序员一般干的事是:要么写客户端,要么写服务器
服务器开发语言:java(重要) node.js(对前端来说常使用的) php python
客户端一般可分为三种:文字客户端
图形化界面客户端(C/S架构)
网页(B/S架构)
网页的优点是:不需要安装,无需更新。跨平台(最重要的特点,这样可以减少很多的开发成本)
前端三大巨头:html css js
知识点三:浏览器,网页,网站
浏览器是访问网页的一个工具,它负责把网页渲染出来呈现给用户。
网页:网站中的一页
网页最终显示出什么样子很大程度由浏览器决定
浏览器:五大浏览器,其中谷歌是最常用的占比
浏览器存在的的问题:有非常多的浏览器,有可能换个浏览器就渲染不出来了。所以制定了w3c标准,为网页开发制定了统一的标准
知识点四:w3c:结构,表现,行为
知识点五:HTML:超文本标记语言
所谓超文本就是(1)超越文本,不只有文字还有图片,音乐,视频
(2)超级链接,可以从一个页面跳转到另一个页面
知识点六:HTML注释标签
<!-- -->
注意注释一般位于被注释代码上面,单独占一行
快捷键:ctrl+/
所有编程语言中注释不能嵌套
知识点七:基本结构
文档声明(DOCTYPE):用来告诉浏览器当前网页的版本。
注意文档声明要写在最前面,因为不分大小写,所以可以写成<!doctype HTML>=<!DOCTYPE html>
<html lang="en"> 指定该html标签所用语言
en定义为英语 zh-CN定义为中文
知识点八:meta标签
meta标签提供了html文档的元数据,元数据不会出现在客户端但是会被浏览器解析
meta元数据通常用于指定的网页描述,关键字,文件最后修改时间,网页作者等
meta属性主要有两个:name http-equiv
<meta charset="utf-8">
--chartset是meta标签的一个属性,charset是字符类型。
如果没有声明,那么网页就会出现乱码现象
<meta name="keywords" content="" /> 是给网页标注关键字,便于搜索,与优化
e.g <meta name="keywords" content="女士服装" /
name属性值的取值
keywords:告诉搜索引擎,该网页的关键字
description(网页内容描述):告诉搜索引擎,你网站的主要内容
viewport(移动端的窗口)
author(作者)
copyright(版权)
<meta http-equiv="">
模拟http相应头,具体使用有很多种,比如设置时间,过了时间要重新上传等,可参考收藏夹
知识点九:语义化标签
知识点十:常用标签
(1)标题标签[双标签]
<h1>~<h6>
随着数字的增大,字越来越小,并且独占一行
(2)段落标签[双标签]
<p>
可以把段落分成一行一行
(3)断行标签[单标签]
</ br>
段落标签和换行标签的区别
段落标签中间有明显的空隙,但是换行标签没有
(4)div标签
div标签一行只能放下一个,里边可以包含很多<span>标签
(5) <span>标签,一行可以放多个
!<div>和<span>没有实意,只是盒子标签,只是网页布局的2个盒子
(6)<b>和<strong>字体加粗标签
<i>和<em>字体倾斜标签
<s>和<del>加删除线
<u>和<ins>加下划线
知识点十一:标签属性
知识点十二:图像标签 img[单标签]
属性
alt:图片不能显示的时候出现的文字
title:鼠标停在图片上出现的文字
width:设置图像宽度
heiht:设置图像高度
border:设置图像的宽度
图像标签可以同时拥有多个属性,属性之间不分先后
<img src="" width="" title="" />
知识点十三:标签链接[双标签]
语法<a href="跳转目标" target="目标弹出的方式">文本或者图像</a>
属性 _self 原本窗口
_blank新窗口弹出
! 链接分为外部链接和内部链接和空链接
内部链接直接连接内部页面名称
重要知识点(面试会考)
href和src的区别
src是引入资源的,href是跳转url的
href是指向网络资源所在位置,建立和当前元素或者文档之间的链接,用于超链接
src是指向外部资源的位置,指向的内容会嵌入到文档中当前标签所在的位置
知识点十四:XHTML
可扩展超文本标记语言
目标是:取代HTML
XHTML是更严格更纯净的HTML
--写XHTML代码应该注意什么?
尽可能少的使用无语义的盒子标签
在语义不明显时候,既可以使用div或者p
尽量用p
知识点十五:表格标签
不是用来布局的使用来更好展示格式数据的
<table>是整个表格
<tr>代表一整行
<td代表一个单元格>
这三个元素是创建表格的基本标签,缺一不可
(2) <th>一般表示表格的第一行或者第一列且文本加粗居中。
使用方法:代替相应的表格标签<td>
(3)表格标签<caption>
会被居中且显示在表格之上,
使用方法:紧随<table>之后