HTML day02
前端班day02课堂内容记录
主要内容：HTML a标签，表单及css基本内容
①关于a标签
<a href=" "> </a>
href：核心属性
href里面的内容（属性值）是可以跳转的地址（路径）。
②关于路径
绝对路径：从盘符开始，然后依次向下查找。
1>本地的 例：C:/Users/Administrator/...
2>服务器的 例：www...;127.0.0.1...;192.168...
相对路径：从当前文件开始，如果下一级目录就直接写文件夹，上一级用../表示
盘符根路径：直接可以跳转到当前文件所在的盘符根路径中。
1>服务器下 跳转到服务器所在根目录中
2>本地下 跳转到本地所在根目录中
③关于图像标签
<img src=" " alt=" "/>
img：行内快标签，只能靠左或靠右
src：里面内容是图片的路径
alt：当你的图片显示不出来时才会显示（1.图片正在加载中 2.图片路径错误）
属性：width，height,align(right,left)
④关于表单
前端和后端之间的通信
1.form提交方式
2.ajax提交方式
<form action=" "></form>
form：核心标签，只有提交的功能，没有任何样式。
属性：1.action：提交的地址。通常为服务端地址，如果不写，默认往本页提交
2.method：提交的方式。get/post...如果不写，为get提交
用户名 <input type="text" name="uersname"/>
密码 <input type="password" name="userpud"/>
input：表单的核心
type：通过修改type属性来改变展现的方式
提交方式：1.<button>提交</buttton>
2.<input type="submit"/>
在路径地址中，“？”后面的内容表示参数，最终目的是要把必须的参数发送到后端。想要发送参数，input中必须含有name属性。
性别单选框：
男<input type="radio" name="sex" value="1" checked/>
女<input type="radio" name="sex" value="0" />
爱好多选框：
<input type="checkbox" checked="checked" name="aihao" value="0"/>打酱油
<input type="checkbox" checked name="aihao" value="1"/>打架
<input type="checkbox" name="aihao" value="2"/>泡妞
<input type="checkbox" name="aihao" value="3"/>打游戏
家乡选框：
<select name="hefang" id=" ">
<option value="武汉">武汉</option>
<option value="荆州">荆州</option>
<option value="黄石">黄石</option>
<option value="襄阳">襄阳</option>
<option value="十堰">十堰</option>
</select>
一组必须含有相同的name属性值
checked：默认选中，当属性名等于属性值时，只需写属性名
value：可自己设置优化，用数字代表选项，目的是减小存储。
⑤关于css使用方式
1.行内样式（内联样式）
2.页面嵌入（内部样式表）
3.外部文件（外部样式表）
4.外部导入样式：样式初始化
⑥关于颜色表示方法
1.颜色色值的英文单词
2.16进制表示法
3.RGB表示法
⑦关于css选择器
1.ID选择器
使用id选择器：在元素上面增加一个id属性,id属性的属性值不要用数字开头
一个页面中只能有一个id属性值
css中id选择的表示方法用 # 表示
2.class选择器
使用class选择器：在元素上增加一个class属性，class属性的属性值不能用数字开头
一个页面中可以有多个class属性值
css中class选择器的表示方法用 . 表示
3.标签选择器
直接写标签名
4.组合选择器
选择器直接用,分隔开即可
5.子代选择器
> 只针对子代
6.后代选择器
用空格表示，包含着子代选择器
7.通用选择器
* 针对于所有的标签
⑧关于权重
选择器是有权重的
内联样式 1000
id 100
class 10
元素 1
通用 0
!important 只要出现，就以这个为主
权重越高，冲突部分的样式就以权重高的为主，但并不是说这个选择器没有用了
权重仅仅只能作为参考
权重的计算，不需要管子代和后代的
如果权重相同，就近原则。以后定义的为准
⑨关于文件夹样式
text-align: right; /*文本对其方式*/
text-decoration: underline; /*文本下划线*/
color: #f00; /*设置字体的颜色*/
line-height: 166.67px; /*文本的行高。一行文字所占的高度,让他上下居中*/
font-family: "宋体"; /*自己去百度找到宋体对应的英文，节约空间*/
font-style: italic; /*规定字体是否倾斜*/
font-weight: bold; 加粗
font-size: 16px ; /*设置字体的大小*/
注意：在浏览器中,默认的字体大小16px
谷歌浏览器中，字体大小最小可以为12px
火狐没有限制
⑩关于列表及样式
1.有序列表（实际开发中有序列表基本不用）
<ol type="1" start="3">
<li>英语</li>
<li>语文</li>
<li>数学</li>
<li>政治</li>
<li>地理</li>
</ol>
2.无序列表
<ul type="square">
<li>英语</li>
<li>语文</li>
<li>数学</li>
<li>政治</li>
<li>地理</li>
</ul>
.div01{
background-color: #f00;
opacity: 0.1; /*取值的范围是0-1之间，可以为0和1*/
/*表示整个元素*/
}
.div02{
background-color: rgba(255,0,0,0.1); /*最后一个参数a表示透明度，取值的范围是0-1之间，可以为0和1*/
/*只表示背景颜色*/
提问：outline:none;与display:none;区别？
