黑马程序员技术交流社区

标题: 前端与移动开发学习速览，值得一看的前端知识版图！ [打印本页]
作者: 爱喝旺仔吗    时间: 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