zoukankan html css js c++ java

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

第十五天学习笔记:

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

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

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

查看全文

相关阅读:
在HTML5中，用getCurrentPosition()获取用户的当前位置
 邮件设置 ssl://smtp.exmail.qq.com:465 can not connect to the SMTP server
IIS绑定中文域名
 destoon 会员状态栏不显示
 汉诺塔的移动--python递归实现
 微星 msi B450迫击炮+2600X+RX588 3A平台装机
 正则表达式-1
接口--php对接农行网上支付平台-b2b
python----字符串操作函数
 php面试题--1

原文地址：https://www.cnblogs.com/YeYunRong/p/6120013.html