黑马程序员技术交流社区
标题:
技术贴
[打印本页]
作者:
小海欧
时间:
2019-6-7 16:01
标题:
技术贴
1、网页的组成部分
文字、图片和超链接等元素构成，还包括了音频、视频等等；
2、常见的浏览器
IE、火狐（Firefox）、谷歌（Chrome）、safari和Operra，统称5大浏览器
浏览器内核的作用：读取网页内容；
常见的浏览器内核：
IE（Trident）
Firefox（Gecko）
safari（webkiit）
chrome（chromium/Blink）
Opera（blink）
移动端常见浏览器内核：
安卓机器一般都用Webkit内核，ios以及WP7一般都是系统自带浏览器内核，一般是Safari或者Trident内核；
3、Web标准
由于各个浏览器的内核不同，所以我们要遵循W3C组织制定的web标准让所有浏览器最终显示的效果完全一致‘’
Web标准的组成（死记硬背）
Web标准不是一个标准是一系列的标准：
结构标准（html） ---- 搭建页面的结构
表现标准/样式标准（css）---- 页面样式的美化
行为标准（javascript）--- 实现页面的交互效果
4、HTML的认识
01、HTML是超文本标记语言，不是编程语言；
02、所有的html标记（标签）都要放在尖括号<>里面
5、HTML的结构（重点）
一对html标签里面嵌套一对head标签（给浏览器解析用的）和body标签（用户看的），head标签里面还嵌套了一对titlie标签（用户可以看见的）
6、html标签分类
双标签：
由开始标签<开始标签>和结束标签</结束标签>组成；
例如：<html></html> <body></body> <head></head>
常见的双标签
div、span、p、h1-h6、b、strong、s、del、i、em、ins、u、a
单标签:
不需要包含内容，直接在开始标签最后面添加一个结束的符号/;
例如：<br />
<hr />
常见的单标签
br、hr、img
7、Html标签的关系
• 嵌套关系 --- 后代关系，嵌套关系可以多层嵌套不单是两层；
• 并列关系 --- 兄弟关系
8、sublime的使用技巧（重要）
新建文档 Ctrl+N
保存 Ctrl+S 保存文件名必须为.html；
放大缩小界面文字大小：按住Ctrl键，滚动鼠标滚轮或者Ctrl+加号变大，Ctrl+减号缩小；
生成页面骨架：01 – html:5 按下tab键 02 ！按tab键；
浏览页面效果：右键在浏览器中打开；
注意：生成骨架的时候，我们必须要先将新建的文档保存为.html格式；
颜色主题设置
9、自动生成的html结构详解
<!DOCTYPE html> 告诉浏览器用最新的html5版本去解析代码
lang="en"规定网站显示的语言，一般用英文en、中文zh-CN
字符编码 <meta charset="UTF-8">
• Gb2312 简体中文 BIG5 繁体中文 GBK 全部中文（包括简体和繁体中文）
• UTF-8 全世界所有国家需要用到的字符 --- 常用的
10、语义化标签的好处
语义化标签让代码结构更清晰，方便代码的阅读和维护，也可以让浏览器或者网络爬虫更好的解析从而分析其中的内容，更好得到优化网站的搜索引擎；
11、标题标签
标题标签是双标记，又开始有结束，默认加粗，字体大小按照权重不同大小不一（后面全部都可以用css处理）
标题标签分为6个级别，分别是h1/h2/h3/h4/h5/h6作为标题使用，并且依据重要性递减；
注意（记住）：
01、标题标签默认加粗，独自占一行，双标签；
02、h1标签一般情况下一个页面最好出现一次，并且放logo最好，h2标签一个页面最多使用两次一般放主标题，h3-h6标签可以多次重复出现；
12、段落标记（记住）
段落标签p，双标签，可以清楚得到划分页面的段落；
13、水平线标签
水平线标签hr，单标签
14、浏览器对回车和空格的解析（注意）
浏览器在解析代码的时候，只会解析一个空格，不管输入多少个空格，对于回车换行直接是不解析或者解析成一个空格，所以我们在书写换行效果的时候书写换行用<br />，空格用 书写即可；
15、换行标签
br标签 ，<br />强制换行；
注意：使用段落标签等语义标签换行和br换行是不同的，前者是有控制范围效果有开始有技术，后者只是简单的强制换行效果；
16、div和span（重点）
div标签布局标签，主要是布局用的大标签，也是主要标签;
特点：没有语义，独占一行；
span标签布局标签，不用来做主要布局，一般放特殊效果的文字或者小图标；
特点：没有语义，一行共存多个；
17、文本格式化标签（记忆）
加粗标签： <b>单纯的加粗</b> <strong>语义化强调</strong>
倾斜标签： <i>单纯的加粗</i> <em>语义化强调</em>
删除线标签： <s>单纯的加粗</s> <del>语义化强调</del>
下划线标签： <u>单纯的加粗</u> <ins>语义化强调</ins>
18、html的标签属性
使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。其基本语法格式如下：
<标签名 属性1=“属性值1” 属性2=“属性值2” …> 内容 </标签名>；
注意：在书写标签属性的时候每一个属性之间要用空格隔开；
19、图像（图片）标签（重点+记忆）
图像标签 --- img ，单标签
<img />,可以配合src属性将图片引入html页面，<img src=“图片路径” />
图像常见的属性
src 属性值 --- url 图像路径
alt 属性值 --- 自定义文本 图像不能正常显示的时候替换文本；
title 属性值 --- 自定义文本 鼠标移入图片显示提示文本；
width 属性值 --- 自定义数值 设置图片的宽度；
height 属性值 --- 自定义数值 设置图片的高度；
border 属性值 --- 自定义数值 设置图片的描边，一般不使用，后期会使用css进行设置；
图片使用的注意事项：
使用img标签的时候src属性是不能够省略的，alt是图片错误或者丢失的时候显示提示文本，img的宽width和高height书写的时候尽量不要同时都出现防止图片变形，我们只需要书写一个宽或者高让图片等比缩放；
20、超链接a（重点）
超链接：实现页面之间的跳转，a标签，双标签；
<a href=”#”></a>
常用属性（强制记忆）
href用于指定链接目标的url路径地址，必不可少的；
target 用于指定链接页面的打开方式，属性值我们一般选择新窗口打开 _blank； === target="_blank"
超链接的链接方式（记忆）
外部链接（在线链接）【href里面引用绝对路径】：直接在href=“http://+要访问的网址”，注意http://必须书写；
内部链接(href里面引用相对路径)： 直接在href=“书写html页面名称”，注意在书写内部链接的时候要书写清楚页面的路径；
空链接： 如果不知道要链接到什么地方，我们就暂时用#代替即可；
其他链接：我们不仅仅能给文字添加链接，我们还可以给其他的网页元素添加链接，例如：图像、表格、音频、视频等；
21、html注释：
<!-- 注释内容 -->
添加注释的作用：说明代码的含义，更好的管理代码的可读性，程序是不会对注释的代码进行解析的；
快捷键：Ctrl+？
22、路径
所谓的路径就是从文件（html文件或css文件）自身出发找目标文件；
常见的路径分为两大类：绝对路径（不推荐使用的）和相对路径（是我们一直要用的）
相对路径（重要）
相对路径又分为：同级路径、下级路径、上级路径
同级路径
文件（html文件和css文件）和目标文件在同一个目录文件下面平级存在，我们可以直接书写目标文件名称（如果是图片就直接书写图片名称）,
例如：laowang.jpg； === <a href=” laowang.jpg”>找老王</a>
下级路径：
文件（html文件和css文件）和存放目标文件的父级是平级存在，我们可以先书写目标文件的父级名称+/+目标文件名称，例如：img/laowang.jpg <a href=”upload/ laowang.jpg”>找老王</a>
上级级路径：
存放文件（html文件和css文件）的父级和存放目标文件的父级是平级关系，我们可以直接以 ../ 表示上一级去查找目标文件路径；
记忆口诀：
同级路径：文件和目标文件是同一个父级，平级关系；
下级路径：从文件出发往里面查找；
上级路径：从文件出发往外面查找，用 ../ 表示上一级关系；
绝对路径（了解）
以web站点根目录为参考基础的目录路径，其实一般分为两种情况：
01、带有盘符的路径，坚决不能使用，
例如：“D:\web\log.gif”;
02、完整的网络地址，可以使用，只要网络资源一直存在，
例如： http://www.itcast.cn
23、锚点定位
作用：实现页面内部的跳转
分两步实现锚点链接：
第一步：找目标，想要跳转到的位置添加id=”id名称”
第二步：设置锚点按钮，超链接a，
<a href=”#id名称”>跳转到目标</a>
24、base标签
base标签可以统一设置超链接a的打开方式,书写在<head></head> 之间；
<base target=“_blank”>
25、预格式化标签（了解）
<pre></pre>标签课定义与格式话得到文本，呗包围在<pre>标签中的文本通常会保留空格和换行符号，按照html预设好的样式显示，但是不建议大家使用；
26、特殊字符
注意：我们常用的特殊符号是：空格 、小于号<、大于号>、版权©；
=========html第二天========
27、表格
表格的结构：
一对table标签嵌套tr标签，tr标签嵌套td标签；
table表示表格整体，tr表示行，td表示单元格（列）；
Table里面只能嵌套tr和caption标签
表格的常见属性：
宽：width ---------- width=”800”
高：height ------------- height=”500”
边框：border，如果设置border=0是没有边框；
对齐方式：align 取值left、center、right；设置表格在网页中 的水平对齐方式； --- align=”center”
单元格和单元格之间的距离：cellspacing -- cellspacing=”5”
单元格内容到单元格边框的距离：cellpadding
cellpadding=”20”
表头单元格th
表头单元格是tr嵌套th书写，默认是加粗居中显示的效果；
<tr>
<th></th>
</tr>
注意：th里面的文字默认是加粗居中显示，想要td里面的文字居中显示我们需要给tr设置align="center"属性让里面td的文字居中，想要td里面的文字加粗我们需要单独用加粗标签b或者strong来嵌套；
表格标题caption
单元格的合并（了解记忆）
跨行合并：1rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”
注意：合并单元格的顺序：先上后下，先左后右；
单元格合并3步曲
01 先确定是跨行还是跨列；
02 根据先上后下，先左后右的原则找到目标单元格，然后书写合并方式，确定合并单元格的数量；
03 删除多余的单元格；
表格划分结构（了解）
于比较复杂的表格，表格的结构也就相对的复杂了，所以又将表格分割成三个部分：表头、正文和脚注。而这三部分分别用:
表头：thead
正文：tbody
脚注:tfoot
28、列表
列表分为：无序列表、有序列表、自定义列表
无序列表（重点一定要记住）
结构：ul嵌套li标签，li的个数不定，按照设计稿需求进行设置；
注意：01、<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的；
02、无序列表的所有默认样式我们都不用，后期会用css来进行设置；
有序列表（知道实际工作中不用）
ol嵌套li标签；
<ol>
<li></li>
<li></li>
<li></li>
</ol>
自定义列表：
dl嵌套dt和dd标签，dt表示描述标题，dd描述的内容；
自定义列表的使用技巧：
01 一个dl嵌套一个dt和多个dd，相当于中国的一词多义；
02 一个dl里面可以嵌套多对的dt和dd（实际工作中很少用）；
03 一些图文混排效果可以用dl嵌套dt和dd实现，dt放图片，dd放文字；
注意：所有的列表都有默认的样式，我们在实际开发的时候都要去除，所以现在不必纠结；
29、表单（重点要强制记忆哦）
完整的表单的组成
提示文本、表单、表单域（总体的提交数据的标签）组成
表单的作用
搜集用户信息，并且提交到后台
input控件
输入的意思，可以更改type属性的属性值来指定不同的控件类型；
还有对应的name、value、size等几个属性；
Input表单属性（死记硬背）
01、value 默认值，没有交互效果 --- value=” 请输入您的名字”/、
02、placeholder占位符 html5的新属性，有交互效果 --- placeholder="请输入您的名字"
03、name 给当前的数据起一个名字，让后台工作人员调用
常见的input表单控件
文本框：input的type取值为text
可以设置value属性设置默认的值，<input type=“text” value=“默认值” />
密码框：input的type取值为password
单选按钮：type=“radio” ,想要实现单选效果我们需要给input标签设置相同的name进行设置归为一类；
复选按钮：type=“checkbox”，也可以设置同样的name名称，但是 不会影响多选的效果；
单选按钮和复选框的默认选中
Input按钮组控件
普通按钮：<input type=“button” value=“普通按钮” /> 必须要自己设置value值；
提交按钮：<input type=“submit” />； 可以设置自己的value值也可以用默认的；
重置按钮：<input type=“reset” />；可以设置自己的value值也可以用默认的；
图片按钮：<input type=“image“ src=”图片路径” /> src属性必须书写查找图片路径；
文件域：<input type=“file” /> 上传文件使用；
label标签
作用：提高用户体验，扩大input表单的可操作性，点击文字可以直接将光标定到输入框，不是表单标签；
使用方法：
01、用label直接包括input表单 -----
<label> 用户名： <input type=“radio” name=“usename” value=“请输入用户名” /> </label>；
02、用for 属性规定 label 与哪个表单元素绑定 ----
<label for=“nan”>男</label>
<input type=“radio” name=“sex” id=“nan“ />
textarea文本域标签
textarea 双标签，可以控制宽高，自带的两个属性cols和rows不使用，后期我们会使用css进行对应设置
文本框input和文本域textarea的区别：
input只能显示一行文本， 单标签，通过value设置默认值 ， 一般适用于用户名，昵称，密码等；
textarea可以显示多行文本，双标签，一般适用于留言板等；
select下拉列表
一对select标签嵌套多对的option标签
如果option有selected=“selected”表示默认选中；
<select>
<option selected="selected">北京</option>
<option>上海</option>
</select>
30、form表单域标签（重点）
实际开发的时候我们只要有表单的区域必须要有form表单域标签
作用
在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。
默认属性：
action=“url地址” ----- 用于指定接收并处理表单数据的服务器程序的url地址。
method=“ 提交方式” ---- 取值 get/post，get是明文提交，post是密文提交；
name=“名字” 设置不同的取值名称用于后台提交；
标签按钮 button
<button>按钮</button>
1、Css的作用
Cascading Style Sheets，简称层叠样式表，主要是用来进行页面的版面布局和外观样式的美化；
2、使用css的原理
能够将结构html和样式css分离书写，简化代码，提高可阅读性；
3、css的书写位置
分为3类：行内式、内嵌式（内部样式）、外部链接式
Css属性书写语法
属性：属性值；
Css样式书写格式：
选择器 { 属性1:属性值1; 属性2:属性值2; …… }
选择器：指定CSS样式作用的HTML对象（要更改样式的标签），花括号内是对该对象设置的具体样式。
属性和属性值：以键值对的形式出现，属性和属性值之间用英文的冒号 ’ : ’ 链接；
Css注释
/* css注释内容 */
快捷键 Ctrl+？， 如果是外部链接的css快捷键是ctrl+shift+？
行内式
直接在标签的开始标签身上添加一个 style=“”属性，然后在引号里面书写css属性和属性值即可、。
注意：行内样式没有实现结构和样式分离，尽量不用：
例如：<div style=“color:pink; font-size:16px;”>我是行内样式</div>;
内部样式（内嵌式）：
书写在head标签里面，title标签下面，以一对style标签包裹，实现了结构和样式的半分离；
外部链接
使用外部链接的好处：实现了结构和样式的完全分离，代码简介，可读性强；
使用外部链接的步骤
01 新建：.css格式的css文件，直接书写选择器以及css样式；
02 引用：利用link标签引入新建的css文件，要配合link的三个属性 rel关系，type文件类型 （可以省略），href文件路径；
外部链接的好处
一个css样式可以共享，如果两个页面的标签样式完全一致，就可以使用同一个css文件，然后分别连接过来即可；
三种链接方式的使用总结
行内样式表：书写方便，权重高。缺点：没有实现样式和结构相分离；
内部样式表：部分结构和样式的分离。缺点：没有彻底分离；
外部样式表：完全实现结构和样式分离，方便各个页面的使用。缺点：需要引入
4、Css选择器
Css选择器的分类
Css选择器分为两类：基础选择器和高级选择器（复合选择器）
基础选择器：标签选择器（html选择器）、类选择器、ID选择器
复合选择器：后代选择器、并集选择器、指定标签选择器
CSS选择器作用
选择标签的，把想要选择的元素标签选择出来。
标签选择器：
以标签名称命名的选择器，可以把将页面中所有的同类元素全部选中，所以实际工作中标签选择器不推荐大家使用；
类选择器（重点）
类选择器定义
类选择器使用有一个过程：
01 定义： 在css里面用点“ . ” + 类名称 +{ css键值对 } 进行样式定义;
02 调用：在html里面哪个标签需要，就在开始标签敲空格class=“类名称”进行调用；
类选择器的命名规则：
不能用纯数字、数字开头的、中文命名；
但是可以用数字结束。
类选择器特殊用法（多类名）
一个标签身上只能使用一个class，如果想要调用多个类名我们可以在一个class里面直接以空格隔开直接书写另一个类名称即可；
例如：<div class=“red font100”>一个元素调用多个类名</div>
ID选择器（了解）
id选择器的定义使用
id选择器使用有一个过程：
01 定义： 在css里面用 “ # ” + id名称 +{ css键值对 } 进行样式定义;
02 调用：在html里面哪个标签需要，就在开始标签敲空格id=“id名称”进行调用；
id选择器的命名规则：
不能用纯数字、数字开头的、中文命名；
类选择器和id选择器的区别：
类选择可以重复使用，只要样式一致就可以重复的使用同一个类名称；
id选择器是唯一的不能重复使用，一个id名称一个页面只能出现一次；
通配符选择器*
一个*表示选中所有标签，匹配页面的所有标签，降低页面得到响应时间，不建议使用；
*{
margin:0;
padding:0;
}
以上代码表示清空所有的默认边距；
5、文字控制属性（死记硬背）
文字颜色 color
Color取值
a、直接写英文单词yellow，red等等
b、16进制表示#aabbcc或者#abc
c、rgb（）如rgb（0，0，0）
d、rgb（）如rgba（0,0,0,0.5）a为透明度
常用测试颜色16进制：
黑色系列：#000； #333； #666； #999；
灰色系列：#ccc； #eee； #ddd； #dedede；
红色：#f00；
文字大小 font-size
文字字体 font-family
取值可以取一个或者多个，如果取多个值要用英文的逗号隔开，表示先找第一个字体如果没有就往后面查找，依次类推；
如果是汉语的文字要用引文状态的引号引起来；
Unicode字体
字体加粗 font-weight
如果要用数字来表示加粗或者不加粗，千万不能书写单位px；
字体样式(风格) font-style
实际开发中我们很少让文字倾斜，但是我们会让倾斜的i和em不倾斜；
文本水平居中 text-align: center;
text-align文本居中控制，取值：left、right、center；
text-align让文字在父级盒子里面居中显示；
文本的行高 line-height
line-height取值为数字+px单位，可以设置文字行与行之间的距离；
如何量取设计稿的行高？
从第一行文字的开始到第二行文字的开始就是行高
文本首行缩进 text-indent
text-indent首航缩进，取值为具体的像素值或者直接em，1em等于一个字的大小；
text-indent:2em; 首行缩进2个字；
6、字体的综合写法 font复合属性
注意:使用font的综合书写的时候一定要按照顺序书写，属性之间用空格隔开，如果没有的属性可以省略不写，文字大小和字体是必须要书写的，否则不生效；
实际工作中一般只用：font:文字大小 字体；
7、文本线条装饰 text-decoration （死记硬背）
text-decoration:none;没有线
text-decoration：underline；下划线
text-decoration:line-through; 中 划线/删除线
text-decoration:overline; 上划线
8、chrome调试工具（重点）
01、捷键F12调出调试工具，如果直接按F12不生效我们就+FN
02、在页面的空白处右键 ---- 检查
并集选择器（重点）
样式一致的盒子如果单独设置样式需要书写多次，我们可以把样式相同的盒子只写一个样式，用英文的逗号隔开即可；
一个逗号表示并集关系；
好处：使用并集选择器书写代码可以节约代码量，重复的代码只写一遍；
块级元素(死记硬背)
特点：独占一行，设置宽高能够生效，也可以控制外边距和内边距；
默认的宽度是父级的100%；
是一个容器盒子，里面可以放行内或者块元素；
注意：p标签是块级元素，但是p标签里面不能放div标签；
同理h标签（标题标签）dt等都是文字类块级标签，里面尽量不能放其他块级元素；
常见的块级元素：div/p/h1-h6/ul/li/dl/dt/dd
行内元素(死记硬背)
特点：01、一行可以共存多个，设置宽高不生效，一般宽高是自己本身的内容撑开；
02、行内元素里面最好只放文本或者其他的行内元素；
常见的行内元素：a span u s del strong em i ins 等；
注意：超链接里面不能嵌套超链接；
特殊情况a标签里面可以放块级元素，但是最好给a转换成块级模式；
8、背景的复合写法（死记硬背）
background:背景颜色 url（） 平铺方式 是否固定 X轴 Y轴；
注意：属性值没有书写顺序，没有的属性可以省略不写；
实际工作中建议大家使用复合写法；
9、超大的背景图设置
实际工作中电脑的分辨率是不同的1920/1600/1440/1366……我们设计师在制作图片的时候一般是按照1920来设计；
解决方案：
一般情况下我们用大背景图是为了匹配不同的分辨率的屏幕，所以图片越大越好，但是我们用背景插入图片之后需要将图片的位置进行位置调节，让图片的中间位置显示出来，可以是用 background-position: center 0；表示X轴（水平方向居中），Y轴（垂直方向贴顶）；
边框border（死记硬背）
边框的综合写法
边框的宽度：border-width:3px;
边框的样式：border-style:solid;
常用的线条样式：solid实线 dashed虚线 dotted点线
边框的颜色： border-color:red;
综合写法：border:边框宽度 边框样式 边框颜色；
Csss设置细线表格（死记硬背）
table,th,td{
border:1px #ccc solid;
border-collapse:collapse;
}
border-collapse:collapse;合并相邻的边框
注意：如果整个页面只有一个table我们直接写table样式，如果有多个我们可以给table设置一个父级用后代选择器去书写；
内边距padding（死记硬背）
作用：拉开内容到盒子边缘的距离；
Padding相关设置（不同方向的设置）：
padding:30px; 四个方向的内边距都是一个值；
padding-left:40px; 设置左边的内边距；
padding-right:40px; 设置右边的内边距
padding-top:40px; 设置距离顶部的内边距
2、计算盒子实际大小（死记硬背）
盒子的实际大小：内容的宽和和高度+内边距+边框；
盒子撑大问题（死记硬背）
问题：如果盒子有固定的宽高的情况下，添加了边框和内边距，盒子的实际大小会变大；
解决方案：添加了多少就减去多少； ----- 加多少减多少
margin相关设置：（死记硬背）
margin:30px; 四个方向的外边距都是一个值；
margin-left:40px; 设置左边的外边距；
margin-right:40px; 设置右边的外边距
margin-top:40px; 设置距离顶部的外边距
margin-bottom:40px; 设置距离底部的外边距
6、插入图片和背景图片区别（记住）
内容一般用插入图片，装饰性的小图标一般用背景图片；
插入图片移动位置要使用盒子模型的外边距margin和内边距padding设置；
背景图片移动位置用背景图片额度定位background-position进行设置；
7、清除默认样式
因为一些表情有默认的外边距和内边距样式，我们需要完全清除自己书写
8、并列垂直外边距合并（重点）
两个盒子如果垂直排列（上下排列），上面的盒子设置了marin-bottom,下面的盒子设置了margin-top，最终显示的样式两个值谁大就显示谁；
解决方案：不要同时设置，只给一个盒子设置即可；
4、实体化三属性（重要滴很）
宽 width
高 height
背景 background
注意：这三个属性属于我们布局的中流砥柱，只要这三个值设置好了，我们书写的网页就很少出现兼容问题；
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2