当前位置：Gxlcms > PHP教程 > PHP笔记（HTML篇）

PHP笔记（HTML篇）

时间：2021-07-01 10:21:17 帮助过：17人阅读

学过很多语言，最近终于决定要学PHP了。

学习PHP，首先总要学习HTML，那么，我也从HTML开始吧！

首先学习任何编程语言，看再多书，都离不开它??帮助文档

HTML帮助文档：http://pan.baidu.com/s/1hqxOymo

不说不知道，近年来比较火的HTML5，是HTML的一个发展方向，HTML的发展方向如下图，一边是多元化的HTML5，另一边是规范化的XML，过程中还衍生了XHTML！

做网页，总避免不了要使用颜色，颜色有两种表示法，单词表示法和十六进制表示法，其中，十六进制表示法表示的颜色比较全，我也整理了一篇博文，以供查看。

RGB颜色表：

编程语言总有一些特殊符号不能直接作为文本显示，HTML也不例外，这些特殊符号在HTML中称为实体，博主也整理了一篇HTML实体对照表，供不时之需。

实体对照表：

网页代码是由浏览器直接解析的，编写网页必须选择一种编码，常用的编码有UTF-8、GBK、GD2312等，而浏览器也可以选择一种编码去解析网页。那么，问题来了，如果浏览器选择的编码和编写网页的编码不一致怎么办？解决的办法有是三个：

使用最多人用的编码方式适应浏览器
设置浏览器的编码去配合网页
使用标签

很明显，一种编码不能适合所有人，而让用户修改浏览器编码也不够智能，所以，前两种都是治标不治本，第三种方法才是王道。

是单标签，其用法是

以UTF-8为例：

标签的其他用法，可查看帮助文档。

标签可设置超链接，如将相对路径装换为绝对路径、打开方式等。是单标签，其具体用法可参考帮助文档。

的属性设置会默认为整个网页的默认设置，可设置字体颜色（text）、背景颜色（bgcolor）、背景图片（background）、背景属性（bgproperties）等，还是查看帮助文档！

是段落标签，这个标签比较特殊，既可用作单标签也可用作双标签。用作双标签时，标签之间的内容作为一段显示；作为单标签时，从标签处开始换行。双标签的用法比较标准，也比较普遍。

标签是双标签，标签内的文本会按照原格式

