html 是 hyperText markup language(超文本标记语言)缩写。hypertextreference
-
由左右尖角号<>和首尾标签组成
<html><!html> -
<meta charset="utf-8">通过设置charset属性的值来设置字符编码(相当于一个字典可以用来查找识别语言) -
编码字符集常用的就四个：
- gb2312:中国的国家标准第2312条（包括中国、韩国等亚裔字符集，但只能识别简体字符集，不能识别繁体）
- gbk :中国的国家标准扩展版本（包括亚裔字符集的简体字符集和繁体字符集）
- unicode:万国码（包含所有国家的字符集）
- utf-8:unicode的升级版
-
head标签内容是人看不到的；body标签的内容是展示给人看的
-
<html lang="en">
- lang="en"：告诉搜索引擎我们的网站是关于什么内容的
- 英文：en
- 中文：zh
- 德语；de等（除了英文是english缩写，其他的都是中文首字拼英首两字母）
<html lang="en, zh">
- SEO（搜索引擎优化技术）：
<meta content="" name="keywords">关键字<meta content="" name="description">描述
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="" name="keywords">
<meta content="" name="description">
<title>html基础篇_初级标签</title>
</head>
<body>
超文本标记语言！！！
<p>p标签：成段展示</p>
<p>p标签：成段展示</p>
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
<strong>加粗</strong>
<em>斜体</em>
<strong><em>又加粗又斜体</em></strong>
<del>$50相当于有中划线的标签</del>
<address>地址标签</address>
<div>充当容器</div>
<span>充当容器</span>
</body>
</html>
-
容器的功能：结构化和绑定化操作
-
作为浏览器，一个汉字就能分出一个来;一个字母是一个字母，一串英文单词不能识别是几个单词，只能当作一个来使,除非用英文单词（文本）分隔符隔开（即空格，在浏览器中空格就是英文单词（文本）分隔符）。浏览器不能识别一串英文单词是表示一个词还是多个词，只能当作一个词来使用
- 例如：
<div style="background-color:red;width:100px;height:100px;">asdfffffffffffffgggggggggasfgaergaga</div>此处当作一个单词来使，不会换行
<div style="background-color:red;width:100px;height:100px;">英文单词分隔符英文单词分隔符</div>
// 此处一个文字就是一个词（单位），因此要是溢出容器就会换行
-
html编码：
代表一个空格文本<代表小于号>代表大于号
-
有序列表ol>li order list
- type="1,a,A,i,I"只有这五种排序方式
- reversed="reversed"倒着排序
- start="2" 表示排序方式从第几个开始排，这只写阿拉伯数字
<ol type="I" reversed="reversed" start="2">
<li>本杰明巴顿</li>
<li>火影忍者</li>
<li>海贼王</li>
<li>一人之下</li>
</ol>
- 本杰明巴顿
- 火影忍者
- 海贼王
- 一人之下
- 无序列表ul>li（常用于导航栏功能） unorder list
- type="disc" discircle实心圆，默认是实心圆
- type="square" 实心方块
- type="circle" 空心圆（圈）
<ul type="disc">
<li>天猫</li>
<li>聚划算</li>
<li>天猫超市</li>
</ul>
- 天猫
- 聚划算
- 天猫超市
- 导航栏例子（list-style:none;表示列表样式为没有效果）:
- list-style:none;表示列表样式为没有效果
- height:25px;line-height:25px;表示文本垂直居中
<ul>
<li>天猫</li>
<li>聚划算</li>
<li>天猫超市</li>
</ul>
<style type="text/css">
*{
margin:0;
padding:0;
}
ul{
list-style:none;
}
li{
margin:0 10px;
padding:0 5px;
float:left;
color:#f40;
font-weight:bold;
font-size:14px;
height:25px;
line-height:25px;
}
li:hover{
background:#f40;
color:#fff;
border-radius:15px;
}
</style>
- 图片展示
<img src="" style="width:200px" alt="这是路飞" title="图片提示符">
-
style="width:200px"：图片的宽高是成比例的，修改宽或高另一个都会成比例缩放
-
src表示地址： （1）网上的url ：图片右键在新标签页中打开图片 （2）本地的绝对路径 ：图片地址和html文件不在同一文件夹 （3）本地的相对路径 ：图片地址和html文件在同一文件夹
-
alt="这是路飞" ：表示图片占位符，当图片展示或加载不出来时，就展示alt=""的内容
-
title="图片提示符" ：表示图片提示符，当鼠标移动到图片上时，就会显示出内容
- a标签：超链接
<a href="" target="_blank"></a>
-
anchor缩写 ：锚，表示定在某个点上,可以记录一个位置然后通过a标签回到那个位置去
-
href="www.baidu.com" ：表示链接地址（hyperText reference 超文本引用）
-
a标签可以包裹任何东西，但a标签不能包裹a标签，p标签不能包裹块级元素 例如 ：
<a href=""><img src=""></a> -
target="_blank" ：表示在新页面中打开
-
a标签的作用：
- 超链接
- 锚点（通过href="#demo"找到id="demo"的地址）
- 打电话href="tel:12345678901"
- 协议限定符href="javascript:"可以写一些javascript代码（强制性运行javascript代码）
<a href="javascript:while(1){alert('无限循环')}">你点</a>
- 表单标签form：可以把前端的数据发送给后端
- 数据想要提交成功，一定要有数据名和数据值，才能提交成功
- 密码加密通常用md5加密，特点：不可逆
- onfocus="" 表示鼠标聚焦时，内容等于什么
- onblur="" 表示鼠标没有聚焦时，内容等于什么
- 检索框简单实现：
<form method="get/post" action="">
<input type="text" name="search" value="请输入关键字" onfocus="if(this.value=='请输入关键字')this.value=''" onblur="if(this.value=='')this.value='请输入关键字'">
</form>
- 单选框：名字相同表示同一个题目，有名有
- 默认选项：checked="checked"
- type="radio"
<input type="radio" name="1" value="莱昂纳多">
<input type="radio" name="1" value="比尔盖茨">
<input type="radio" name="1" value="乔布斯">
- 复选框
- 默认选项：checked="checked"
- type="checkbox"
<input type="checkbox" name="1" value="莱昂纳多">
<input type="checkbox" name="1" value="比尔盖茨">
<input type="checkbox" name="1" value="乔布斯">
- 下拉框选项
<select name="star">
<option value="乔布斯">莱昂纳多</option>
<option value="比尔盖茨">比尔盖茨</option>
<option value="乔布斯">乔布斯</option>
</select>
- 产品要符合三个特点才能很好？
- 刚需问题，社交
- 用户体验问题，用户体验好：基于好看的基础上，一定要让用户尽量减少操作，就能完成它的功能（培养用户的懒习惯）
- 用户粘性问题
- 编程就是先干第一步，后期慢慢调整，一点点接近目标的过程。编程就是量化你的思维，训练你的思维。思维清晰，不管结果怎么样，先预期一个结果先干第一步，第一步之后慢慢往终点调整。
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="" name="keywords">
<meta content="" name="description">
<title>html进阶篇_高级标签</title>
<style type="text/css">
*{
}
ul{
list-style:none;
}
li{
float:left;
color:#f40;
font-weight:bold;
font-size:14px;
height:24px;
line-height:24px;
margin:0 10px;
padding:0 5px;
}
li:hover{
color:#fff;
background-color:#f40;
border-radius:15px;
}
#only4{
border:100px solid black;
width:0;
height:0;
border-left-color:transparent;
border-right-color:transparent;
border-bottom-color:transparent;
}
</style>
</head>
<body>
<ul>
<li>天猫</li>
<li>聚划算</li>
<li>天猫超市</li>
</ul>
<div id="only1" class="demo1 demo2">1</div>
<div id="only2" class="demo2 demo3">2</div>
<div id="only3" class="demo3 demo4">3</div>
<div id="only4" class=""></div>
</body>
</html>
- 现在的主流浏览器及内核？
-
主流浏览器必须符合两个要求：一定的市场占有量和独立内核
-
浏览器的组成部分？
- shell部分（就是可视化的部分，也就是包装）
- 内核（操作代码运行的，识别代码路径和优化问题等，代码运行快与不快有关）
-
主流浏览器 内核
- IE trident
- Firefox Gecko
- Google Chrome Webkit/Blink
- Safari Webkit
- Opera presto
-
html（结构）、css（样式）、javascript（行为）相分离
-
css：cascading style sheet 层叠样式表
-
css引入方式：
- 行间样式
- 页面级css：在head标签写
<style type="text/css"></style> - 外部css文件
<link rel="stylesheet" type="text/css" href="">
-
浏览器对于 html、css、javascript代码的加载是下载一行执行一行，对于外部文件下载是同时进行的（开启新线程）。
- 异步的：表示同时执行，异步加载
- 同步的：表示一个执行完才能执行另一个，同步加载
-
选择器
- id选择器：css中若要选中某个id要在前面加个 “#” 号
<div id="demo"></div>
<style type="text/css"> #demo{color:#f40;} </style>
* id选择器的特点：一一对应，一个标签只能有一个id。
-
class选择器：css中若要选中class选择器要在前面加个 “.”号
<div class="demo1"></div> <style type="text/css"> .demo1{color:#f40;}</style>- class选择器的特点：多对多 若一个标签要加载多个class用空格隔开就可以了
-
标签选择器
-
通配符选择器（*{}）i
-
行间样式
-
属性选择器：用属性选择器的时候可以只写“id或class”，不然就要写完整id=""或class=""
<div id="only" class="demo"></div>
<div id="only1" class="demo1"></div>
<style type="text/css">
[id]{background-color:red;} //含有id的div标签背景颜色都变红
[class]{background-color:green;} //含有class的div标签背景颜色都变绿
[id="only"]{background-color:yellow} //含有id="only"的div标签背景颜色变黄
</style>
- 选择器权重比较
- !important infinity（正无穷）
- 行间样式 1000
- id 100
- class|属性|伪类 10
- 标签|伪元素 1
- 通配符 0
（1）在计算机中能表示的数字是有穷的，infinity正无穷是个无限大的定量，infinity+1 就是比 infinity 大 （2）选择器的权重值是一种进制（256进制）
1 0 0 0
255 255 255 255
满 255 进 1
26. 复杂选择器 浏览器对于父子选择器的底层原理：通篇扫描选出第一个选择器之后，后面的选择器从右往左寻找。目的：提高效率
- 父子选择器/派生选择器：格式：选择器之间用一个空格隔开就可以了
<div>
<span>1</span>
</div>
<span>2</span>
<style type="text/css">
div span{//只选中了div里面的span标签
color:#f40;
}
</style>
特点：不一定要直接包含，间接的包含也是父子选择器，爷孙等
<div>
<span>
<a href=""></a>
</span>
</div>
<style type="text/css">
div a{
color:#f40;
}
</style>
- 直接子元素选择器：必须是父子关系; 格式：标签选择器之间用一个大于号“>”
<div>
<span>
<a href="">1</a>
</span>
<a href="">2</a>
</div>
<style type="text/css">//只有2变色了
div>a{
color:#f40;
}
</style>
- 并列选择器：多个选择器之间不用空格隔开连在一起，来限定选中一个元素
<div>1</div>
<div class="demo">2</div>
<p class="demo">3</p>
要求只选中2号：就可以运用并列选择器来选中某个标签
<style type="text/css">
div.demo{
color:#f40;
}
</style>
- 分组选择器：用于代码耦合度高的选择器
<em>1</em>
<strong>2</strong>
<span>3</span>
<style type="text/css">
em,
strong,
span{
color:#f40;
}
</style>
27.复杂选择器中的权重计算问题： 把他们之间各自的权重相加就可以了，如果权重值相等，后来的优先
!important的用法：
<div class="demo1" id="only1">
<span class="demo2" id="only2"></span>
</div>
<style type="text/css">
#only1 .demo2{
color:#f40;
}
.demo1 #only2{
color:#000;
}
他们两个复杂选择器的权重计算值相同，后来优先，所以文本颜色为黑色。
如果color:#f40!important;则文本为淘宝红。
</style>
28. css的基础属性
- font-size:16px;浏览器默认的字体大小是16px，但互联网一般都运用12或14 任何一个编程工具设置字体的大小通常是设置字体的高就可以。
- border-color:transparent;透明色
- text-align:right/center/left;文本文字对齐方式（只能是水平居中）
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="" name="keywords">
<meta content="" name="description">
<title>border</title>
<style type="text/css">
.demo1{
width:0px;
height:0px;
border:100px solid black;
border-left-color:transparent;
border-top-color:red;
}
.demo2{
width:0px;
height:0px;
border:100px solid #f40;
border-bottom-color:transparent;
border-left-color:transparent;
border-right-color:transparent;
margin:50px 100px;
}
.demo3{
width:400px;
height:200px;
border:1px solid black;
}
</style>
</head>
<body>
<div class="demo1"></div>
<br>
<div class="demo3">
<div class="demo2"></div>
</div>
</body>
</html>
1、文本水平居中text-align:center;
（1）文本水平居中
<div>火影忍者</div>
div{
width:200px;
height:50px;
border:1px solid black;
text-align:center;
}
（2）单行文本垂直居中：文本高度等于容器高度
<div>火影忍者</div>
div{
border:1px solid black;
text-align:center;
height：20px
line-height:20px;
}
2、文本首行缩进
（1）text-indent:2em;表示首行缩进2个文本单位
1em = 1 * font-size
3、文本中划线、下划线、上划线：text-decoration（文本装饰）
（1）text-decoration:line-through;中划线
（2）text-decoration：none;文本装饰效果为无；
（3）text-decoration：overline;上划线
（4）text-decoration：underline;下划线
（5）运用场景：a标签的去下划线、价钱的中划线
4、鼠标提示符：cursor:pointer/help等;（光标定位值）
pointer；表示小手
help：表示问号
5、伪类选择器：表示当鼠标移动到某一区域的时候，展现出某种效果；
https://www.html.cn/book/css/selectors/pseudo-classes/index.htm可查看其它的伪类
（1）格式：
<a href=""></a>
<style type="text/css">
a:hover{
}
</style>
6、标签分类
（1）行级元素 display:inline;
feature：内容决定元素所占位置、不可以通过css改变宽高
常见的行级元素：a、span、strong、em、del
（2）块级元素 display:block;
feature：独占一行、可以通过css改变宽高
常见的块级元素：div、p、ul、li、form、address
（3）行级块元素 display:inline-block;
feature：内容决定元素所占位置、可以改变宽高
常见的行级块元素：img
（4）弹性盒子
7、凡是带有inline的元素都有文字特性，含有文字特性的元素就会配分隔：如果两个含有文字特性的元素之间含有空格或换行，就会被分隔 分隔的距离为：4px
（1）解决办法：在他们之间不加空格也不换行展示
（2）错误的解决办法：margin-left:-6px;
（3）代码上传服务器压缩代码分为两个步骤：将多个字母的标签等用一个字母来代替、去空格去回车
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="" name="keywords">
<meta content="" name="description">
<title>css企业开发经验、习惯、盒子模型、层模型</title>
<style type="text/css">
img{
width:200px;
margin-left:-6px;
}
</style>
</head>
<body>
<img src="https://www.qmlike.com/attachment/Mon_1611/588_287882_d0e4a74cf44a791.jpeg?88">
<img src="https://www.qmlike.com/attachment/Mon_1611/588_287882_d0e4a74cf44a791.jpeg?88">
<img src="https://www.qmlike.com/attachment/Mon_1611/588_287882_d0e4a74cf44a791.jpeg?88">
<img src="https://www.qmlike.com/attachment/Mon_1611/588_287882_d0e4a74cf44a791.jpeg?88">
<br>
<div>上面这四张图片的代码通过img换行展示，因此他们之间会分隔4px</div>
</body>
</html>
1、开发习惯：可以先定义css功能。
2、标签选择器的主要用处：初始化样式，用来自定义
em{
font-style:noraml;//初始化
}
3、通配符选择器的主要功能：初始化所有的标签。
（1）有些标签天生自带margin,padding，但这些并不是我们需要的，有时还会影响我们，因此可以通过通配符初始化他们，我们需要的时候再自行加上去。
*{
margin:0;
padding:0;
}
（2）body有一个天生的margin为8px
4、元素定位技术：层模型
z-index:0; ：设置元素在第几层的，正常的元素默认是0；
标签包裹不住absolute，只能包裹住relative\\\\\\\\\\\\
当含有float和absolute时display将会变成inlin-block（行级块元素）
（1）position:absolute;绝对定位：当一个元素变为绝对定位的时候，这个元素就脱离原来的层，跑到上面一层了。每一个absolute都是一个新的层
left:100px;
top:100px;
position配合left和top使用：哪个方向就是哪边线与哪个墙壁的距离
特点：
当元素为句对定位时，他是相对于最近的有定位元素的父级进行定位的，如果没有就相对于浏览器边定位。
（2）position:relative;相对定位：保留原来位置进行定位，相当于灵魂出窍，躯体还占有位置。
特定：相对于自己原来位置进行定位。
（3）定位经验：用relative来当参照物，absolute来定位
原因：relative相对于自己原来位置进行定位，只要不动对其他元素没有丝毫影响。
（4）广告定位（固定定位）：position:fixed;
和absolute一样脱离了原来位置进行定位。
（5）广告固定居中定位
.demo{
position:fixed;
left:50%;
top:50%;
width:200px;
height:100px;
background-color:red;
opacity:0.5;
margin-left:-100px;
margin-top:-50px;
}
（5）五环
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="" name="keywords">
<meta content="" name="description">
<title>习惯、盒子模型、层模型</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.demo{
position:fixed;
left:50%;
top:50%;
width:142px;
height:100px;
background-color:red;
opacity:0.5;
margin-left:-71px;
margin-top:-50px;
}
.demo1{
position: relative;
left:50px;
border:1px solid black;
}
.wu1,
.wu2,
.wu3,
.wu4,
.wu5{
position:absolute;
width:50px;
height:50px;
border:6px solid black;
border-radius:50%;
}
.wu1{
left:40px;
}
.wu2{
left:80px;
}
.wu3{
top:30px;
left:20px;
}
.wu4{
top:30px;
left:60px;
}
</style>
</head>
<body>
<div class="demo">
<div class="demo1">
<div class="wu1"></div>
<div class="wu2"></div>
<div class="wu3"></div>
<div class="wu4"></div>
<div class="wu5"></div>
</div>
</div>
</body>
</html>
- 两个经典bug
-
margin塌陷是指：父子/爷孙关系的标签，垂直方向的margin是结合到一起的，谁的margin值大就按照谁的来
-
不合理的解决办法：（糊弄的解决办法） （1）在直接父级元素加个padding，别让父子内容区块的上边别合并到一起就可以。 （2）给父级加一个上边线就可以了，border-top:1px solid black;
-
专业的解决办法：通过某些手段，尽量弥补margin塌陷，但尽量不能影响其他元素。 BFC（block format context块级格式化上下文）：每个盒子都有一套特定渲染规则，bfc就是让盒子的渲染规则发生一丁点变化。
（1）如何触发盒子bfc： position:absolute; display:inline-block; float:left/right; overflow:hidden;溢出隐藏（display不变）
（2）凡是设置了position:abcolute;和float:left/right;系统会自动将display变为inline-block
- margin合并：兄弟之间的垂直margin合并了一个
- 解决办法：不用解决，因为不影响，如果你想两个兄弟元素的margin距离，你可以调大一点。
- float:left/right;浮动元素
（1）浮动元素产生浮动流，块级元素看不到他们（即浮动元素会覆盖块级元素），只有产生了bfc的元素/文本属性的元素/文本才能看到浮动元素。 display:inline-block; position:absolute; float:left/right; overflow:hidden;
（2）解决办法：通过伪元素来清除浮动流 clear:both;只有在块级元素才能生效
.wrapper::after{
content:"";
clear:both;
display:block;
}
（3）报纸布局：文字环绕图片就是用float来写的。图片标签设置浮动就可以了
-
伪元素 （1）伪元素天生存在于任意一个元素里面before/after （2）伪元素天生是行级元素inline
海贼王div.abc::before{ content:"路飞"; } .abc::after{ content:"索隆"; }
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="" name="keywords">
<meta content="" name="description">
<title>两栏布局、两个经典bug</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.demo1{
overflow: hidden;
width:300px;
height:300px;
background-color:red;
}
.demo2{
/*margin-left:50px;
margin-top:50px;*/
margin-top:200px;
width:50px;
height:50px;
background-color:green;
}
.box1{
float:left;
width:200px;
height:200px;
background-color:red;
border:10px solid black;
}
.box2{
float:left;
width:100px;
height:100px;
background-color:yellow;
}
.box3{
width:300px;
height:300px;
background-color:green;
}
.content{
float:left;
width:100px;
height:100px;
background-color:#f40;
}
.wrapper{
overflow:hidden;
border:1px solid black;
}
.right{
position: absolute;
width:200px;
height:300px;
background-color: red;
opacity: 0.5;
}
.left{
height:300px;
margin-left:200px;
background-color: green;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
<div class="wrapper">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
<div class="right"></div>
<div class="left"></div>
<div class="">
<div></div>
</div>
</body>
</html>
- 文字溢出处理 （1）单行文本：打点（设置单行文本宽高）
white-space:nowrap;//文本超出容器不换行
overflow:hidden;//超出部分隐藏
text-overflow:ellipsis;//打点
（2）多行文本：做截断（设置好容器高和单行文本高，快超出时，将文字替换成点）
- 背景图片处理
backgroun-image:url();
background-size:100px 100px;
background-repeat:no-repeat;
(1)图片代替文字
text-indent:200px;
white-space:nowrap;//不换行
overflow:hidden;
width:100px;
height:0px;
padding-top:60px;
background-image:url();
background-size:100px 60px;
overflow:hidden;
35. 注意点 （1）行级元素只能嵌套行级元素，不能嵌套块级元素 a标签不能套a标签 （2）块级元素可以嵌套任意元素 只有一个特殊：就是p标签不能包裹块级元素，不然会被块级元素砍成两个
- 容器居中 （1）定位元素来实现
（2）margin:0 auto;
37.对齐方式 （1）文本和文本是底对齐，字体不一样大的时候 （2）img（也是文本类元素）和文本也是底对齐 （3）一但，行级块元素里面有文字，外面的文字就会和里面的文字底对齐。
<span>123</span>文字
span{
display:inline-block;
width:100px;
hieght:100px;
border:1px solid black;
}
（4）vertical-align:;调节文本对齐。
<html lang="en">
<head>
<meta charset="utf-8">
<title>文字溢出处理</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.demo1{
width:200px;
height:20px;
line-height:20px;
border:1px solid black;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
</style>
</head>
<body>
<div class="demo1">
美国南部亚拉巴马州和佐治亚州3日遭遇数个龙卷风袭击，造成人员伤亡。其中仅在亚拉巴马州，龙卷风已导致包括数名儿童在内的14人死亡，另有多人受伤。
</div>
</body>
</html>
