每日一记
复选框
<input type="radio" name="1" id="man">
<label for="man">男</label>
这里做一个补充:id是为了点击文字也可以选中，不然就只能点击那个圈来选了
回归正轨
1.
type="checkbox"可以多选
2.
type="checkbox" checked="checked"就能变成默认选中
3.
disabled="disabled"或者disabled可以禁用该模块
4.
readonly是只读不能改
下拉菜单
<body>
<select size="3" multiple> #size是一面可显示的选项 multiple是可多选
<option value="a"></option>
<option value="b"></option> #value是提供给后端使用的value值
<option value="c"></option>
<option value="d" selected></option> #selected默认选中
</select>
</body>
文本域(多行文本输入框)
<div>
<textarea name="" id="" cols="30" rows="10" placeholder="">内容</textarea>
</div>
cols是列
rows是行
placeholder是预置文本，输入就会消失
<style>
textarea{
width:100px;
height:100px;
resize:vertical;
}
</style>
horizontal水平可调节both都可以none不能更改
注意:placeholder的默认value是两个标识符之间的，换行也会跟着换行
字段集
<fieldset>
<legend>内容1</legend>
<input type="radio" name="aaa">选项1
<input type="radio" name="aaa">选项2
<legend>内容2</legend>
</fieldset>
HTML5
1.指定UTF-8
2.增加语义化标签(便于爬虫)
section,article,aside,header,footer,nav,figure,main
3.可以省略结束标签(最好不要)
4.在标签中可以使用单引号
5.音视频标签
<body>
<audio src="路径" cintrols></audio>
<video src="路径" poster="路径"></video>
</body>
controls 可控制
loop 循环
autoplay 自动播放
muted 静音播放
poster 海报
注意:设置宽高要适应视频画面大小
表单增强(以上传后端为例)
一，颜色选择
<form action="action">
<input type="color" name="aaa" autofocus> #选择颜色，autofocus光标默认在这里
<input type="email" name="mymail" required> #选择邮箱，required必填项
<input type="url" name="bbb" multiple> #选择地址，multiple可选择多个地址，用逗号隔开
<input type="tel" name="ccc"> #tel只在手机端有用，显示输入页面
<input type="range" name="ddd" min="100" max="1000" value="100" step="10"> #range滑块效果
<input type="number" name="eee" min="0" max="10" value="4" step="2"> #选择数字，value是初始数据
<input type="search" name="fff"> #搜索框
<input type="date" name="ggg"> #选择日期，type改成month是精确到月份
<input type="datetime-local" name="hhh"> #精确到秒
</form>
注意！！！
没有name就不能传到后端，提交了会在url上显示
二，数据列表
<body>
<input type="text" list="mylist"> 这里的list
<datalist id="mylist"> 和这里的id关联
<option value="111111"></option>
<option value="2433445"></option>
<option value="333436653"></option> 上面输入就可以在下面显示有关的内容
<option value="4、3、78"></option>
</datalist>
</body>
三，正则表达式
在input中加入 pattern="[0-9][A-Z]{3}"
代表第一个要是0-9的，后面接着三个要是A-Z的
CSS3
选择器回顾+更新
一，层级选择器+属性选择器
<style>
.child+li{ #这个child后面的第一个同级的li标签改变
background:red;
}
.child~li{ #这个后面所有同级的li标签都改变
background:red;
}
div[class]{ #所有div而且有class的都改变
background:red;
}
div [class]{ #加了空格，div后代有class的都改变
background:red;
}
div[class=box1]{ #是div而且属性是box1的才改变
background:red;
}
</style>
拓展————模糊匹配:
class^"b" 以b开头的
class$"b" 以b结尾的
class*"b" 包含b的
二，结构伪类选择器
<style>
ul li:first-child{ #选择第一个
color:red;
}
ul li:last-child{ #最后一个
color:red;
}
li:nth-child(odd){ #选定第几个，odd/2n+1/2n-1是奇数，2n/even是偶数
color:red;
}
li:nth-onlychild{ #匹配div下而且只有一个p的
color:red;
}
div:empty{ #匹配根元素(HTML)
color:red;
}
:root,body{ #匹配没有任何元素的，包括空格
color:red;
}
</style>
三，目标伪类选择器
div.{ #先让全部使用一个style
display:none;
}
div.:target{ #再让点到的目标换成指定的style
display:block;
}
四，UI状态伪类选择器
input:checked{ #匹配选择的
background:red;
}
input:focus{ #匹配手动focus的
background:red;
}
四，否定伪类选择器
li:not(:nth-child(2n+1)){ #匹配所有不匹配的
color:red;
}
其它:
X:link 链接伪类选择器，超链接未被访问过的
X:visited 链接伪类选择器，超链接被访问过的
X:active 用户行为选择器，被激活的(常用于链接)
X:hover 用户行为选择器，停留在上方的
阴影
文本阴影
div{
text-shadow:10px -10px 1px red; #水平方向，垂直方向，模糊程度，阴影颜色
}
如果要多个阴影，在颜色后面加逗号之后再加上另一个的参数，分号不要漏!!!
盒子阴影
div{
width:100px;
...
box-shadow: 10px(水平) 10px(垂直) 1px(模糊程度) 10px(阴影大小) red inside(内阴影);
}
圆角边框(放在style里)
同时设置四个角:
border-radius:10px;
1.从四个角往内截10px(可以使用百分比)
2.设置一个值，四个角一样
3.设置两个值，左上右下——>左下右上
4.设置三个值，左上——>左下右上——>右下
5.设置四个值，左上开始顺时针
设置单个角:
boder-top-left-radius:10px;
boder-top-right-radius:10px;
boder-bottom-left-radius:10px;
boder-bottom-right-radius:10px;
border-radius:10px/20px;
水平/垂直切割，只支持boder-radius
字体引入
<style>
@font-family:kerwin; #字体名字
src:url(font/STHUPO.TTF); #字体文件路径
div{
font-family:kerwin; #字体名字
font-size:50px;
color:red;
text-shadow:5px 0px 0px green;
}
</style>
盒模型
怪异盒模型
box-sizing: content-box; #普通盒模型，增加padding时会扩张box
box-sizing: border-box; #怪异盒模型，增加时不会撑大
弹性盒模型(能够适应页面)
display:flex;
1.默认横向排列，不是浮动。
2.行内元素变为块级元素。
3.margin:auto;自动居中
4.flex-direction: column;
5.column主轴列向排列，row纵向排列;column-reverse；纵向倒序排列，row-reverse横向倒序排列
6.justify-content:flex-end;主轴位置
align-items:center;侧轴位置
7.flex-start靠左对齐;flex-end靠右对齐;center靠中对齐;space-around环绕;space-between两端对齐
折行与行间距
flex-wrap:wrap; #打开折行
align-content:flex-start; #折行之后的行间距
flex-start,flex-end,center,space-around,space-between同上
至此，HTML与CSS结束！
每日一句:
每一个问题都想给出回答，也有一些想说的，想劝的，想帮的，但想到自己的生活也是一地鸡毛。
「我们每个人都把自己活得一团糟，却总以为可以指导别人过得更好。」
但说回来还是一句用烦了的话，提升自己是解决一切问题的方式，亲情爱情友情都是，在现在这个世界里，经济独立财富自由能解决百分之九十的烦恼，很现实也很真实，我文化不高总觉得词不达意，慢慢来捱过去总会越来越好的，到达谷底的人怎么走都是向上的
