首页 > 代码库 > HTML第五天学习笔记
HTML第五天学习笔记
今天先是学习了基础的css样式
1 <html> 2 <head> 3 <title>02</title> 4 <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> 5 <style type = "text/css"> 6 *{ 7 padding:0; /*内填充边距为0；*/ 8 margin:0; /*外边框边距为0；*/ 9 } 10 div.big{ 11 margin : 0px auto; /*设外边框的大小，auto属于填充；*/ 12 border:1px solid red; /*设置红色的实线边框；*/ 13 width:800px; 14 } 15 h1{ 16 color:red; /*文本颜色；*/ 17 text-decoration: underline; /*下划线；*/ 18 text-align : center; /*文本居中；*/ 19 background-color:#33ffcc; /*文本背景颜色；*/ 20 } 21 p{ 22 color:#660066; /*设置文本颜色为紫色；*/ 23 text-indent: 1cm; /*缩进元素中文本的首行；*/ 24 word-spacing: 10px; /*设置文本行间空格的距离；*/ 25 } 26 .p1{ 27 text-indent: 1cm; /*缩进元素中文本的首行*/ 28 text-align : left; /*文本水平居左*/ 29 } 30 p.p2{ 31 color:#000000; /*设置文本颜色；*/ 32 text-indent: 1cm; /*缩进元素中文本的首行；*/ 33 word-spacing: 10px; /*设置文本行间空格的距离；*/ 34 } 35 p.p3{ 36 letter-spacing: 1em; /*规定字符间距；*/ 37 } 38 p.p5{ 39 text-align : right; /*文本居右对齐；*/ 40 } 41 </style> 42 </head> 43 <body> 44 <h1>原标题：在厄瓜多尔媒体发表署名文章</h1> 45 46 <div class = "big"> 47 48 <div class = "p1">央视网消息（新闻联播）：11月16日，在对厄瓜多尔共和国进行国事访问前夕，国家主席在厄瓜多尔《电讯报 》发表题为《搭建中厄友好合作的新桥》的署名文章。</div> 49 50 <p class = "p2">指出，厄瓜多尔是我这次拉美之行的首站。这是中厄建交以来中国国家主席首次访问厄瓜多尔。我带着中国人民的友好情谊和发展两国关系的良好愿望而来，期待搭建起连接中厄两国新的友好合作之桥。</p> 51 52 <p class = "p3">指出，中国和厄瓜多尔虽然远隔重洋，但友谊的纽带将我们紧紧相连。今年4月，厄瓜多尔遭受强烈地震灾害。中国政府和人民第一时间向厄瓜多尔政府和人民提供了力所能及的援助。作为厄瓜多尔的真诚朋友，我们将积极参与灾后重建，帮助灾区人民早日重建家园，早日恢复宁静美好的生活。</p> 53 54 <p>习强调，中国和厄瓜多尔都是发展中国家，有着相似的历史遭遇和共同的奋斗目标。建交36年来，我们相互理解、相互支持、相 互帮助，积累了深厚的政治互信和友好情谊。中方坚定支持厄瓜多尔人民探索符合本国国情的发展道路，支持厄方为实现经济多元化发展 所作的努力，支持厄方在国际和地区事务中发挥积极作用。2015年1月，我同科雷亚总统一道宣布两国建立战略伙伴关系，两国政治互信 和战略合作由此获得了新的强劲动力。我们要做真诚互信的好伙伴，共同发展的好伙伴，世代友好的好伙伴，南南合作的好伙伴，搭建起 便于双方人民扩大友好交往的坚实桥梁，推动中厄关系向更高水平迈进。</p><br> 55 56 <p class = "p5" >责任编辑：隗俊 </p> 57 58 </div> 59 60 </body> 61 </html>
效果如图：
关于CSS层叠样式，由于并没有过多的预习，所以只能参照API手册做相应的样式，参考了手册做的样式。感想就是觉得，css样式确实能更合理的，美观的进行排版。在div与span模块的安排时，遇到了些问题，不过都和同学进行了讨论与学习，更深刻的认识了下两者的差别。
关于两者的差别
DIV 和 SPAN 元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染。主要用于应用样式表（共同点）。
两者最明显的区别在于DIV是块元素，而SPAN是行内元素(也译作内嵌元素)。
详解：1.所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行，测试一下下面的代码你会有更形象的理解：
测试<span>紧跟前面的"测试"显示</span><div>这里会另起一行显示</div>
2.块元素和行内元素也不是一成不变的，通过定义CSS的display属性值可以互相转化，如：
测试<div style="display:inline">紧跟前面的"测试"显示</div><span style="display:block">这里会另起一行显示</span>
========================================================================================================
下午就继续学习了下昨天的知识点：表单
1 <html> 2 <head> 3 <title>视频同步：表单</title> 4 <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> 5 </head> 6 <body> 7 <caption><h1 align = "center">注册界面</h1></caption> 8 <table border = "1" width = "215" align = "center" bordercolor = "#ffffff"> 9 <form name = "form" method = "post" action = "login.php"> 10 <tr> 11 <th align = "center">用户名</th> 12 <td><input type = "text" name = "username"></td> 13 </tr> 14 <tr> 15 <th align = "center">密码</th> 16 <td><input type = "password" name = "userpwd"></td> 17 </tr> 18 <tr align = "center"> 19 <th>性别</th> 20 <td> 21 <input type = "radio" name = "sex" value = http://www.mamicode.com/"男" checked = "checked"/>男 <!--默认选择--> 22 <input type = "radio" name = "sex" value = http://www.mamicode.com/"女"/>女 23 </td> 24 </tr> 25 <tr align = "center"> 26 <th>兴趣爱好</th> 27 <td> 28 <input type = "checkbox" name = "like" value = http://www.mamicode.com/"游戏" checked = "checked" />游戏 <!--默认选择--> 29 <input type = "checkbox" name = "like" value = http://www.mamicode.com/"射箭"/>射箭<br/> 30 <input type = "checkbox" name = "like" value = http://www.mamicode.com/"滑冰"/>滑冰 31 <input type = "checkbox" name = "like" value = http://www.mamicode.com/"旅行"/>旅行 32 </td> 33 </tr> 34 <tr align = "center"> 35 <th>位置</th> 36 <td> 37 <select name = "city"> 38 <option value = http://www.mamicode.com/"北京市" selected = "selected">北京市<option><!--默认选择--> 39 <option value = http://www.mamicode.com/"南京市">南京市<option> 40 <option value = http://www.mamicode.com/"东京市">东京市<option> 41 </select> 42 </td> 43 </tr> 44 <tr> 45 <td colspan = "2"> 46 <textarea name = "intro" cols = "30" height = "5">自我介绍</textarea> 47 </td> 48 </tr> 49 <tr> 50 <td align = "center" colspan = "2"> 51 <input type = "file" name = "file"> 52 </td> 53 </tr> 54 <tr> 55 <td align = "center" colspan = "2"> 56 <input type = "button" value = http://www.mamicode.com/"注册"> 57 </td> 58 </tr> 59 </form> 60 </table> 61 </body> 62 </html>
效果如图：
以下是我部分笔记
表单：
1、表单的概念：
表单不要用来获取客户端用户数据信息的。如：注册表单、查询表单、登录表单；
2、表单的工作原理：
浏览有表单的界面，填写一些必要的信息，然后点击某个按钮进行提交。
这些表单数据通过互联网，传递到服务器上。
服务器上有专门的程序，对表单数据进行验证。
表单的制作分为两部分：一是前端的制作，二是后台php对表单数据的处理。
往地址栏中追加数据的方式发送账号密码。
表单的属性：
1、属于块元素；
2、name；表单名字；名字主要是给javascript使用；js主要用来做客户端表单验证；
3、method:表单的提交方式：get和post。
4、action:指定表单的处理程序;一般是PHP文件；
如果action为空，表单数据提交给了当前文件，它自己来处理；
5、enctype：指定表单数据的编码方式，对表单数据的一个加密；这个属性只能用于当method属性等于post时；有两个值
a、application/x-form-urldecoded //无上传项时，默认为该值（默认的加密方式）；
b、multipart/form-data //上传文件时，该值必须是自己
get方法和post方法：
1、get提交方式；
是将表单数据追加到action指定的处理程序的后面，然后向服务器发出请求。
如： file:///D:/文档/视频同步/login.php?username=叶芸榕&userpwd=qwe
login.php 是表单处理程序；
username=叶芸榕&userpwd=qwe 为表单提交的数据，又称之为“查询字符串”。
action文件和查询文件用“&”分隔。
每两个表单元素之间使用“&“符号分隔开来。
表单名称和表单值之间使用“=”分隔。
如果某个表单数据不想往服务器提交数据，那么，则不必给它添加name属性。因为没有name属性则无法获取其值。
get方式的特点；
1、不能提交敏感数据。如：密码。
2、只能提交少量数据。因为地址栏中的长度有限制。
3、get方式不能上传附件。
2、post提交式：
post提交方式，不是将表单数据追加到地址上，而是直接传给表单处理程序。
post方式的特点：
1、post提交的数据相对安全。
2、post可以提交海量数据。
3、post方式可以上传文件。
需要注意的是，地址栏传输数据的方式默认是get方式。
表单元素：
1、单行文本域；
语法格式：<input type = "text" 属性 = "值">
属性：
name：文本框的名字，命名规则是：可以包含字母、数字、下划线，只能以字母开头；
type：表单元素的类型。
value：表单元素的值。
size：文本框的长度。以“字符”为单位。
MaxLength:最大长度。最多可以输入多少个字符。
readonly：只读属性；可以选中不能修改；readonly = "readonly"
disabled:禁用属性；不能选中，不能修改。
2、单行密码域：
语法格式：<input type = "password" 属性 = "值">
属性与单行文本域一模一样；
3、单选按钮：
语法格式：<input type = "radio" 属性 = "值">
常用属性：
name：元素的名称；
value：元素的值；
checked: 默认选择某项；chaecked = checked;
注意：一组单选按钮，只能选择一个，但name的值必须一致。如:name = "sex"
单选按钮用户不能自己输入内容，用户只能选择，因此必须为它指默认值"value"
4、复选框：
语法格式：<input type = "checkbox" 属性 = "值">
常用属性：
name：元素的名称；
value：元素的值；
checked：默认选择。checked = "checked"
注意：复选框也是一组选项，因此name的值必须一致。在PHP中，使用数组来获取多个同名的name的值。
复选框可以一次选择多个，也可以一个都不选。
5、下拉列表：
语法格式：
<select name = "city">
<option value = "http://www.mamicode.com/北京市">北京市<option>
<option value = "http://www.mamicode.com/南京市">南京市<option>
<option value = "http://www.mamicode.com/东京市">东京市<option>
</select>
select 属性：只有一个name
option属性有两个：
value:元素的值；
selected：默认选择； selected = "selected"
6、文本区域
语法格式：
<textarea name = "名称" cols = "宽度" rows = "高度"></textarea>
常用属性：
name；元素名称
value；文本内容
cols；宽度（多少字符宽度）
rows；高度（是指几行高度）
注意：<textarea>和</textarea>之间是默认文本；
7、各种按钮
a、提交按钮：<input type = "submt" value = "http://www.mamicode.com/提交表单">
b、重置按钮：<input type = "reset" value = "http://www.mamicode.com/重新填写">
c、图片按钮：<input type = "image" value = "http://www.mamicode.com/url">
d、普通按钮：<input type = "button" onclick = "...(相应的操作代码)" value = "http://www.mamicode.com/name">
普通按钮本身是不具备任何功能的，一般要与js程序配合使用，实线相应的功能。
8、隐藏域
就是一看看不见的框，用以传递一些数据，而这些数据不想个客户看到，基本用于PHP后台程序，比如修改某条新闻时，要传递ID号，只需要传递，而不需要其他人看见。
9、上传文件
语法格式：<input type = "file" 属性 = “值”>
常用属性:
name：表单元素的名称；
value：表单元素的值，这个值其实就是上传的文件名。value属性是只读属性。这个value来源于手动选择上传的文件，而不能用户 指定一个路径。为了安全起见，value是只读的；
10、<caption>表格标题
语法格式<caption></caption>
提示：<caption>标记是<table>的子标记。<caption>标记放在<table>标记之后。
相对昨天而言，今天又接触了些新的表单知识，总算是学完了相关的知识点
===============================================================================
然后就学了学框架的搭建：
以下是主框架的代码：
1 <html> 2 <head> 3 <title>00</title> 4 <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> 5 </head> 6 <frameset cols = "200,*" frameborder = "yes" border = "5"> 7 <!--划分框架标记；cols划分框：左边200，剩下都给右边；frameborder：是否显示边框；边框粗细；--> 8 <frame src = "视频同步：框架_left.html" noresize = "noresize"> <!--不能调整窗口大小--> 9 <frame src = "视频同步：框架_right.html" name = "right"> 10 </frameset> 11 </html>
左框架代码：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="Generator" content="EditPlus?"> 6 <meta name="Author" content=""> 7 <meta name="Keywords" content=""> 8 <meta name="Description" content=""> 9 <title>Document</title> 10 </head> 11 <body bgcolor = "#99ffff"> 12 <a href = "随堂练习02.html" target = "right">随堂练习：CSS样式</a><br/> 13 <a href = "Syllabus.html" target = "right">课程表</a><br/> 14 <a href = "视频同步：表单.html" target = "right">视频同步：表单</a><br/> 15 </body> 16 </html>
右框架代码：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="Generator" content="EditPlus?"> 6 <meta name="Author" content=""> 7 <meta name="Keywords" content=""> 8 <meta name="Description" content=""> 9 <title>Document</title> 10 </head> 11 <body bgcolor = "#33cccc"> 12 13 </body> 14 </html>
效果如图所示：
点击第一个链接：
第二个链接的效果
第三个点击效果
以下是我学习的笔记
一、框架的概念：
框架技术：将一个浏览器窗口划分成若干个小窗口，每个小窗口显示一个独立的小窗口。
二、框架集和框架页：
框架集<frameset>:主要用来划分窗口。
框架页<frame>:主要用来指定窗口默认显示的网页地址。
三、<farmeset>属性：
cols:划分左右型框架。
cols = "200,*" //左框架宽度为200，剩下的都是右框架；
cols = "180,*,180" //左框架和右框架的宽分别为180px；剩下的都是中间框架；
cols = "20%,*" //划分框架值可以用百分比表示；
rows：划分上下框架。
写法一样；
注意：不能同时划分上下左右；rows和cols不能同时用；每个框架只能用其中的一个；
fameborder：是否显示框架的边框线；取值1和0；
border:边框线的粗细；
bordercolor:边框颜色；
四、<frame>框架页的属性
src：该小窗口中准备显示的网页；
noresize:不能调整窗口大小；如：noresize = "noresize";
scrolling:是否显示滚动条，取值：1和0；yes或no；auto(自动)；
name:给当前的小窗起名；
五、<noframes>含义
描述：当你的浏览器不支持框架时，显示提示的信息；一般情况下IE6不支持；
语法格式:
<noframes>提示信息</noframes>
六、关于框架嵌套
以上运用的就是关于框架的学习以及嵌套；
HTML第五天学习笔记