黑马程序员技术交流社区

标题: 前端与移动开发学习速览,值得一看的前端知识版图! [打印本页]

作者: 爱喝旺仔吗    时间: 2019-10-16 15:09
标题: 前端与移动开发学习速览,值得一看的前端知识版图!
第一章 HTML与CSS 1.浏览器展览区(1)常见浏览器
IE、火狐(Firefox)、谷歌(Chrome)、Safari和Opera,统称5大浏览器其中对应的浏览器内核分别是,IE(Trident)、Firefox(Gecko)、safari(webkit)、chrome(chromium/Blink)、Opera(blink)。另外,对于移动端的诸多浏览器,其中:安卓机器一般都用Webkit内核,iOS以及WP7(Windows Phone)一般都是系统自带浏览器内核,一般是Safari或者Trident内核。由于各个浏览器的内核不同,所以我们要遵循W3C组织制定的Web标准让所有浏览器最终显示的效果完全一致
(2)Web标准组成(重要)
结构标准(HTML):页面的机构搭建
表现标准(CSS样式):页面的样式美化
行为标准(javascript):页面的交互实现
2.Html
html的基本结构(在书写代码的时候要注意所有的标签都要用小写不能用大小)
<html>
      <head>
                <title>标题</tilte>
      </head>
      <body>
              网页主体内容
      </body>
</html>
一对html标签嵌套了一对head标签和body标签,head标签里面嵌套的内容是给浏览器解析用的,只不过title标签是用户可以看到的,body里面放所有用户能看见的内容;
(1)HTML标签分类
双标签:由开始标签<开始标签>和结束标签</结束标签>组成;
例如:<html></html>
单标签:  不需要包含内容,直接在开始标签最后面添加一个结束的符号/;
例如:<br />
(2)HTML标签关系
嵌套关系  --- 父子级关系
      并列关系 --- 兄弟关系
<!DOCTYPEhtml>  
告诉浏览器用最新的html5版本的html来解析页面
lang="en"
规定网站用哪个国家的语言解析;en表示英文,zh-CN表示中文;
字符集<meta charset="UTF-8">
常用的字符编码:
•      Gb2312简体中文    BIG5 繁体中文    GBK 全部中文(包括简体和繁体中文)
•     UTF-8 全世界所有国家需要用到的字符
标签的语义化的目的
语义化标签让代码结构更清晰方便代码的阅读和维护,也可以让浏览器或者网络爬虫更好的解析从而分析其中的内容,更好得到优化网站的搜索引擎;

(3)HTML常用标签Html标题标签•      标题标签分为6个级别,分别是h1/h2/h3/h4/h5/h6作为标题使用,并且依据重要性递减;
•      标题标签是双标签;
注意:
•      01、标题标签默认加粗,独自占一行,双标签;
•       02、h1标签一般情况下一个页面最好出现一次,并且放logo最好,h2标签一个页面最多使用两次,h3-h6标签可以多次重复出现;
段落标签p,双标签,可以清楚得到划分页面的段落;
水平线标签hr单标签 --- <hr />

关于空格和回车换行的解析浏览器在解析代码的时候,只会解析一个空格不管输入多少个空格,对于回车换行直接是不解析或者解析成一个空格,所以我们在书写换行效果的时候书写换行用<br />空格用&nbsp;书写即可;
br标签 ,<br />强制换行;•      注意:使用段落标签等语义标签换行和br换行是不同的,前者是有控制范围效果有开始有技术,后者只是简单的强制换行效果;
div和span标签•      div标签布局标签,主要是布局用的大标签也是主要标签;
特点:没有语义,独占一行;
•      span标签布局标签,不用来做主要布局,一般放特殊效果的文字或者小图标;
特点:没有语义,一行共存多个;
文本格式化标签
标签属性使用HTML制作网页时,如果想让HTML标签提供更多的信息,可以使用HTML标签的属性加以设置。其基本语法格式如下:
<标签名属性1=“属性值1” 属性2=“属性值2” …> 内容 </标签名>;
注意:在书写标签属性的时候每一个属性之间要用空格隔开;
图像标签img(灰常重要)img标签,单标签,<img />,可以配合src属性将图片引入html页面,<img src=“图片路径” />
图像标签的常见属性:

宽width和高height在使用的时候要注意,我们不需要全部设置,只需要设置一个属性就可以,另外的一个属性会等比缩放;
超链接a(经常用要记住)1、超链接:实现页面之间的跳转,a标签,双标签;
常用属性:href用于指定链接目标的url路径地址,必不可少的;
       target 用于指定链接页面的打开方式,属性值我们一般选择新窗口打开_blank;            
2、超链接的链接方式:
外部链接(在线链接):直接在href=“http://+要访问的网址”,注意http://必须书写;
  内部链接:  直接在href=“书写html页面名称”,注意在书写内部链接的时候要书写清楚页面的路径;
空链接:    如果不知道要链接到什么地方,我们就暂时用#代替即可;
其他链接:我们不仅仅能给文字添加链接,我们还可以给其他的网页元素添加链接,例如:图像、表格、音频、视频等;
注释标签html注释:<!--注释内容 -->
css注释: /* 注释内容 */
      快捷键:Ctrl+?
      添加注释的作用:说明代码的含义,更好的管理代码的可读性,程序是不会对注释的代码进行解析的;
路径定义:从当前文件出发查找目标文件,分为相对路径和绝对路径
相对路径又分为:同级路径(兄弟关系)、下级路径、上级路径
绝对路径又分为:带有盘符的路径,线上网址
目录文件夹:用一个文件夹将一个项目的所有资源整合到一起,一般包含了存放图片的文件,存放css的文件夹,存放js的文件夹、存放图标文字的文件夹以及html文档等;
根目录:打开目录文件夹的第一级;
相对路径(一定要会用)同级路径:文件(html文件)目标文件同一个目录文件下面平级存在,我们可以直接书写目标文件名称(如果是图片就直接书写图片名称),例如:<img src=“laowang.jpg” />
下级路径:文件(html文件)存放目标文件的父级是平级存在,我们可以先书写目标文件的父级名称+/+目标文件名称
例如:<img src=“img/laowang.jpg”>
上级路径 ../存放文件(html文件)的父级和存放目标文件的父级是平级关系,我们可以直接以../ 表示上一级去查找目标文件路径;
例如:<img src=“../img/laowang.jpg”>
记忆口诀:
同级路径:文件和目标文件是同一个父级,平级关系;
下级路径:从文件出发往里面查找;
上级路径:从文件出发往外面查找,用 ../ 表示上一级关系;
绝对路径(了解):以web站点根目录为参考基础的目录路径,其实一般分为两种情况:
•      01、带有盘符的路径,坚决不能使用,
•        例如:“D:\web/logo.gif”;
•      02、完整的网络地址,可以使用只要网络资源一直存在,
       例如:http://www.itcast.cn
锚点定位锚点的作用:实现页面内部的跳转
添加锚点效果添加过程:
01、    使用id名标注要跳转到的目标位置(锚点目标)

<divid=“id名称”;></div>

02、使用超链接a进行锚点按钮设置,<a href=“#id名称”>链接文本</a>
base标签(会用)
•      base标签可以统一设置超链接a的打开方式,书写在<head></head>之间;
•            <base target=“_blank”>



特殊的字符注意:我们常用的特殊符号是:空格&nbsp;小于号&lt;大于号&gt;版权&copy;






欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2