首页 > 代码库 > 第十五天和十六天学习笔记

第十五天和十六天学习笔记

2024-08-24 09:16:18   222人阅读

第十五天学习笔记:

主要学习了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>&nbsp;</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:外面-默认值

 

 

======================================================

以上就是我这两天的学习笔记

第十五天和十六天学习笔记


联系
我们