HTML5&CSS3&JavaScript&PHP&MySQL学习笔记

1、在文字间添加一条水平线  使用<hr />  注意该符号不是成对出现的

2、<q> </q>用来标记于段落中的较短引用,浏览器会在它之间的语句两端加上双引号。

3、<address>  </address>可以包含设计者的联系方式或者电话等。  P44

4、链接是由<a href=”http://www.baidu.com”>百度一下</a>产生,其中href指定要链接到的地址。P66

5、如果希望链接网页在新网页中打开,那么需要在第4点中设置target=”_blank”   P75

6、当需要跳转到页面的某个位置时,可使用id属性。    P76

7、新建一个Email链接,mailto。      P74

8、表格的一些知识。   P120

9、在<th><td>中使用clospan特效可以使表格的多个单元格合并显示,即跨行。跨列使用rowspan。P122

10、长表格,即表格有很多行。<thead></thead>       <tbody></tbody>        <tfoot></tfoot>  P125

11、在代码中声明使用的HTML版本低HTML5,使用<!DOCTYPE html>

12、利用iframe可以在网页中内嵌显示一个网页,<iframe width="1280" height="500" src=http://map.baidu.com/></iframe>

13、使用外部CSS,<link href="css/example.css" type="text/css" rel="stylesheet" />   P224

14、在CSS中,可以在任意属性值的后面添加  !important来强调这条规则比应用于同一元素的其他规则更优先,更重要。    P228

15、CSS中,类选择器,<p class=”note”>  </p>,那么CSS文件中应该是    .note{   }    //note前的“.”不要忘了

如果是ID选择器,<p id=”top”>   </p>,那么CSS中应该是    #top{   }        P227

16、CSS中盒子(div)的定位问题

1>普通流:每个块级元素都换行显示,以至于页面中的每个项目都显示在前一个项目的下面,即使你指定了盒子的宽度,并且也有足够的空间让两个元素并排显示,他们也还是不会显示在一排,这是浏览器的默认行为,除非你规定浏览器按照其他方式显示。

2>相对定位:相对定位将一个元素在其普通流中的位置上向上下左右移动,这种移动不会使该元素脱离普通流。

3>绝对定位:绝对定位的元素的位置相对于它的包含元素。它完全脱离了普通流,也就是说不会影响到周围元素的位置(就像是直接忽略掉它所占据的空间),使用绝对定位的元素随着页面的滚动而移动。

4>固定定位:固定定位是绝对定位的一种形式,与绝对定位所不同的是,固定定位是以浏览窗口为基准进行定位。使用固定定位的元素不会随着页面的滚动而移动。

5>浮动元素:浮动一个元素可以让其脱离普通流,并定位到其包含盒子的最左边或者最右边的位置,这个浮动元素会成为一个周围可以浮动其他内容的块级元素。

6>任何元素脱离普通流时,盒子都会产生重叠,可以通过使用z-index属性设置将哪个盒子显示在上面。

17、margin属性用于依次控制对象的上、右、下、左4个方向的外边距,当margin使用两个参数时,第一个参数表示上下边距,第二个参数表示左右边距。所以:margin:0px auto;会让对象水平居中显示。

18、对于表格元素来说,要实现垂直居中秩序设置单元格的vertical-align:middle;但是这个属性在CSS中不起作用,那么要解决这一问题,只需要将盒子的行高设为与盒的高度一致即可。即,假如:盒高为height:50px;那么只需要在CSS中加入line-height:50px;即可实现垂直居中。

以上内容来自  HTML&CSS设计与构建网站   一书


1、可以在HTML5的video元素中添加字幕或者说明,格式如下

<video src=”xxx.ogv”>

      <track kind=”subtitles” src=”xxx.en.vtt” srclang=”en” label=”English” default>

      <track kind=”subtitles” src=”xxx.pt.vtt” srclang=”pt-br” label=”Brazilian Portuguese”>

</video>

其中,可以添加多个track,即可以有多个字幕等。kind指明添加的类型,它还可以是captions,descriptions。

label属性指明的作用是,比如有两个字幕文件,那么用户可以选择显示哪一个字幕文件(前提要浏览器支持多字幕显示)。   P152

2、播放视频中指定的一部分,可使用<video src=”xxx.oga#t=7.5,”></video>其中,#t是时间范围的一个快捷方式,7.5后面的逗号是必须的,表示从7.5秒开始一直播放到视频结束。    P154

以上内容来自      移动网页设计与开发HTML5+CSS3+JavaScript   一书

1、HTML与JavaScript交互可以通过使用文档对象模型(Document Object Model, MOD)实现。P54

2、浏览器加载页面是按照head-body的顺序执行,那么把JavaScript代码放在head中,可能会出现一些问题,这时我们可以指定在页面加载完成后再执行DOM代码,比如:

<script>

function init()

{  var plant=document.getElementById(“greenplant”);

   plant.innerHTML=”RED ALERT…”

}

window.onload=init;//这表示,页面完全加载后要执行init()函数中的代码

</script>           P64

3、在javascript中,我们只有一个全局作用域,也就是说,当你引入了多个.js文件时,如果他们有重名的全局变量,那么会产生意想不到的结果。    P127

