day10-1 前端基础 html css
前端语言：html :将页面展示出来 css ：修饰html标签 js：能够让页面动起来
html 跟后台交互有两种方式1.form表单的方式,基本被摒弃了（form表单在提交后会强制进行刷新清空数据） 2.异步提交 ，在作出动作后，页面没动作，只是后台进行了提交验证成功或失败都会以数据流的范式返回给前端，页面的跳转或刷新或不变由前端去控制。ajax
html代码实际上就是一套能够被浏览器所识别的规则代码，由一个个标签组成，html代码就是一大长串字符串，而这种字符串的格式正好能被浏览器所识别的时候也就有了我们的web页面。
html 主要学习能够被浏览器所识别的标签规则
html 的head
--------------------------------------------------------------
html body中 属性写在标签内部的 <>之间的 标签名之后。属性和标签名用空格分隔
属性与属性之间用空格分隔。 name属性就是和后台进行交互的key。
1. h标签，也叫标题标签h1---h6由大到小。
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
2. div标签和 3.span标签，这两个也叫白板标签，没有任何的修饰。div也叫伪白版标签，把行内标签修饰为块级标签
div是块级标签，无论自己有多大，都占满屏幕 span是行内标签又叫内联标签，自己有多大就占多大
4.input标签 输入框。 所有的输入框都可以增加name属性。每个都有name属性。
type就是怎么去对输入框进行解析。name就是key的值。和后端进行交互，根据接口文档设计key的值。
value就是输入的是什么，默认值，不想默认就重新输入
placeholder：提示语
value属性：是input的默认值
<input type="text" placeholder="请输入用户名">
<input type="text" value="请输入用户名">
input标签 如果type 为password .则输入到输入框的内容为密文。type为text输入到输入框内容是明文
type为button ，是一个按钮
type为submit,也是一个按钮，如果两个单独用没有区别，但是 和其它标签连用就有区别
submit如果和form表单连用的话，会触发一个事件，会去提交数据，而button则点击是没有效果的
<input type="button" value="登录">登录按钮
<input type="password">
button什么时候来用，需要去主动绑定事件。就是点了button去做那些操作。通过onclick事件去绑定方法。 <input type="button" value="登录" onclick="alert(111)">
input。radio实现单选，type用radio 和name一起用，浏览器会识别name值一样，就会只选择一个。
checked="checked".加这个参数，则表示默认选择
<span>男</span><input type="radio" name="sex" checked="checked">
<span>女</span><input type="radio" name="sex">
-----------------------
input。checkbox实现多选，type用checkbox，和name连用没用
-----------------------------------
input。file实现上传文件 type为file
<input type="file">
-----------------------
input type为reset.重置内容。必须和form表单连用，否则没有任何意义。
----------------------------------------------------------------------------------------
label标签 可以用for和input的输入框进行关联
-----------------------------------------------
select标签 下拉框标签，里面的选项用到option标签，selected默认值，value枚举值
------------------------------------------
a标签 超文本链接，href后跟跳转的地方。target=“_blank”这个属性就是新打开一界面
<!--超文本链接-->
<a href="http://www.baidu.com">跳转到百度</a>
<a href="http://www.baidu.com" target="_blank">跳转到百度</a> 新打开一个页面进行跳转
-----------------------------------------------------------
textarea 多行文本标签。input 的是单行。能和后台进行交互的都是接口里的key，name属性
<textarea name="kkk">多行文本</textarea>
-----------------------------------------------------------------------------------------------------------------
css css的样式应用有3出 <div></div>这样写在页面只是一个点，看不出来，需要 有内容支撑
第一处：标签内部通过style属性，给标签设置css样式
第二处：head中增加style，在标签内部，通过选择器为目标html配置css样式
第三处：通过编写样式表 xxx.css 用link引入到当前html中。
这三种写法的优先级，以标签为基础，由内到外，由进到远。
link标签在head中写着<link rel="stylesheet" href="demo.css">
id为选择器，id的属性在写css样式的时候有特殊的符号#。把样式写在head中.id在html中是唯一的，不重复
div块级标签。 style 添加颜色、长、宽
<div style="background-color: red;width: 100px;height: 100px">背景色</div>
是backgrond-color
----------------------------------------------------------------------------------------
选择器：id选择器，id有个弊端，如果想两个div应用同一个css文件，就会报错
<div id="i1">11</div>
<div id="i1">11</div>
这样是不行的，id是唯一的。
class属性可以共用。.是写css样式的符号。 在head中 <style>.c1{} .c2{}</style> 通过class定位到div标签
只有 class属性可以引用多个css的样式表
得到不同颜色，相同宽高的的正方形
---------------------------------------------------------
如果想把页面所有的div都变成一个颜色，这时就用标签选择器。在head中style写div{}
-----------------------------------------
层级选择器。div包裹的span标签都是红色。同样也有id的层级。#i1 span{} i1下面的span进行定义 .c1 span{} .很少用
-------------------------------
每个标签都有属性，除了浏览器默认能识别的属性，还可以自定义属性。属性选择器。在div下去找，也可以span[]{}
------------------------------------------------
css的样式
写宽度的时候可以用百分比，高度不行的，高度是个滚动条。
<style>
#i1{
background-color: red;
height: 100px;
width: 100%;
}
</style>
-------------------
行内标签不能有宽、高、外边距、内边距这些属性，它必须自己有内容才能被展示
display 属性，可以把块级标签变为行内标签，也可以把行内标签变为块级标签；同时也可以即使块也是行内
inline block inline-block
<style>
.i1 { background-color: red; }
.wh { height: 100px; width: 100px; }
/*由块级标签变行内标签*/
.div { display: inline; }
</style>
<style>
.i1 { background-color: red; }
.wh { height: 100px; width: 100px; }
/*由行内标签变行块级标签*/
.dis-block { display: block; }
</style>
----------------
自己有多大占多大，可以写宽和高。display=“inline-block”
<style>
.i1 { background-color: red; }
.wh { height: 100px; width: 100px; }
/*有多大占多大，同时又能写宽、高*/
.dis { display: inline-block; }
</style>
--------------------
border 边框 1px solid red 多少像素什么颜色的边框
<style>
.i1 { background-color: red; }
.wh { height: 100px; width: 100px; }
/*一个1像素，红色的边框*/
.i2{ border:1px solid red; }
</style>
-------------------
外边距：margin-top：0 由顶部往下移动，自身大小不变
内边距：padding-top：0 自身变大，原来的部分下移
------------------
