一、表单标签
<!--
1，表单标签： <form action="" method="">
这个标签作为一个容器，来收集和提交这个标签和其他标签的数据，一般不会单独使用
action属性： 设置提交路径（接口）
method属性： 设置请求方式（post/get）
-->
<form action="" method="get">
</form>
<!--
2，input标签 ---- 单标签
可单独使用，也可以和form配合使用
type属性： 这个值不一样，input功能就不一样。text，
-->
<!--
a，文本输入框，text 或 密码输入框，password
type = text 或 password
name： 随便命名，用来对输入内容进行说明。
提交数据时以name：value形式，name作为发送请求的参数，value为值
value： 指向文本输入框中的内容
palceholder： 占位符（提示信息）
maxlength： 限制输入框的做大字符个数
-->
<input type="text" name="uername" id="" value="张三" placeholder="输入用户名" />
<p>
<input type="text" name="tel" id="" value="" placeholder="输入用户名电话" />
<p></p>
<input type="password" name="" />
<!--
b，单选按钮
type： radio
name： 同一类信息，name需要设置同一个值，单选
value： 需要设置值，提交时 提交选中按钮的值和意义，传参
checked： 设置 默认选中状态
-->
<p>性别</p>
<input type="radio" name="sex" id="" value="男" checked="checked"/>男
<input type="radio" name="sex" id="" value="女" />女
<input type="radio" name="sex" id="" value="人妖" />人妖
<!--
c，复选按钮
type： checkbox
name： 同一类信息，name需要设置同一个值，多选
value： 需要设置值，提交时 提交选中按钮的值和意义
checked： 设置 默认选中状态
-->
<p>爱好</p>
<input type="checkbox" name="hobby" id="" value="羽毛球" />羽毛球
<input type="checkbox" name="hobby" id="" value="跑步" />跑步
<input type="checkbox" name="hobby" id="" value="健身" />健身
<input type="checkbox" name="hobby" id="" value="游泳" />游泳
<input type="checkbox" name="hobby" id="" value="徒步" />徒步
<!--
d，普通按钮
value： 设置按钮上的文字
禁用属性： disabled = “disabled”
-->
<p>点我啊</p>
<input type="button" name="" id="" value="点我啊" disabled = “disabled”/>
<!--
e，提交按钮
type： submit
可以自动提交当前form中所有设置了name属性的标签的值
-->
<input type="submit" />
<!--
f，重置标签
type： reset
可以将当前form标签内 所有标签设置的初始值
-->
<input type="reset" / />
<!--
禁用属性： disabled = “disabled”
-->
二、下拉菜单
1，下拉菜单：select
name： 提交时来区分不同的数据
value： 提交时提交的具体数据
内容： 显示部分（只能是文字）
selected： 设置默认选中
-->
2，多行文本域 textarea
输入的内容 可以多显示
rows： 设置一屏能显示几行
cols： 设置显示的列数
内容： 相当于value
-->
3、
<!--
div和span标签都是无语义的标签。一般来对网页的标签进行分组和分块用
一个div占一行， 多个span可以占一行
-->
三、css基础
<!--
1，什么是css
css 标准，是web表现标准。专门用来对网页标签进行布局和设置样式的一门语言。
目前用css3，又叫样式表
常用css属性
color
颜色值：a,颜色英语单词，b,#颜色值对应的6位16进制值(#ff0000)，c,rgb(r，g，b);rgba(r，g，b,alpha),alpha透明度0-1，0代表透明
background-color
width
height
2，基本语法
选择器{属性： 属性值； 属性2： 属性值2； ...}
说明： 选择器： 用来选中/确定需要设置样式的标签
{}: 固定写法
属性： css支持/提供的属性，大约200多个
属性值： 根据属性赋值的不同，如属性的只是用来表示大小数字，后必须加单位，例，px（像素），em（空格）
属性和属性值之间用冒号隔开，多个属性用分号隔开，除特殊情况 属性间无序
3，在哪写css
内联样式： 将样式表写在标签的style内
内部样式： 将样式表写在head中的style标签
外部样式： 将样式表写在外部的css文件中，然后在head中通过link标签（导入外部文件的标签）导入
内联优先级最高，内部外部后写的 覆盖先写的
特点，用哪种：
内联--只对一个标签有效
内部--只作用当前 html 有效
外部--作用于所有导入的 html文件
<!-- link标签
link标签： 导入外部文件
rel属性： 说明导入文件的功能，stylesheet（添加样式表），icon（设置网页图标）
type属性： 对导入文件类型说明：文件后缀、类型
href属性： 导入文件地址
-->
四、选择器
<!--
常用选择器：
元素、id、class选择器、群组、父子选择器、通配符
1，元素选择器： 将标签名作为选择器，选中指定的标签
用法： 标签名{}
2,id选择器： 将标签id属性作为选择器，选中id值对应的标签
用法： #id值{}
3,class选择器： 将标签class属性作为选择器，选中class值对应的标签
用法： .class值{}
4，群组选择器： 多个选择器用逗号隔开作为一个选择器，同时选中所有选择器对应的标签
a,p{} --- 选中所有a标签，p标签
.p1,img,#p2 --- 选中所有class值是p1，img标签，id值是p2
5,父子选择器： 多个选择器用空格隔开作为一个选择器，按顺序依次往后找，找到最后一层选择器对应的标签
div div p{} --- 选中div里div中的p标签
#d1 a --- 选中id是d1中的a标签
6，通配符： 将*作为选择器，选中网页中所有的标签
五、伪类选择器
<!--
伪类选择器： 是选中某个标签的不同状态，可以给不同状态设置不同样式
1，link
标签：link -- 标签初始状态(a标签的初始状态指a对应的网址一次都没有访问成功的状态)
例： a：link{} ； p:link{} ； #a1：link{} ； .a2:link,#a1：link{}
2，visited -- 标签访问后的状态
3，hover -- 鼠标悬停在标签上对应的状态
4，active -- 标签激活（按住不放）时的状态
注意：使用时，要遵守 爱恨原则（LoVeHAte） 按顺序写，不按时可能有些样式不生效
选择器的优先级：权重值 越大，优先级 越大。 优先级一样，谁在后面 谁有效。 除内联，内联最高
元素选择器权重值 ： 0001 -- 1
class权重值： 0010 -- 2
id权重值: 0100 -- 4
伪类权重值 0001 -- 1
群组权重值： 单独看每个选择器的权重
父子权重值： 所有选择器权重之和
网友评论