第五章HTML
HTML介绍
标签：有一个头，一尾
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 文档的标题、编码方式及URL等信息,这些信息大部分是用于提供索引,辩认或其他方面的应用（移动端） -->
<!-- 文档的标题 -->
<title>路飞学城</title>
<!-- 常用两个属性
http-equiv:它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
-->
<!--指定文档的内容类型和编码类型 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!-- 5秒之后 重定向 到路飞学城的网站 -->
<!-- <meta http-equiv="refresh" content="5;URL=https://www.luffycity.com"/> -->
<!--告诉IE浏览器以最高级模式渲染当前网页-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
<!-- 为了我们的SEO优化 工作的时候下面这两句 要写-->
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="路飞学城">
<!-- 定义我们的网站图标 -->
<link rel="icon" href="./fav.ico">
<!-- 引入外部样式表 -->
<link rel="stylesheet" type="text/css" href="./index.css">
<!-- 定义内部样式表 -->
<style type="text/css">
</style>
<!-- 定义内容脚本文件 -->
<script type="text/javascript">
</script>
<script src="./index.js"></script>
</head>
<body>
</body>
</html>
標題標籤h1~h6 沒有h7
<块级元素 1.独占一行 ， 2.可以设置宽高>
段落标签 <p></p>
也是独占一行
超链接标签<a></a>
代表一个超链接
<a href="www.baidu.com" target="_self" title="luffy">路飞学城</a> #默认target是_self,在本页面打开，_blank是在新的页面打开,title：鼠标放在上面显示的内容
href="./a.zip" 代表下载压缩包
href="494187987@qq.com" 代表发送邮件
返回页面顶部的空链接或具体id值的标签 例如：<a href="#">内容</a>或<a href="#id值">内容</a>
javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码。 例如：<a href="javascript:alert()">内容</a>
javascript:;表示什么都不执行，这样点击<a>时就没有任何反应 例如：<a href="javascrip:;">内容</a
段落标签也是块级元素
<!-- 无序列表 type可以定义无序列表的样式-->
<ul type="circle">
<li>我的账户</li>
<li>我的订单</li>
<li>我的优惠券</li>
<li>我的收藏</li>
<li>退出</li>
</ul>
<!-- 有序列表 type可以定义有序列表的样式 -->
<ol type="a">
<li>我的账户</li>
<li>我的订单</li>
<li>我的优惠券</li>
<li>我的收藏</li>
<li>退出</li>
</ol>
三种：
1.块级元素 独占一行，可设宽高 如果不设置宽度 浏览器的宽度
2.行内元素 在一行内展示 不能设置宽高 它的宽高根据内容去填充
3.行内块元素 在一行内展示 可设宽高
盒子标签div
image标签
《1.可以设置宽高，2.在一行内显示 它叫行内块标签》
table标签
表头thead 里面用tr th
表体tbody 里面用tr td
表脚tfoot 里面用tr td
合并
rowspan 合并行(竖着合并)
colspan 合并列(横着合并)
span标签：显示文本
表单标签 form 各种标签用法
<body>
<form action="http://www.baidu.com" method="get">
<p>
<!-- for 属性会关联name属性值-->
<label for="username">用户名：</label>
<input type="text" name="username" placeholder="请输入用户名">
</p>
<p>
<label for="password">密码：</label>
<input type="password" placeholder="密码">
</p>
<p>
<input type="submit" value="submit">
<input type="button" value="button">
<button>按钮</button>
</p>
<p>
<label>用户性别：</label>
<!-- name是显示在url上的，id是用于程序里面识别的 -->
<input type="radio" name="sex" value="男" checked="">男
<input type="radio" name="sex" value="女">女
</p>
<p>
<input type="file" name="file">
</p>
<!-- 重置按钮-->
重置按钮
<input type="reset">
<!-- 文本框，rows cols 设置长宽-->
<p>
自我介绍：
<textarea rows="20" cols="100" placeholder="请做自我介绍"></textarea>
</p>
<!-- 列表 multiple实现多选，size设置选择框显示个数 -->
<select name="place" size="2" multiple>
<option value="广东">广东</option>
<option value="西藏">西藏</option>
<option value="北京">北京</option>
<option value="广东">北京</option>
<option value="广东">北京</option>
</select>
</form>
</body>
标签属性的使用注意事项
1.HTML标签除一些特定属性外可以设置自定义属性，一个标签可以设置多个属性用空格分隔，多个属性不区分先后顺序。
2.属性值要用引号包裹起来，通常使用双引号也可以单引号。
3.属性和属性值不区分大小写，但是推荐使用小写。
嵌套规则
1.块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素
<div><div></div><h1></h1><p><p></div> ✔️
<a href=”#”><span></span></a> ✔️
<span><div></div></span> ❌
2.块级元素不能放在p标签里面
<p><ol><li></li></ol></p> ❌
<p><div></div></p> ❌
3.有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：h1~h6 p
4.li元素可以嵌入ul,ol,div等标签
<ul>
<li>
<ul>
<li>
<div>
</div>
</li>
<li>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</li>
</ul>
</li>
</ul>
CSS
1.引入方式
- 内联样式
在head标签里面添加<style> 直接会对以下所有标签做更改
- 行内样式表
在单一行做样式，如<p style="color:red">
- 外部样式表
- 链接式
<link rel="stylesheet" href="index.css">
-
- 导入式
@import url(other.css) 必须写在文件最开始的位置。
链接式与导入式的区别
1、<link/>标签属于XHTML,@import是属性css2.1
2、使用<link/>链接的css文件先加载到网页当中，再进行编译显示
3、使用@import导入的css文件，客户端显示HTML结构，再把CSS文件加载到网页当中
4、@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的
CSS选择器css的选择器：1.基本选择器 2.高级选择器
1.标签选择器
标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等
不管标签藏的多深，都能选中
选中的是所有的，而不是某一个，所以说 "共性" 而不是 ”特性“
2.id选择器
# 选中id
同一个页面中id不能重复。
任何的标签都可以设置id
id命名规范 要以字母 可以有数字 下划线 - 大小写严格区分 aa和AA
3.类选择器
1.所谓类 就是class . class与id非常相似 任何的标签都可以加类
但是类是可以重复 归类
2.同一个标签中可以携带多个类 用空格隔开
类的使用 能够决定前端工程师的css水平到底有多牛逼？
一定要有”公共类“的概念
总结：
1.不要去试图用一个类将我们的页面写完。这个标签要携带多个类，共同设置样式
2.每个类要尽可能的小，有公共的概念，能够让更多的标签使用
玩好了类 就等于玩好了css中的1/2
到底使用id还是用class？
答案：尽可能的用class。除非一些特殊情况可以用id
原因：id一般是用在js的。也就是说 js是通过id来获取到标签
伪类选择器
/*'爱恨原则' love hate*/
没有访问的超链接a标签样式：
a:link {
color: blue;
}访问过的超链接a标签样式：
a:visited {
color: gray;
}鼠标悬浮在元素上应用样式：
a:hover {
background-color: #eee;
}鼠标点击瞬间的样式：
a:active {
color: green;
}伪元素选择器
first-letter 指定第一个字母
div p:first-letter{
content:"你好";
color:red;
font-size: 40px;
}
after,before 在前面 / 后面 必须搭配content一齐使用
div p:after{
content:"你好";
color:red;
font-size: 40px;
}
CSS的继承规律：
<!-- 继承：给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承
有一些属性是可以继承下来 ： color 、 font-*、 text-*、line-* 文本元素
像一些盒子元素，定位的元素（浮动，绝对定位，固定定位）不能继承
-->
层叠性，选择的优先权，数数，谁的权重大就谁被选择
<!--
层叠性： 权重的标签覆盖掉了权重小的标签，说白了 ，就是被干掉了
权重： 谁的权重大，浏览器就会显示谁的属性
谁的权重大？ 非常简单 数数
id的数量 class的数量 标签的数量
-->
padding的使用：内填充
/*小属性设置*/
/*padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;*/
/*综合属性设置，用空格隔开*/
/*上 右 下 左*/
/*padding: 20px 30px 40px 50px ;*/
margin使用:
上，左右，下
如果是margin：0 auto 14px 表示上方是0，左右是auto，下方是14ox
<!--
比如说通常我们做站的时候，要清除默认的padding，margin
* 效率不高。所以我们要使用并集选择器来选中页面中应有的标签（不同背，因为有人已经给咱们写好了这些清除默认的样式表）
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
-->
利用border制作三角形
.box{
width:0;
height:0;
border-bottom: 20px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
标准文档流
<!-- 什么是标准文档流
宏观的将，我们的web页面和ps等设计软件有本质的区别
web 网页的制作 是个“流” 从上而下 ，像 “织毛衣”
而设计软件 ，想往哪里画东西 就去哪里画
标准文档流下 有哪些微观现象？
1.空白折叠现象
2.高矮不齐，底边对齐
3.自动换行，一行写不满，换行写
-->
行内块元素、行内元素之间的转换
使用display：inline(行内元素) inline-block(行内块元素) block(块级元素)
CSS的属性用的最多的浮动：
<!--
浮动是css里面布局最多的一个属性
效果： 两个元素并排了，并且两个元素都能够设置宽度和高度
浮动想学好：一定要知道它的四个特性：
1.浮动的元素脱标
2.浮动的元素互相贴靠
3.浮动的元素有“字围”效果
4.收缩的效果
-->
1.脱标
<!--
脱标： 脱离了标准文档流
小红盒子浮动了，脱离了标准流，此时小黄这个盒子就是标准文档流中的第一个盒子。所以就渲染到了左上方。 浮动元素 “飘起来了”
span标签不需要转成块级元素，也能够设置宽高。
所有的标签一旦设置浮动，能够并排，都不区分行内、块状元素，设置宽高
-->
2.元素的互相贴靠
<!--
如果父元素有足够的空间，那么3哥紧靠着2哥，2哥紧靠着1哥，1哥靠着边。
如果没有足够的空格，那么就会靠着1哥，如果没有足够的空间靠着1哥，自己往边靠
-->
3.字围效果
<!-- 所谓字围效果：
当div浮动，p不浮动
div挡住了p，div的层级提高，但是p中的文字不会被遮盖，此时就形成了字围效果
关于浮动我们强调一点，浮动这个元素，我们初期一定要遵循一个原则
永远不是一个盒子单独浮动，要浮动就要一起浮动。
-->
浮动带来的负面影响：
里面的子元素会脱标，这样，如果父元素没有设置宽高，下面的div会自动往上面顶，使得子元素覆盖在div上面
解决浮动的效果：
①给父元素设置高度，只要是该元素的父元素就行，不一定是该div。
/*给父盒子设置高度，这种方式不灵活。如果哪天公司产品突然要改，要求父盒子高度变大，而且不仅一个地方哦，那么我们不可能去找源码去手动修改*/
②给浮动元素最后加一个空div，并设置clear：both（清除别人对我的影响） （常用）
<!-- 给浮动元素最后面加一个空的div 并且该元素不浮动 ，然后设置clear:both 清除别人对我的浮动影响-->
<!-- 内墙法 -->
<!-- 无缘无故加了div元素 结构冗余 -->
③伪元素选择器（常用）
.clearfix:after{
/*必须要写这三句话*/
content: '.';
clear: both;
display: block;
height: 0;
visibility: hidden;
加滚动条
overflow: scroll;
<!-- 当给两个兄弟盒子 设置垂直方向上的margin 那么以较大的为准，那么我们称这种现象叫塌陷
浮动的盒子垂直方向 不塌陷
margin：
<!--
1.使用margin: 0 auto;水平居中盒子 必须有width，要有明确width，文字水平居中使用text-align: center;
2.只有标准流下的盒子 才能使用margin:0 auto;
当一个盒子浮动了，固定定位，绝对定位了，margin:0 auto; 不能用了
3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;
-->
background-color:背景颜色
三种方法：①英文字母 ②十六进制 ③rgb(255,255,255)
background-img:背景图片
/*平铺*/
/*background-repeat*/
/*不平铺*/
/*background-repeat: no-repeat;*/
background-position：100px 100px
正值 第一个值表示往右偏移 第二个值表示往下 负值则相反
雪碧图，切图
background 和 background-img
一个是综合属性，可以一行写多个属性，同时还包含background-repeat,background-position, background-color,background-attachment的属性
而background-img 只是其中一个属性
相对定位：relative 相对自身位置定位
/*如果对当前元素仅仅设置相对定位，那么与标准流下的盒子没有什么区别*/
position: relative;
/*设置相对定位 我们就可以使用四个方向的属性 top left right bottom
相对定位：相对于自己原来的本身定位 top:20px; 那么盒子相对于原来的位置向下移动。相对定位仅仅的微调我们元素的位置
*/
<!-- 相对定位三大特性： 1.不脱标 2.形影分离 3.老家留坑 :占着茅房不拉屎，恶心人 。 所以说 相对定位 在页面中没有什么太大的作用。影响我们页面的布局。但是我们不要使用相对定位来做压盖效果-->
<!-- 微调我们元素位置-->
绝对定位：
/*绝对的定位： 1.脱标 2.做遮盖效果，提升层级 3.设置绝对定位之后，不区分行内元素和块级元素，都能设置宽高。*/
position: absolute;
/*绝对定位参考点：
1.当我使用top属性描述的时候 是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置
2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。
*/
绝对定位的参考点
①爷爷设置了绝对定位，爸爸设置了绝对定位，儿子设置了绝对定位，将以爸爸为参考点
②爷爷设置了绝对定位，爸爸没有设置了绝对定位，儿子设置了绝对定位，将以爷爷为参考点
/*父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点
这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。 如果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点
*/
绝对定位的盒子无视父辈的padding
总结：
注意了：父绝子绝，没有实战意义，做站的时候不会出现父绝子绝。因为绝对定位脱离标准流，影响页面的布局。
相反‘父相子绝’在我们页面布局中，是常用的布局方案。
因为父亲设置相对定位，不脱离标准流，子元素设置绝对定位，仅仅的是在当前父辈元素内调整位置信息。
绝对定位：让盒子居中
/*设置绝对定位之后，margin:0 auto;不起任何作用，如果想让绝对定位的盒子居中。当做公式记下来 设置子元素绝对定位，然后left:50%; margin-left等于元素宽度的一半，实现绝对定位盒子居中*/
固定定位：
position: fixed;
/*固定定位：固定当前的元素不会随着页面滚动而滚动，
特性：1.脱标 2.提升层级 3.固定不变 不会随页面滚动而滚动
参考点：设置固定定位，用top描述。那么是以浏览器的左上角为参考点
如果用bottom描述，那么是以浏览器的左下角为参考点
作用： 1.返回顶部栏 2.固定导航栏 3.小广告
*/
/*设置固定定位之后，一定一定要加top属性和left属性*/
text-decoration：none
可以去除链接的基本样式，即去除了下划线
