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

第十五天学习笔记:

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

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

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

时间： 2024-10-12 12:52:14

第十五天和十六天学习笔记的相关文章

sql 入门经典（第五版） Ryan Stephens 学习笔记 　第四部分：建立复杂的数据库查询

第十四章: 使用子查询定义未确定的数据 1. 子查询与select 结合使用 select colum from table where column where  columnb=(select colum_name from ...); 2.   子查询与inset结合使用 insert table1 select column1 from table2 where cloumn2>(select ......); 将表二中满足条件的某几项 插入到表1 中,注: 插入的项数 = table1

第二十五、二十六天：基于UDP的网路聊天程序

连续四天学习套接字的编程,可见套接字的重要性了.基于TCP和UDP分别写了两个程序.一是利用TCP实现一个服务器对多个客户端,客户端你发送信息,服务器就从事先准备好的五个字符串中随机回复一条.另一个是利用UDP实现两个人的对话,对话时可以是多个信息同时输入. 先是第一个程序.要实现一对多,就要使用线程编程,服务器端在不断监听中,如果有连接请求的话,就用通过accept函数接受并创建一个线程来处理.线程的创建函数为int pthread_create(pthread_t * thread, pth

第二十四天到二十六天学习笔记

八号这天,主要先是学习了数组对象 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">

智能车学习（十五）&mdash;&mdash;K60单片机ADC学习

一.头文件: #ifndef __ADC_H__ #define __ADC_H__ 1 #include "adc_cfg.h" /* #define ATD_B11_Check() ad_once(ADC1,SE15,ADC_10bit) ///B11 #define ATD_B10_Check() ad_once(ADC1,SE14,ADC_10bit) ///B10分压 #define ATD_B3_Check() ad_once(ADC0,SE13,ADC_10bit) //

python学习第九十五天：linux基础学习

装系统 net.ifnames=0 biosdevname=0 修改系统网络配置 vi /etc/sysconfig/network-scripts/ifcfg-ens33 # 修改ip地址的文件 修改 BOOTPROTO=static ONBOOT=yes 添加 IPADDR=10.0.0.11 NETMASK=255.255.255.0 GATEWAY=10.0.0.2 DNS1=223.5.5.5 重启网络服务 systemctl start network # 重启网络服务 修改VMwa

sql 入门经典（第五版） Ryan Stephens 学习笔记 第五部分： 性能调整

第十六章: 利用索引改善性能 1. create index 单字段索引:  create index index_name on table_name (column_name);唯一索引:     create unique index index_name on table_name (column_name); 组合索引: 一个表中有两个或者多个字段的索引 create index index_name on table_name (column1,column2); 2.何时考虑设置索

sql 入门经典（第五版） Ryan Stephens 学习笔记 （第六，七，八，九，十章）

第六章: 管理数据库事务 事务 是 由第五章 数据操作语言完成的  DML ,是对数据库锁做的一个操作或者修改. 所有事务都有开始和结束 事务可以被保存和撤销 如果事务在中途失败,事务中的任何部分都不会被记录到数据库 控制事务: commit , rollback ,savepoint; 6.1 commit 在操作之前 需要 设置: set autocommit = 0 ;  // 否则所有的操作都是 自动提交的 commit: 用于把事务所做的修改保存到数据库,它把上一个commit 或 r

关于Redis五种类型对象的学习笔记

我们在使用Redis的时候,直接接触到的是字符串对象(String),列表对象(List),哈希对象(Hash),集合对象(Set),有序集合对象(SortedSet)这五种类型的对象,基本的命令如:String(get set) List(lpush rpush lpop rpop lrange) Hash(hget hset hlen hgetall) Set(sadd smembers smov) SortedSet(Zadd Zrange)等. 我们首先看一下redis对象的数据结构:

触发器五(建立INSTEAD OF触发器)(学习笔记)

INSTEAD OF触发器 对于简单视图,可以直接执行INSERT,UPDATE和DELETE操作但是对于复杂视图,不允许直接执行INSERT,UPDATE和DELETE操作.为了在具有以上情况的复杂视图上执行DML操作需要征用触发器来完成 --创建复杂视图 CREATE OR REPLACE VIEW v_emp20 AS SELECT e.empno,e.ename,e.job,e.sal,d.deptno,d.dname,d.loc FROM emp e,dept d WHERE e.de