黑马前端基础重点笔记【黑马web前端】

更新时间:2019年07月26日 11时16分55秒来源:黑马程序员论坛

来黑马学习时间不久但是学习到的干货很多下面将为大家一一列举：
首先要知道网页的三大组成部分：
文字，图片，超链接（音频&视频）

其次要知道web标准（W3C）的三层组成（重点）：
1.结构标准（structure） - HTML - 搭建页面的结构
2.表现标准/样式标准（presentation）- CSS - 页面样式的美化
3.行为标准（behavior） - javascript - 实现页面的交互效果

接下来将为大家详细介绍HTML和CSS的编写方式以及技巧：
HTML（超文本标记语言）：
一、HTML骨架：
< head >
<title> 网站标题用户是可以看得到的 </title>
</head>
<body>
所有的展示用户都可以看到
</body>
</html>

自动生成的HTML结构详解（输入英文“!”可以自动生成HTML骨架）：

开头必写：< ! doctype html> 告诉浏览器用html5的格式解析页面

英文语言：<html lang=“en”>
中文语言：<html lang=“zh-CN”>

国际通用字符编码<meta charset=“UTF-8”>

二、标签的类别与关系：
标签分为两大类：双标签和单标签：
双标签（有开始和结尾）：
例如：<head></head> <body></body> “/” - 结束标签

单标签（只有开始）：
<例如：br /> <hr />

三、排版标签：

标题标签：字体默认加粗，一行只能放一个（可用css处理）
注意⚠：h1标签一个页面只能放一次，最好放logo
                      h2标签只能放两次
h3～h6不限次数
段落标签： <p> </p>
水平线标签：<hr />
注意 ⚠：浏览器对回车和空格都只解析成一个
换行标签: <br>; 强制换行标签:<br />；空格标签：&nbsp；
⚠div和span标签：
盒子标签: <div></div> 布局用的大标签，一行只能放一个
           文字标签: <span></span> 用来布局（一般用来做文字或小图标，一行存多个

四、文本格式化标签：<b></b>加粗    <i></i>斜体
<s></s>加删除线  <ins></ins>加下划线
五、图像标签：<img src= “图像URL”/>
六、链接标签：<a href=“#“> 空链接 </a>
七、注释标签：<! -- 注释 —> (快捷键：ctrl+？)
八、列表标签（重点）：
无序列表 ⚠：
示例：<ul>
                <li>111</li>
<li>222</li>
<li>333</li>
               </ul>
可以随意改变排放顺序
<ul>中只能嵌套<li>
<li>与<li>之间相当于一个容器可以放一切标签无序列表中的所有默认模式都不用，后期会用css改
有序列表：
示例：<ol>
                   <li>111</li>
        <li>222</li>
<li>333</li>
            </ol>
与ul操作一样顺序无法改变
自定义列表：
示例：<dl>
                    <dt>名词</dt>
        <dd>名词解释</dd>
<dd>名词解释</dd>
        ……
                    <dt>名词</dt>
<dd>名词解释</dd>
<dd>名词解释</dd>
              </dl>
CSS（页面美化）：
一、首先要知道css的作用：Cascading Style Sheets，简称层叠样式表，主要是用来进行页面的版面布局和外观样式的美化
二、其次要知道css的使用原理：能够将结构html和样式css分离书写，简化代码，提高可阅读性；
三、链接方式的使用总结：
行内样式表（<div style=“color:pink; font-size:16px;”>）：书写方便，权重高。缺点：没有实现样式和结构相分离；
内部样式表（书写在head标签里面，title标签下面，以一对style标签包裹）：部分结构和样式的分离。缺点：没有彻底分离；
外部样式表（新建：.css格式的css文件，直接书写选择器以及css样式）：完全实现结构和样式分离，方便各个页面的使用。缺点：需要引入
四、Css选择器的分类：
基础选择器：标签选择器（html选择器）、类选择器、ID选择器
复合选择器：后代选择器、并集选择器、指定标签选择器
五、CSS属性书写顺序：
1、布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
2、自身属性：width / height / margin / padding / border / background
3、文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
4、其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
六、display显示与隐藏（重点）
隐藏：display:none; 属于不占位隐藏
显示：display:block; 将隐藏的元素显示出来
visibility显示与隐藏
占位隐藏：visibility:hidden; 盒子隐藏之后原来的位置还是在的；
overflow溢出隐藏
overflow:hideen; 溢出隐藏，将超出固定宽高范围内的内容隐藏起来，不是删除了；
实际工作中overflow:hideen;的用法（重点）
情况1：可以解决嵌套的两个盒子，如果给里面的子级盒子设置了margin-top父级盒子会跟着塌陷下来，我们可以直接用overflow:hideen;解决塌陷问题；
情况2：可以解决一个没有设置高度的父级盒子，里面的子级盒子浮动以后，父级盒子的高度默认为0,不会被撑开，我们可以给父级盒子添加overflow:hideen;来检测子级的高度撑开父级盒子；
七、banner 滚动图片的布局思路（重要）
一个父级盒子作为总体的大盒子，然后里面的滚动图片用ul>li>a实现，两侧的小箭头一般我们用单独的span或者div实现（css里面用子绝父相进行定位实现），切换的小圆点用ol>li实现（css里面用子绝父相将ol进行定位，然后将里面的li浮动控制外边距即可）；
以上是我目前总结出的一些比较重要的知识点
希望会对你们有所帮助

推荐了解热门学科

java培训	Python人工智能	Web前端培训	PHP培训
区块链培训	影视制作培训	C++培训	产品经理培训
UI设计培训	新媒体培训	产品经理培训	Linux运维
大数据培训	智能机器人软件开发

传智播客是一家致力于培养高素质软件开发人才的科技公司，“黑马程序员”是传智播客旗下高端IT教育品牌。自“黑马程序员”成立以来，教学研发团队一直致力于打造精品课程资源，不断在产、学、研3个层面创新自己的执教理念与教学方针，并集中“黑马程序员”的优势力量，针对性地出版了计算机系列教材50多册，制作教学视频数+套，发表各类技术文章数百篇。

传智播客从未停止思考

传智播客副总裁毕向东在2019IT培训行业变革大会提到，“传智播客意识到企业的用人需求已经从初级程序员升级到中高级程序员，具备多领域、多行业项目经验的人才成为企业用人的首选。”

中级程序员和初级程序员的差别在哪里?
项目经验。毕向东表示，“中级程序员和初级程序员最大的差别在于中级程序员比初级程序员多了三四年的工作经验，从而多出了更多的项目经验。“为此，传智播客研究院引进曾在知名IT企业如阿里、IBM就职的高级技术专家，集中研发面向中高级程序员的课程，用以满足企业用人需求，尽快补全IT行业所需的人才缺口。

何为中高级程序员课程?

传智播客进行了定义。中高级程序员课程，是在当前主流的初级程序员课程的基础上，增加多领域多行业的含金量项目，从技术的广度和深度上进行拓展。“我们希望用5年的时间，打造上百个高含金量的项目，覆盖主流的32个行业。”传智播客课程研发总监于洋表示。

黑马程序员热门视频教程【点击播放】

Python入门教程完整版（懂中文就能学会）	零起点打开Java世界的大门
C++\| 匠心之作从0到1入门学编程	PHP\|零基础入门开发者编程核心技术
Web前端入门教程_Web前端html+css+JavaScript	软件测试入门到精通

上海中心

黑马前端基础重点笔记【黑马web前端】

相关阅读