A今天学了什么

1.margin的一点小问题:

给子元素margin-top：父元素移动，子元素不移动

解决方案：

a.给父元素加:overflow:hidden;

b.给子元素设置伪元素
：before{
content:""
display:table}

2.绝对路径和相对路径

绝对路径：从盘符开始的路径

比如：![](D/images/down.jpg)

相对路径：相对当前文件所在的路径

同级目录：src="down.jpg"
下一级目录：src="images/down.jpg"
上一级目录：src="../down.jpg"

3.HTML表单相关元素

a.一个登陆页面：

<form>
<p><label for="text">账号</lable><input id="text " type="text"/></p>
<p><label for="password">密码</lable><input id="password " type="password"/></p>
<p><input type="submit" value="登录"/></p>
</form>

定义和用法
<label>标签为Input元素定义的标记

label元素不会向用户呈现 任何特殊效果。不过，它为鼠标用户改进了可用性。如果在label元素内点击文本，就会触发此控件。

<label>标签的for属性应当与相关元素的id属性相同。

b.单选框

<p>
<label for="male">男</label>
<inputid="male" type="radio" name="sex" value="男">
<label for="famale">女</label>
<inputid="famale" type="radio" name="sex" value="女">
</p>

c.复合选框

<p>
<label>兴趣</label>
<input type="checkbox" name="爱好" value"游泳">游泳
<input type="checkbox" name="爱好" value"跑步">跑步
</p>

d.下拉选框

<select>
<option>青山区</option>
<option>江夏区</option>
<option>武昌区</option>
</select>

e.预选的下拉选框

<select>
<option>青山区</option>
<option selected>江夏区</option>  //在想要的option上加selected这个属性
<option>武昌区</option>
</select>

f.文本域

<textarea placeholder="输入内容">
</textarea >

g.input：
当输入框<input type="text">和提交按钮<input type="submit">有同样的宽高时，但看到的时候不一样时，可以给input加上box-sizing:border-box

h.display和visibility的区别：
display:none 显示为没有
visibility:hidden 可见度为隐藏（但还在）

i.转义字符
 空格
>大于号
<小于号

4.css样式的几种方式

a.外部样式表（外联）
<link rel="stylesheet" type="text/css" href="c5.css">

b.内部样式表（内联）
<style>
p{
color:red;
font-sizi:14px
}
</style>

c.内联样式，在HTML元素内部（内嵌）
<p style="color:red;font-sizi:14px">hello world
<p>

B我掌握好的地方

1.margin的一点小问题:

给子元素margin-top：父元素移动，子元素不移动

解决方案：

a.给父元素加:overflow:hidden;

b.给你元素设置伪元素
：before{
content:""
display:table}

2.绝对路径和相对路径

绝对路径：从盘符开始的路径

比如：![](D/images/down.jpg)

相对路径：相对当前文件所在的路径

同级目录：src="down.jpg"
下一级目录：src="images/down.jpg"
上一级目录：src="../down.jpg"

3.HTML表单相关元素

a.一个登陆页面：

<form>
<p><label for="text">账号</lable><input id="text " type="text"/></p>
<p><label for="password">密码</lable><input id="password " type="password"/></p>
<p><input type="submit" value="登录"/></p>
</form>

定义和用法
<label>标签为Input元素定义的标记

label元素不会向用户呈现 任何特殊效果。不过，它为鼠标用户改进了可用性。如果在label元素内点击文本，就会触发此控件。

<label>标签的for属性应当与相关元素的id属性相同。

b.单元框

<p>
<label for="male">男</label>
<inputid="male" type="radio" name="sex" value="男">
<label for="famale">女</label>
<inputid="famale" type="radio" name="sex" value="女">
</p>

c.复合选框

<p>
<label>兴趣</label>
<input type="checkbox" name="爱好" value"游泳">游泳
<input type="checkbox" name="爱好" value"跑步">跑步
</p>

d.下拉选框

<select>
<option>青山区</option>
<option>江夏区</option>
<option>武昌区</option>
</select>

e.预选的下拉选框

<select>
<option>青山区</option>
<option selected>江夏区</option>  //在想要的option上加selected这个属性
<option>武昌区</option>
</select>

f.文本哉

<textarea placeholder="输入内容">
</textarea >

g.input：
当输入框<input type="text">和提交按钮<input type="submit">有同样的宽高时，但看到的时候不一样时，可以给input加上box-sizing:border-box

h.display和visibility的区别：
display:none 显示为没有
visibility:hidden 可见度为隐藏（但还在）

i.转义字符
 空格
>大于号
<小于号

4.css样式的几种方式

a.外部样式表（外联）
<link rel="stylesheet" type="text/css" href="c5.css">

b.内部样式表（内联）
<style>
p{
color:red;
font-sizi:14px
}
</style>

c.内联样式，在HTML元素内部（内嵌）
<p style="color:red;font-sizi:14px">hello world
<p>

C我掌握不好的地方

都掌握了