第十五天和十六天学习笔记
Posted 葉蕓榕
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第十五天和十六天学习笔记相关的知识，希望对你有一定的参考价值。
第十五天学习笔记:
主要学习了html5:
1 <!DOCTYPE html> <!--文档类型声明--> 2 <html> 3 <head> 4 <title>学习HTML5</title> 5 <meta charset = "UTF-8"> 6 </head> 7 <body> 8 <p>学习html5</p> 9 </body> 10 </html>
HTML5的特点:
更简单
标签语义化
语法更宽松
多设备跨平台
关于语义化:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>语义化</title> 5 <meta charset = "UTF-8"> 6 <style> 7 header{ 8 height:300px; 9 border:1px solid red; 10 } 11 nav{ 12 height:300px; 13 border:1px solid yellow; 14 } 15 footer{ 16 height:300px; 17 border:1px solid blue; 18 } 19 </style> 20 </head> 21 <body> 22 <div> </div> 23 <header>头部</header> 24 <nav>导航栏</nav> 25 <footer>页脚</footer> 26 </body> 27 </html>
以上效果显示html5 语义化的结果为块元素;
html5的表单三个新增的元素
1 html> 2 <head> 3 <title>html5新增的三个表单属性</title> 4 <meta charset = "UTF-8"> 5 </head> 6 <body> 7 用户名:<input type = "text" name = "user_name" required autofoscus> 8 <input type = "text" name = "dafault" placeholder = "手机/邮箱/等"> 9 </body> 10 </html>
1-required 必填属性
2-placeholder 默认显示内容
3-autofocus 自动获取焦点
======================================================================================
以下是第十六天的学习笔记:
CSS文本与字体样式属性:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 5 <title>文本与字体样式属性</title> 6 <meta name="keywords" content="关键字列表" /> 7 <meta name="description" content="网页描述" /> 8 <link rel="stylesheet" type="text/css" href="" /> 9 <style type="text/css"> 10 .p1{ 11 color:rgb(255,0,0); 12 font-size:24px; 13 font-weight:bold; 14 font-family:"楷体"; 15 font-style:italic; /*设置斜体*/ 16 text-decoration:none; /*无修改线*/ 17 text-transform:lowercase; /*转换为小写*/ 18 line-height:40px; /*设置行高*/ 19 text-align:left; /*设置文本水平居左*/ 20 } 21 /*rgba a值设置透明度 取值:0~1之间,0完全透明1表示不透明*/ 22 .p2{ 23 color:rgba(255,0,0,0.5); 24 font-size:2em; 25 font-weight:normal; 26 font-family:"宋体"; 27 text-decoration:underline; /*下划线*/ 28 text-transform:uppercase; /*转换为大写*/ 29 text-align:center; /*设置文本居中*/ 30 } 31 .p3{ 32 text-decoration:overline; /*上划线*/ 33 text-transform:capitalize; /*首字母大写*/ 34 text-align:right; /*设置文本居右*/ 35 36 } 37 .p4{ 38 text-decoration:line-through;/*删除线*/ 39 text-indent:2em; /*设置首行缩进*/ 40 } 41 </style> 42 <script type="text/javascript"></script> 43 </head> 44 <body> 45 <p class = "p1">Asd颜色1</p> 46 <p class = "p2">asd颜色2</p> 47 <p class = "p3">asd段落3</p> 48 <p class = "p4">asd段落4</p> 49 </body> 50 </html>
color 颜色 给文本设置颜色
可以使用十进制的表示方式：rgb(红,绿,蓝)
rgba(红,绿,蓝,透明度) 透明度取值：0-1之间 0表示完全透明、1表示不透明
font-size 给字体设置大小,单位px或者em
font-weight 给字体进行加粗 取值:bold 和 normal
font-family 给字体设置字体
font-style 给字体设置为斜体 取值:italic
text-decoration:
取值:
none 无
underline 下划线
overline 上划线
line-through删除线
text-transform:
改变文本的大小写及首字母大小写
取值:
lowercase(转为小写)
uppercase(全部转换为大写)
capitlize(首字母大写)
text-indent 设置首行缩进,一般用于p标签
line-height:行高
text-align:
设置文本的水平方向居中:
取值:
left 居左
center 居中
right 居右
================================================================
CSS复合选择器
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 5 <title>复合选择器</title> 6 <meta name="keywords" content="关键字列表" /> 7 <meta name="description" content="网页描述" /> 8 <link rel="stylesheet" type="text/css" href="" /> 9 <style type="text/css"> 10 /*组合选择器*/ 11 h3,.div_1,p{ 12 color:red; 13 text-decoration:underline; /*设置下划线*/ 14 } 15 /*子元素选择器*/ 16 ._box > h2 { 17 color: #666; 18 } 19 /*后代选择器*/ 20 ._box h2 21 { 22 text-decoration:underline; /*设置下划线*/ 23 } 24 /*相邻元素选择器*/ 25 ._box + h2{ 26 font-style:italic; /*设置斜体*/ 27 color: blue; 28 } 29 </style> 30 <script type="text/javascript"></script> 31 </head> 32 <body> 33 <h3>标题3级别</h3> 34 <div class = "div_1">DIV块元素</div> 35 <p>段落元素</p> 36 <h4>标题4级别</h4> 37 <br> 38 <div class = "_box"> 39 <h2>标题2一级别</h2> 40 <div class = "_box_2"> 41 <h2>标题2二级别</h2> 42 </div> 43 <h2>标题2一级别</h2> 44 </div> 45 <h2>相邻元素</h2> 46 <h2>不相邻元素</h2> 47 </body> 48 </html>
组合选择器
格式:选择器1,选择器2,选择器 n{属性:值;}
作用:给列表中的所有的选择器来设置样式;
子元素选择器
格式: E>F{属性:值;}
作用:匹配E元素下面的F子元素 谨记:只会匹配到子元素;
后代选择器
格式:E F{属性:值;}
作用:匹配E元素下面所有的F后代元素;
相邻元素选择器
格式:E+F{属性:值;}
作用: 匹配E元素下面的F兄弟元素 要求: E元素与F元素之间的关系一定是兄弟关系 要求这两个元素必须是相邻的 一定是紧挨的;
======================================================
CSS列表样式属性:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 5 <title>列表样式属性</title> 6 <meta name="keywords" content="关键字列表" /> 7 <meta name="description" content="网页描述" /> 8 <link rel="stylesheet" type="text/css" href="" /> 9 <style type="text/css"> 10 ._none{ 11 list-style-type:none; /*去掉列表前面的项目符号*/ 12 } 13 ._disc{ 14 list-style-type:disc; /*设置前面的项目符号为实心圆*/ 15 } 16 ._circle{ 17 list-style-type:circle; /*设置为空心圆*/ 18 } 19 ._square{ 20 list-style-type:square; /*设置为实心方块*/ 21 } 22 ._inside{ 23 list-style-position:inside; /*设置在里面*/ 24 border:1px solid red; 25 ] 26 ._outside{ 27 list-style-position:outside; /*设置在外面*/ 28 border:1px solid blue; 29 } 30 </style> 31 <script type="text/javascript"></script> 32 </head> 33 <body> 34 <!--去掉前面的项目符号--> 35 <ul class = "_none"> 36 <li>一列</li> 37 <li>二列</li> 38 <li>三列</li> 39 <li>四列</li> 40 </ul> 41 <!--设置项目符号为实心圆--> 42 <ul class = "_disc"> 43 <li>一列</li> 44 <li>二列</li> 45 <li>三列</li> 46 <li>四列</li> 47 </ul> 48 <!--设置为空心圆--> 49 <ul class = "_circle"> 50 <li>一列</li> 51 <li>二列</li> 52 <li>三列</li> 53 <li>四列</li> 54 </ul> 55 <!--设置为实心方块--> 56 <ul class = "_square"> 57 <li>一列</li> 58 <li>二列</li> 59 <li>三列</li> 60 <li>四列</li> 61 </ul> 62 <!--设置在里面--> 63 <ul class = "_inside"> 64 <li>一列</li> 65 <li>二列</li> 66 <li>三列</li> 67 <li>四列</li> 68 </ul> 69 <!--设置在外面--> 70 <ul class = "_outside"> 71 <li>一列</li> 72 <li>二列</li> 73 <li>三列</li> 74 <li>四列</li> 75 </ul> 76 </body> 77 </html>
list-style-type
设置列表前面的项目符号
取值:
none 去掉
disc 实心圆-默认值
circle 空心圆
square 实心方块
list-style-position
设置项目符号的位置
取值:
inside:里面
outside:外面-默认值
======================================================
以上就是我这两天的学习笔记
以上是关于第十五天和十六天学习笔记的主要内容，如果未能解决你的问题，请参考以下文章