day05

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我掌握不好的地方

都掌握了
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,719评论 32 459
  • A.我今天学了什么 1.margin的一点小问题 2.绝对路径和相对路径 3.HTML表单相关元素 4.再说inp...
    Rosemarry丶阅读 1,702评论 0 0
  • A.我今天学到了什么 一.margin的一点小问题 1.给子元素margin-top:父元素移动,子元素不移动 解...
    孔子曰_f425阅读 1,342评论 0 0
  • 昨晚和儿子一起学习《两小儿辩日》遇到了难处!古文朗读起来拗口的很,读也读不顺,怎么办呢?怕打击他的积极性,...
    燕琼_06fb阅读 4,218评论 9 5

友情链接更多精彩内容