输出，与不同，<pre class="brush:php;toolbar:false">标签内的标签是可以被解析的，而<xmp>内的标签是不能解析，以文本形式</pre>输出的！</p> <p> </p> <p><li>标签搭配<ol>和<ul>使用，<li>为列表（list）标签，是双标签，标签间的内容作为列表中的一项显示，默认无序；<ol>标签搭配<li>标签，使列表变为有序列表；<ul>标签搭配<li>使用，作为无序列表组。这些标签的属性可查看帮助文档。</p> <p> </p> <p><sub>和<sup>，下标标签和上标标签，均为双标签。</p> <p> </p> <p><img>叫做图像标签，用于显示图片，为单标签，src属性设置图片链接，title属性设置鼠标放在上面时显示的名称，alt属性设置图片加载失败显示的名称。其他属性可查帮助文档。</p> <p> </p> <p>是链接标签，用于超链接，为双标签。href属性设置链接地址，title属性设置标签放在上面时显示的名称，target属性设置打开链接的方式，其他属性，可查看帮助文档。</p> <p>标签设置锚点，用于链接到特定区域，用name属性。name设置一个名称，href属性设置为"#"+name的名称，即可链接到本页name所在处；若href设置为网页路径+"#"+name的名称，则可链接到该网页的name所在处；herf属性设置为"#"或为空时，跳转到本页头。</p> <p> </p> <p>当前页跳转</p> <p></p> <p>跳转到其他页面</p> <p> </p> <p>URL：统一资源定位符</p> <p>URL组成：以http://i.cnblogs.com/EditPosts.aspx?postid=4275104&update=1为例</p> <li>协议名称：http://、ftp://、https://、file://等（http://）</li> <li>主机名：（i.cnblogs.com）（cnblogs.com是域名）</li> <li>端口号：80、8080、等（范围：0~65535）（80）</li> <li>资源名称：访问的文件（EditPosts.aspx）</li> <li>参数："?"后面的键值对，多个参数用"&"连接（get传参，参数可见；post传参，参数不可见）（postid=4275104&update=1）</li> <p> </p> <p>URL的相对路径：</p> <li>./：代表本地路径</li> <li>../：代表上级路径</li> <li>../../：代表上上级路径（以此类推）</li> <p> </p> <p><table>标签用于构建表格，为双标签。width属性设置表格的宽度，heigth属性设置表格的高度，border属性设置表格的边框，cellspacing属性设置单元格之间的宽度，cellpadding属性设置单元格内容与边框之间的距离。</p> <p><tr>标签嵌套<table>标签使用，用于设计表格的行，为双标签。</p> <p><td>标签嵌套<tr>标签使用，用于表示表格的单元格，为双标签。rowspan属性设置跨行，属性值表示跨越的行数；colspan属性设置跨列，属性值表示跨越的列数。</p> <p><th>标签嵌套<tr>标签使用，用于表示表格的表头，单元格的内容字体加粗、居中。</p> <p>更多属性可查帮助文档。</p> <p> </p> <p> </p> <p>HTML的框架（frame），也称为分帧，即将多个页面组合成一个页面显示。</p> <li>优点： </li> <li>重载页面时，不需要重载整个页面，增加了网页下载的速度</li> <li>方便制作导航栏</li> <li>缺点： </li> <li>多个页面，不易管理</li> <li>代码复杂，无法被搜索引擎索引到</li> <li>多框架的页面会增加服务器的http请求</li> <li>小型的移动设备无法完全显示</li> <li>由于以上缺点，不符合标准网页设计理念，已被抛弃，但后台可以使用，所以，还是要学习。</li> <p>框架的标签：</p> <li><frameset>标签，双标签 </li> <li><frameset>标签代替了<body>标签，定义框架页面，所以使用<frameset>标签就不用<body>标签</li> <li>border属性设置框架边框的大小</li> <li>rows属性设置框架的行数及高度，需要多少行就编写多少行的大小，“*”表示剩余空间，用“,”隔开</li> <li>cols属性设置框架的列数及宽度，需要多少列就编写多少列的大小，“*”表示剩余空间，用“,”隔开</li> <li><frameset>可嵌套使用，使框架格式多元化</li> <li><frame>标签，双标签 </li> <li>用于显示每个页面的内容，嵌套在<frameset>中使用；</li> <li>src属性设置页面的路径，以显示其内容</li> <li>name属性可设置frame的名称，供链接显示</li> <li>标签的target属性可指定显示页面的frame</li> <li>标签的target属性设置为“_parent”时，表示它的上一级框架显示，设置为“_top”时，表示顶级框架显示，及整个网页</li> <p class="sycode"> <br /> </p> <p class="sycode"> 布局显示 </p> <p class="sycode"> </p> <p class="sycode"> </p> <p class="sycode"> 超链接 </p> <p class="sycode"> <li><noframes>标签，双标签 </li> <li>当浏览器无法加载框架的时候，会显示<noframes>标签内的内容</li> <li>嵌套在<frameset>标签中使用，搭配<body>标签使用</li> <li></li> <li><iframe>标签，单标签<br /><br /> </li> <li>创建一个包含另一个文档的内联框架</li> <li>其中的内容可在不支持该标签的浏览器中显示</li> <li>在<body>标签中使用</li> <p></p> <p>关于框架的其他属性和用法，可查看帮助文档！</p> <p> </p> <p>表单：可以把输入的数据传送到服务器端的程序的html元素</p> <li><form>标签，双标签 </li> <li>表示HTML表单</li> <li>action属性设置数据传送的目的地</li> <li>method属性设置传输方式，可设置为get和post </li> <li>get传输的信息较少，速度较快，提交信息会显示在地址栏，不安全</li> <li>post传输的信息较多，速度较慢，提交信息不会显示在地址栏，较安全</li> <li>enctype属性设置数据发送到服务器的编码类型 </li> <li>application/x-www-form-urlencoded：窗体数据被编码为名称/值对，为标准编码格式，默认值</li> <li>multipart/form-data：窗体数据被编码为一条信息，页面上的每个控件对应信息中的一部分，上传文件时使用</li> <p></p> <li><input>标签，单标签 </li> <li>type，代表一个输入域的显示方式（分为输入型、选择型、点击型） </li> <li>text，单行文本输入域，输入型</li> <li>password，密码输入域，输入的字符显示为"*"，输入型</li> <li>file，文件上传，输入型</li> <li>checkbox，复选框，选择型</li> <li>radio，单选框，选择型</li> <li>hidden，隐藏域，一般用于传递默认值， </li> <li>button，按钮，点击不会提交表单，可进行其他操作，点击型</li> <li>image，图片按钮，点击会提交表单，点击型</li> <li>submit，提交按钮，点击可提交表单，点击型</li> <li>reset，重置按钮，点击型</li> <li>name，表单项的名称 </li> <li>通常设置为与数据库中相对应的字段名相同</li> <li>点击型不需要该属性</li> <li>传输数据时的标识符</li> <li>复选框的name值一般使用数组表示</li> <li>单选框的name值相同时，选项相互排斥</li> <li>value，表单项的值 </li> <li>选择型设置该属性值，选择后，可随表单传输</li> <li>点击型除image，设置该属性，即设置按钮显示名称</li> <li>输入型设置该属性值，设置默认value值</li> <li>maxlength，限制文本输入长度</li> <li><textarea>标签，双标签 </li> <li>多行文本域，可输入多行文本</li> <li>cols，设置列数，通过列数，设置宽度</li> <li>rows，设置行数，通过行数，设置高度</li> <li>其余属性与<input>标签输入型一致</li> <li><select>标签，双标签 </li> <li>下拉菜单</li> <li>name属性设置表单项名称，通常与数据库字段名一致</li> <li>multiple属性设置表单为多选</li> <li><option>标签，双标签 </li> <li>嵌套在<select>标签中使用，表示下拉菜单的一个选项</li> <li>value属性设置选项的值，选择后，随表单传输</li> <li>selected属性设置默认被选中</li> <li><lable>标签可设定文本与选项绑定，达到点击文本即可选择的作用</li> <p></p> <p>关于表单的其他属性和用法，可查看帮助文档！</p> <p>标签，双标签</p> <li>图层标签，用于定位元素或布局</li> <li>层中的内容可放到浏览器任意位置，可放入HTML元素</li> <li>常与CSS结合使用</li> <p>由于常与CSS结合使用，在学习CSS时再深入学习！</p> <p> </p> <p>至此，HTML的基本元素已经学完了，可以开始制作简单的静态网页了，但是离动态网站还远着呢！接着来学CSS吧！ </div> <div class=""> <ul class="m-news-opt fix"> <li class="opt-item"> <a href='/PHPjiqiao-138151.html' target='_blank'><p>< 上一篇</p><p class="ellipsis">为什么使用file_get_contents获取不到百度竞价内容</p></a> </li> <li class="opt-item ta-r"> <a href='/PHPjiqiao-138153.html' target='_blank'><p>下一篇 ></p><p class="ellipsis">五种常见的PHP设计模式</p></a> </li> </ul> </div> </div> </div> <div class="g-title fix"> <h2 class="title-txt">人气教程排行</h2> </div> <div class="m-rank u-dashed mb40"> <ul> <li class="rank-item"> <a href="/PHPjiqiao-379253.html" title='php如何获取跳转前的url' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">174次</span> <span class="g-sort-num top">1</span> php如何获取跳转前的url </a> </li> <li class="rank-item"> <a href="/PHPjiqiao-379019.html" title='php格林威治时间转换成当前时间的方法' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">174次</span> <span class="g-sort-num second">2</span> php格林威治时间转换成当前时间的方法 </a> </li> <li class="rank-item"> <a href="/PHPjiqiao-366629.html" title='为什么php不能做大型系统？' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">174次</span> <span class="g-sort-num third">3</span> 为什么php不能做大型系统？ </a> </li> <li class="rank-item"> <a href="/PHPjiqiao-207623.html" title='range函数怎么用' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">174次</span> <span class="g-sort-num ">4</span> range函数怎么用 </a> </li> <li class="rank-item"> <a href="/PHPjiqiao-162433.html" title='php中计算页面加载时间几种方法总结_PHP教程' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">174次</span> <span class="g-sort-num ">5</span> php中计算页面加载时间几种方法总结_PHP教程 </a> </li> <li class="rank-item"> <a href="/PHPjiqiao-140221.html" title='求帮助，关于paypal支付返回值修改订单状态' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">174次</span> <span class="g-sort-num ">6</span> 求帮助，关于paypal支付返回值修改订单状态 </a> </li> <li class="rank-item"> <a href="/PHPjiqiao-103588.html" title='typecho怎么配置文章内容页?' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">174次</span> <span class="g-sort-num ">7</span> typecho怎么配置文章内容页? </a> </li> <li class="rank-item"> <a href="/PHPjiqiao-99213.html" title='PhpStorm左侧structure不显示文件的方法列表是这么回事？' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">174次</span> <span class="g-sort-num ">8</span> PhpStorm左侧structure不显示文件的方法列表是这么回事？ </a> </li> <li class="rank-item"> <a href="/PHPjiqiao-92208.html" title='查看PHP的环境变量_PHP' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">174次</span> <span class="g-sort-num ">9</span> 查看PHP的环境变量_PHP </a> </li> <li class="rank-item"> <a href="/PHPjiqiao-170.html" title='PHP Primary script unknown 解决方法总结' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">174次</span> <span class="g-sort-num ">10</span> PHP Primary script unknown 解决方法总结 </a> </li> <li class="rank-item"> <a href="/PHPjiqiao-148.html" title='php的命名空间与自动加载实现方法' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">174次</span> <span class="g-sort-num ">11</span> php的命名空间与自动加载实现方法 </a> </li> <li class="rank-item"> <a href="/PHPjiqiao-133.html" title='解决laravel 出现ajax请求419(unknown status)的问题' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">174次</span> <span class="g-sort-num ">12</span> 解决laravel 出现ajax请求419(unknown status)的问题 </a> </li> <li class="rank-item"> <a href="/PHPjiqiao-462817.html" title='php 如何删除mysql记录' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">173次</span> <span class="g-sort-num ">13</span> php 如何删除mysql记录 </a> </li> <li class="rank-item"> <a href="/PHPjiqiao-388448.html" title='PHP如何替换数组中的指定元素' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">173次</span> <span class="g-sort-num ">14</span> PHP如何替换数组中的指定元素 </a> </li> <li class="rank-item"> <a href="/PHPjiqiao-124270.html" title='怎么去除字符串中非汉字、非字母、非数字的字符' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">173次</span> <span class="g-sort-num ">15</span> 怎么去除字符串中非汉字、非字母、非数字的字符 </a> </li> <li class="rank-item"> <a href="/PHPjiqiao-112291.html" title='mysql如何一次执行多条SQL语句' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">173次</span> <span class="g-sort-num ">16</span> mysql如何一次执行多条SQL语句 </a> </li> <li class="rank-item"> <a href="/PHPjiqiao-110669.html" title='修改header里面的Connection为close解决方法' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">173次</span> <span class="g-sort-num ">17</span> 修改header里面的Connection为close解决方法 </a> </li> <li class="rank-item"> <a href="/PHPjiqiao-153.html" title='PHP基于session.upload_progress 实现文件上传进度显示功能详解' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">173次</span> <span class="g-sort-num ">18</span> PHP基于session.upload_progress 实现文件上传进度显示功能详解 </a> </li> <li class="rank-item"> <a href="/PHPjiqiao-125.html" title='php5.6.x到php7.0.x特性小结' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">173次</span> <span class="g-sort-num ">19</span> php5.6.x到php7.0.x特性小结 </a> </li> <li class="rank-item"> <a href="/PHPjiqiao-378118.html" title='php为什么会出现504错误' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">172次</span> <span class="g-sort-num ">20</span> php为什么会出现504错误 </a> </li> </ul> </div> </div> </div>  </div> </div>  <div class="footer"> 本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！</div>  <script type="text/javascript" src="/kan/js/read.js"></script> <div style="display:none"> <div class="login-box" id="login-dialog"> <div class="login-top"><a class="current" rel="nofollow" id="login1" onclick="setTab('login',1,2);" >登录</a></div> <div class="login-form" id="nav-signin">  <div class="login-box-form" id="con_login_1"> <form id="loginform" action="/user-center-login.html" method="post" onsubmit="return false;"> <p class="int-text"> <input class="email" id="username" name="username" type="text" value="用户名或Email" onfocus="if(this.value=='用户名或Email'){this.value='';}" onblur="if(this.value==''){this.value='用户名或Email';};" ></p> <p class="int-text"> <input class="password1" type="password" id="password" name="password" value="******" onBlur="if(this.value=='') this.value='******';" onFocus="if(this.value=='******') this.value='';" > </p> <p class="int-info"> <label class="ui-label"> </label> <label for="agreement" class="ui-label-checkbox"> <input type="checkbox" value="" name="cookietime" id="cookietime" checked="checked" value="2592000"> <input type="hidden" name="notforward" id="notforward" value="1"> <input type="hidden" name="dosubmit" id="dosubmit" value="1">记住我的登录 </label> <a rel="nofollow" class="aright" href="/user-center-forgetpwd.html" target="_blank"> 忘记密码？ </a></p> <p class="int-btn"><a rel="nofollow" id="loginbt" class="loginbtn"><span>登录</span></a></p> </form> </div> <form id="regform" action="/user-center-reg.html" method="post"> <div class="login-reg" style="display: none;" id="con_login_2"> <input type="hidden" name="t" id="t"/> <p class="int-text"> <input id="email" name="email" type="text" value="Email" onfocus="if(this.value=='Email'){this.value='';}" onblur="if(this.value==''){this.value='Email';};"></p> <p class="int-text"> <input id="uname" name="username" type="text" value="用户名或昵称" onfocus="if(this.value=='用户名或昵称'){this.value='';}" onblur="if(this.value==''){this.value='用户名或昵称';};"></p> <p class="int-text"> <input type="password" id="pwd" name="password" value="******" onBlur="if(this.value=='') this.value='******';" onFocus="if(this.value=='******') this.value='';"> </p> <p class="int-text1"><span class="inputbox"> <input id="validate" name="validate" type="text" value="验证码" onfocus="if(this.value=='验证码'){this.value='';}" onblur="if(this.value==''){this.value='验证码';};"> </span><span class="yzm-img"><img src="/user-checkcode-index" alt="看不清楚换一张" id="indexlogin"></p> <p class="int-info"> <label> <input value="" name="agreement" id="agreement" CHECKED="checked" type="checkbox"> 我已阅读<a rel="nofollow" href="/user-center-agreement.html">用户协议</a>及<a rel="nofollow" href="/user-center-agreement.html">版权声明</a></label> </p> <p class="int-btn"><input type="hidden" name="dosubmit"/> <a rel="nofollow" class="loginbtn" id="register"><span>注册</span></a></p> </div> </form> </div> </div> </div> </div> <script type="text/javascript" src="/kan/js/foot_js.js"></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?6dc1c3c5281cf70f49bc0bc860ec24f2"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script type="text/javascript" src="/layui/layui.js"></script> <script> layui.use('code', function() { layui.code({ elem: 'pre', //默认值为.layui-code about: false, skin: 'notepad', title: 'php怎么实现数据库验证跳转代码块', encode: true //是否转义html标签。默认不开启 }); }); </script> </body> </html>