2018-09-18day2-HTML和CSS

一、单表格标签

1.表单标签：form标签

2.input标签:单标签

type属性:决定input标签的样式
text(默认):文本输入框
password:密码输入框
radio:单选按钮
注意:input标签放在form外边同样可以使用，只是不能直接使用重置和提交功能

• a.文本输入框:
  1).name属性:区分不同的input对应值
  2).value属性:input标签中的值，相当于内容(文本输-入框中输入的内容就是value的值)
  提交input中的数据给服务器的时候，是以name值=value值来提交的
  3).placeholder属性:占位符(输入框的提示信息)
  4).maxlength属性:约束输入框能输入的字符最大个数
• b.密码输入框:(password)
• c.单选按钮:(radio)
  注意:
  1.value值:提交设置这个按钮选中后提交对应的值
  2.name值:如果多个按钮只能选中一个，那么这些按钮对应的name值必须一致
  3.一组(name值一样)单选按钮在提交的时候只提交被选中的按钮name和value值
• d.复选按钮:(checkbox)
• e.普通按钮:(button)
• f.提交按钮:(submit)
• g.重置按钮:(reset)
• h.文件域:(file)

二、下拉、多行文本、按钮

下拉和多行文本域可以放在form标签中用于收集信息

1.下拉菜单:select标签

一个select标签对应一个下拉菜单，菜单中的选项要通过option来列举
selected属性:设置默认被选中的选项(默认第一个被选中)

<select name="city">
        <option value="成都">成都</option>
        <option value="北京" selected="selected">北京</option>
        <option value="重庆">重庆</option>
        <option value="大连">大连</option>
</select>

2.对下拉菜单进行分组

可以通过optgroup标签对下拉菜单进行分组，通过label属性对分组进行命名

<select name="city">
        <optgroup label="四川省">
            <option value="成都">成都</option>
            <option value="绵阳">绵阳</option>
            <option value="乐山">乐山</option>
            <option value="自贡">自贡</option>
        </optgroup>
        <optgroup label="广东省">
            <option value="成都">广州</option>
            <option value="深圳">深圳</option>
            <option value="中山">中山</option>
            <option value="佛山">佛山</option>
        </optgroup>
</select>

三、div和span

1.div和span是空白标签，没有语义。

div:块级标签(一行只能放一个标签)
span:行内标签(一行可以放多个标签)

2.块级标签和行内标签

块级标签:一个标签占一行
h1-h6,p,列表标签(ul/ol/dl),table,hr
行内标签:一行可以放多个行内标签
img,a,input,select,textarea

四、CSS基础

1.怎么来写样式表(css),写在哪儿？

• a.内联样式表
  将样式写在标签的style属性中(每个可见标签都有style属性)
• b.内部样式表
  将样式表写在head标签中的style标签里面
• c.外部样式表
  将样式表写在一个css文件中，然后在head标签中通过link标签来导入
  注意:不管在什么情况下，内联样式表的优先级最高;内部和外部的优先级看谁后写，谁优先级高

2.固定语法

选择器{属性1:属性值1;属性2:属性值2...}

• a.选择器:选择器的作用是用来确定后面样式是给哪个/哪几个标签写的
• b.属性:属性是css中本来支持和拥有的属性，属性的顺序可以随意写。
  属性和属性值之间使用冒号连接
  属性后面必须写分号
• c.属性值:
  (1)数值:如果数值是用来表示大小，后面必须跟单位px或者%
  px -- 像素
  % -- 百分比(前提是父标签对应的宽度或者高度是确定的)
  (2)
  颜色:颜色对应的英语单词
  RGB对应的16进制值(一个颜色值对应2位16进制)
  直接使用RGB值:rgb(R,G,B),rgba(R,G,B,Alpha) R,G,B的取值范围是0-255,Alpha:0-1

五、选择器

1.标签/元素选择器

直接将标签名作为选择器，同时选中网页中所有同类型的标签
a{} -- 选中所有的a标签

2.id选择器

通过在id属性值前加#，就构成了id选择器，选中id等于对应的值的标签
id属性:所有的标签都有id属性，并且设置的值必须唯一
#p1{} -- 选中id值是p1的标签

3.class选择器

通过在class属性值前加.就构成了类选择器。选中class等于对应的值的标签
.c1{} -- 选中所有class值是c1的标签

4.群组选择器

多选择器中间使用逗号隔开。选中所有的单独的选择器
a,p,#p1,c1{} -- 选中所有的a标签，p标签和所有id值是p1以及所有class值是c1的标签

5.包含选择器

多个选择器之间使用空格隔开。从前往后找，找到最后一个选择器
div .c1 p{} -- 选中div中class是c1标签中的p标签

6.通配符*

直接将*作为选择器。选中当前页面中所有的标签

六、伪类选择器

伪类选择器:选中某个标签的不同状态(一般适用于超链接和按钮等)

1.语法:标签:状态

标签:状态{}
说明:
a.状态:
link:初始状态(a标签对应的初始标签没有访问成功过对应的状态)
visited:访问后的状态(适用a标签)
hover:鼠标悬停在标签上对应的状态
active:被激活对应的状态(一般用于超链接) -- 鼠标按下的时候对应的状态
focus:成为焦点
b.标签:可以通过不同的选择器去选中

2.爱恨原则:LoVeHAte

如果想要给一个标签同时给link\visited\hover\active中的两个或者两个以上的状态设置样式，必须遵守爱恨原则(如果不按爱恨原则可能会出问题，如果按照爱恨原则肯定不会出问题)