4、利用javascript创建一个对象:(可以看到js对变量的定义比c++宽松多了)

var fido={

name:”wangcai”,

weight:40,

breed:”hashiqi”,

loved:[“walks”,”fetching balls”]

};      ///结束这里的分号不要忘记了,访问可以通过fido.weight方式访问对象元素

5、使用浏览器获得位置信息,navigator.geolocation.getCurrentPosition(…)         P172

6、 利用<video>元素实现视频播放列表,一般的做法是,新建一个数组,保存播放列表,然后使用video.addEventListener(“ended”,nextVideo,false),该方法会监听视频的ended事件,在视频结束的时候调用nextVideo处理函数,实现下一个视频的播放。          P367

7、对于一种类型的视频文件,可以使用<video>元素的canPlayType方法获取到,浏览器是否支持播放该文件,一般浏览器可能返回probably,maybe,或者“”,即是空。空表示没有任何把握能播放该视频文件。

使用video.canPlayType(“video/ogg”)会返回maybe或者空。

使用video.canPlayType(‘video/ogg;codecs=”theora,vorbis”’)会返回probably,maybe,或者是空,因为这里我们手动指定了codecs编码类型。             P369

以上内容来自Head First HTML5 Programming一书

1、php中所以的变量名都以一个美元符号$打头。                      P38

2、传递表单中的变量,我们一般有get和post两种方式可选,但是一般当我们需要在表单中提交较多的文字或者一些敏感信息(密码)时我们就需要使用post方法,因为get方法会把表单中提交的字符串写入URL中。这里需要说明的是,一般我们的搜索引擎会使用get方法提交表单而不是post方法,这是因为使用get方法后,当你将某一个搜索页面保存成书签时,下一次打开这个书签,还是你需要的那个搜索结果页面,这是因为书签URL中已经包含了搜素时的关键字。反之,post则不会。还有一种request方法。               P49

3、当我们在浏览器中输入服务器的一个URL目录时,它会查找该目录下的index.php文件,所以我们不一定非得要写全URL地址。但是记住,它只会去寻找index.php文件。不会去找其他的。        P58

4、我们可以使用include方法,使得在一个php文件中包含了一个php文件的代码,这样可以节省代码的编码量。除此之外还有require、include_once、require_once方法。         P110-116

5、PHP中变量作用域的问题,主脚本(如index.php)中存在的任何变量,在包含文件中也是可用和可修改的,但是在函数中就不一样了,函数中的变量只在函数内部有效,外部的变量在函数内部是不可访问的。如果你非要在函数内部访问外部变量,可以使用命令global或者$GLOBALS[‘   ’]将某个变量声明为超级全局变量。         P122

6、正则表达式使用模式修饰符使得匹配时不区分大小写的是i,即/PHP/i,它将可以和/PHP/、/php/、/PHp/等匹配。       P169

7、正则表达式,脱字^字符匹配字符串的开始。即/^PH/将匹配PH开头的字符串。

                      点号(.)表示任意单个字符除了换行符,

        星号(*)表示其前面的字符出现0次或多次。

例如/^PH.*/不仅匹配PH,还匹配PHP、PHX、PHP:CBWHBFEWYHBVCCcbeh i am super cool等。    P170

8、$美元符号匹配字符串的结尾。如:/^PHP$/只能匹配PHP        

+要求前面的字符出现一次或者多次,注意其与*的差别

?使得前面的字符成为可选的,如果放在一个加号或者一个星号后面,表示一次最小化匹配

|(管道符号)导致正则表达式匹配管道左边的模式或者匹配管道右边的模式

(…)圆括号定义了一组符号,他们必须一起出现或者是同时满足。

[…]方括号定义了一个字符类,字符类匹配方括号中的字符之一

注意:[^a]匹配字符串中除a之外的一个单个字符

如果想要使用这些特殊字符之一作为正则表达式模式将要匹配的一个字面字符,可以使用反斜杠实现,例如

/1+1=2/会匹配字符串1+1=2,这里其中的+好就只是一个纯加号了。                 P171

9、我们再数据库管理中,可以增加身份验证功能,这样可以使得数据库更安全。同时配合cookie以及回话可以实现在用户访问站点的过程中保持非首次登陆所需的身份信息。而不需要每当用户要浏览或者执行一项敏感操作的时候,都需要提示用户输入密码。这就是cookie存在的意义之一。              P198

以上内容来自《PHP和MySQL Web开发从新手到高手》  Kevin Yank

以下内容来自《DIV+CSS网页布局商业案例精粹》

1、我们在设置div为float时,需要分别设置浮动到一行的每一个div的属性float:left;,这样我们才会产生需要的效果,因为div默认情况下是会在前后都产生换行符的。

2、元素高度自适应:同样可以像设置宽度一样,利用百分比设置。所不同的是我们除了设置元素的高度百分比,我们还需要设置该元素的父级元素的高度百分比。假如父级元素为body,那么:

html,body{

height:100%;}

div #test{

height:50%;}

这个时候我们的div中的50%高度才会生效。

 

原文地址:https://www.cnblogs.com/audi-car/p/4749790.html