当前位置：Gxlcms > html代码 > 体育生学编程--html学习_html/css_WEB-ITnose

体育生学编程--html学习_html/css_WEB-ITnose

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

HTML学习

1、HTML介绍（了解即可）

HTML (Hyper Text Markup Language)：
HTML就是超文本标记语言的简写，是最基础的网页语言

HTML的版本：
2.0（IETF）、3.0（W3C）、4.01（W3C）、5.0（W3C）
IETF： Internet Engineering Task Force
W3C：World Wide Web Consortium

HTML的特点：
是通过标签来定义的语言，代码都是由标签所组成，代码不用区分大小写
由开始，结束
由头部分和体部分两部分组成
头部分是给HTML页面增加一些辅助或者属性信息，它里面的内容会最先加载
体部分是真正存放页面数据的地方

HTML的标签：
多数标签都是有 开始标签和 结束标签。例如：

段落段落

其中有个别标签因为只有单一功能，或者没有要修饰的内容可以在 标签内结束。例如：换行
分割线

也可以写作

斜线可以不写

HTML标签中的属性：
想要对被标签修饰的内容进行更丰富的操作，就用到了标签中的属性
通过对属性值的改变，增加了更多的效果选择
属性名与属性值之间用“=”连接
属性值可以用双引号、单引号、不用引号，一般都会用双引号（或公司规定书写规范）

2、头标签

<br /> 页面的标题 </p> <p class="sycode"> </p> <p class="sycode"> <base> <br /> 页面超链接的基本属性 <br /> href：页面所有超链接默认从这个路径开始 <br /> target：页面所有超链接默认的target </p> <p class="sycode"> <br /> </p> <p class="sycode"> <meta> <br /> 页面描述信息 <br /> <meta name="keywords" content="Java,.Net,Android,iOS"> <strong>蜘蛛爬取时看，搜素引擎SEO有关</strong> <br /> <meta http-equiv="content-type" content="text/html; charset=utf-8"> 告知浏览器此页面内容、类型、编码 <br /> <meta http-equiv="refresh" content="3;url=http://www.maomao.com">三秒后刷新到某个页面 </p> <p class="sycode"> </p> <h2>3、字体<font></h2> <p class="sycode"> 字体标签<font>： <br /> <strong><font size=5 color=red></strong>字体标签示例 <strong></font> </strong> <br /> 简单颜色可是直接写对应的英文 <br /> 复杂颜色用16进制表示，表现形式#FF0000两个数为一组，按红，绿，蓝排列 <br /> 如：#FF0000表示红色、#00FF00表示绿色 </p> <p class="sycode"> <br /> </p> <p class="sycode"> 标题标签<h2>、<h2> ... <h6>： <br /> 标题是文本中常用的内容，为了方便操作而定义的 <br /> 其实就是某个字号和粗体的组合 <br /> </p> <h2>4、列表<dl><dt><dd></h2> <p class="sycode"> 无标签： <br /> <dl>列表、<dt>标题、<dd>列表项 </p> <p class="sycode"> 数字标签： <br /> <ol>列表、<li>列表项 <br /> type属性更改项目符号（a A 1 i I） <br /> </p> <p class="sycode"></p> <p class="sycode"> 符号标签： <br /> <ul>列表、<li>列表项 <br /> type属性更改项目符号（circle空心圆、disc实心圆、square正方形） </p> <p class="sycode"> <pre name="code" class="sycode"><span style="font-size:14px;"> <dl> <dt>公司部门</dt> <dd>软件研发部</dd> <dd>财务部</dd> <dd>行政部</dd> <dl> <ol type="i"> <li>软件研发部</li> <li>财务部</li> <li>行政部</li> </ol> <ul type="square"> <li>软件研发部</li> <li>财务部</li> <li>行政部</li> </ol></span></script></pre> 效果图 </p> <p class="sycode"></p> <p class="sycode"> <br /> </p> <h2>5、超链接</h2> <p class="sycode"> 链接标签： <br /> <pre name="code" class="sycode"><span style="font-size:14px;"><span style="white-space:pre"> </span> <span style="font-size:18px;"> 猫猫学编程</span></span></script></pre> href：要链接的地址 <br /> target：显示位置 <br /> <pre name="code" class="sycode"><span style="font-size:14px;"><span style="white-space:pre"> </span></span></script></pre> 在页面的某个位置做出标记 <br /> <pre name="code" class="sycode"><span style="font-size:14px;"><span style="white-space:pre"> </span>跳转到标记</span></script></pre> 点击链接跳转到标记位置 <br /> </p> <h2>6、图像<image></h2> <p class="sycode"> 图像标签<img>： <br /> <pre name="code" class="sycode"><span style="font-size:14px;"><span style="white-space:pre"> </span><img src="https://www.gxlcms.com/1.jpg" align="right" border="3" alt="图片说明文字" /> </span></script></pre> src: 图片路径 <br /> align: 对齐方式 <br /> border: 边框粗细 <br /> </p> <p class="sycode"> 图像地图<map>： <br /> 在<img>标签中使用usemap属性，指定图像可以用作地图 <br /> 使用<map>及标签可以把图像的一部分作为超链接 <br /> </p> <p class="sycode"> <pre name="code" class="sycode"><span style="font-size:14px;"><span style="white-space:pre"> </span><img src="https://www.gxlcms.com/Sunset.jpg" alt="图片说明文字" usemap="#Map" /> <map name="Map"> </map></span></script></pre> <br /> </p> <h2>7、框架<frameset></h2> <p class="sycode"> 框架集合标签<frameset>： <br /> <frameset>中可以放入多个<frame>框架，把页面分成几个部分 <br /> <frameset>不能放在body中 <br /> <pre name="code" class="sycode"><span style="font-size:14px;"><frameset rows="20%,*"> <frame src="1.html" name="top" /> <frameset cols="20%,*"> <frame src="2.html" name="left" /> <frame src="3.html" name="right" /> </frameset></frameset></span></script></pre> rows：框架集合每行的高度 <br /> cols：框架集合每列的宽度 <br /> src：框架中显示的页面 <br /> name：框架的名字，可用做超链接的target </p> <p class="sycode"> <br /> </p> <p class="sycode"> 内联框架<iframe>： <pre name="code" class="sycode"><span style="font-size:14px;"><span style="white-space:pre"> </span><iframe src="1.html">抱歉,您的浏览器无法显示iframe标签</iframe> <iframe src="2.html">抱歉,您的浏览器无法显示iframe标签</iframe></span></script></pre> 可以在页面中嵌入另一个页面 <br /> src：要嵌入的页面 <br /> innerHTML：如果浏览器无法显示iframe，则会显示该文本 <br /> </p> <h2>8、表格<table></h2> <p class="sycode"> 表格标签<table>： <br /> <caption> 标题 <br /> <tr> 表格中的一行 <br /> <td> 放在<tr>中代表一个单元格 <br /> <th> 类似<tr>通常用在第一行或最后一行 <br /> <pre name="code" class="sycode"><span style="font-size:14px;"><table border="1" width="40%" >  <caption>表格标题</caption> <tr> <th>姓名</th> <th>年龄</th> </tr> <tr algin=”center”> <td>张三</td> <td>23</td> </tr></table></span></script></pre> <br /> </p> <p class="sycode"> 多行多列<td>： <br /> colspan属性：控制一个单元格占多列 <br /> rowspan属性：控制一个单元格占多行 </p> <p class="sycode"> <thead>、<tbody>、<tfoot>： <br /> 三个标签都是放在table下，内部可以放tr标签 <br /> <thead> 表头，通常用在第一行 <br /> <tbody> 表体，表格中间的内容，可以有多个 <br /> <tfoot> 表脚，通常用在最后一行 <br /> <br /> <br /> </p> <h2>9、表单</span></script></pre> <br /> </p> <p class="sycode"> 输入项<input>： <br /> 通过指定type属性可以定义不同的输入项： <br /> text：普通文本框 <br /> password：密码框 <br /> radio：单选按钮 <br /> checkbox：多选按钮 <br /> file：文件 <br /> hidden：隐藏字段 <br /> submit：文本提交按钮 <br /> image：图片提交按钮 <br /> reset：重置按钮 <br /> button：普通按钮 <br /> </p> <p class="sycode"> 下拉列表<select> <br /> 默认为单选，multipe属性指定是否为多选 <br /> size属性指定显示个数 <br /> 内部用<option>标签指定其中选项 <br /> </p> <p class="sycode"> 文本域<textarea> <br /> rows属性指定行数 <br /> cols属性指定列数 <br /> 标签<label> <br /> 可以用来方便点击或者设置快捷键 <br /> <label><input type="radio"> 男</label> <br /> <label for="user" accesskey="u">用户名(u)</label> <br /> <input type="text" id="user" /> <br /> <pre name="code" class="sycode"><span style="font-size:14px;"> </span></script></pre> <br /> <br /> <br /> </p> <h2>10、注释 特殊字符</h2> <p class="sycode"> 特殊字符： <br /> 一些特殊符号，比如< > & 等，在代码中会被浏览器识别并解释 <br /> 所以用一些特殊的方式来表示 </p> <p class="sycode"> <br /> </p> <p class="sycode"> </p> <p class="sycode"> 注释用 </p> <p class="sycode"> <h2> </h2> </div> <div class=""> <ul class="m-news-opt fix"> <li class="opt-item"> <a href='/htmldaima-271849.html' target='_blank'><p>< 上一篇</p><p class="ellipsis">HTML学习笔记NO.1_html/css_WEB-ITnose</p></a> </li> <li class="opt-item ta-r"> <a href='/htmldaima-271851.html' target='_blank'><p>下一篇 ></p><p class="ellipsis">CSS表格属性_html/css_WEB-ITnose</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="/htmldaima-274978.html" title='如何生成一个调查问卷_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">230次</span> <span class="g-sort-num top">1</span> 如何生成一个调查问卷_html/css_WEB-ITnose </a> </li> <li class="rank-item"> <a href="/htmldaima-274080.html" title='在页面直接显示日历_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">230次</span> <span class="g-sort-num second">2</span> 在页面直接显示日历_html/css_WEB-ITnose </a> </li> <li class="rank-item"> <a href="/htmldaima-262106.html" title='如何点击a标签实现弹出inputfile上传文件对话框_HTML/Xhtml_网页制作' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">230次</span> <span class="g-sort-num third">3</span> 如何点击a标签实现弹出inputfile上传文件对话框_HTML/Xhtml_网页制作 </a> </li> <li class="rank-item"> <a href="/htmldaima-278863.html" title='关于列表标记的详细介绍' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">229次</span> <span class="g-sort-num ">4</span> 关于列表标记的详细介绍 </a> </li> <li class="rank-item"> <a href="/htmldaima-277331.html" title='cssborder-bottom（指定下边线的样式、宽度及颜色）' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">229次</span> <span class="g-sort-num ">5</span> cssborder-bottom（指定下边线的样式、宽度及颜色） </a> </li> <li class="rank-item"> <a href="/htmldaima-270548.html" title='html新闻详情页_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">229次</span> <span class="g-sort-num ">6</span> html新闻详情页_html/css_WEB-ITnose </a> </li> <li class="rank-item"> <a href="/htmldaima-268070.html" title='为何页面内容和网页边缘有空隙_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">229次</span> <span class="g-sort-num ">7</span> 为何页面内容和网页边缘有空隙_html/css_WEB-ITnose </a> </li> <li class="rank-item"> <a href="/htmldaima-269054.html" title='position:fixed定位时“高度坍塌”问题的解决_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">228次</span> <span class="g-sort-num ">8</span> position:fixed定位时“高度坍塌”问题的解决_html/css_WEB-ITnose </a> </li> <li class="rank-item"> <a href="/htmldaima-280863.html" title='htmlp标签怎么换行？htmlp标签添加br换行标签的应用' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">227次</span> <span class="g-sort-num ">9</span> htmlp标签怎么换行？htmlp标签添加br换行标签的应用 </a> </li> <li class="rank-item"> <a href="/htmldaima-281519.html" title='HTML的<!DOCTYPE>标签' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">226次</span> <span class="g-sort-num ">10</span> HTML的<!DOCTYPE>标签 </a> </li> <li class="rank-item"> <a href="/htmldaima-280725.html" title='html页面中友情链接怎么进行添加设置？（代码示例）' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">226次</span> <span class="g-sort-num ">11</span> html页面中友情链接怎么进行添加设置？（代码示例） </a> </li> <li class="rank-item"> <a href="/htmldaima-278651.html" title='form表单中属性及功能应用介绍汇总' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">226次</span> <span class="g-sort-num ">12</span> form表单中属性及功能应用介绍汇总 </a> </li> <li class="rank-item"> <a href="/htmldaima-278586.html" title='详解form标签中的method属性' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">226次</span> <span class="g-sort-num ">13</span> 详解form标签中的method属性 </a> </li> <li class="rank-item"> <a href="/htmldaima-277758.html" title='HTML5Canvas逼真烟雾效果js插件' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">226次</span> <span class="g-sort-num ">14</span> HTML5Canvas逼真烟雾效果js插件 </a> </li> <li class="rank-item"> <a href="/htmldaima-275669.html" title='页面跳转特效_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">226次</span> <span class="g-sort-num ">15</span> 页面跳转特效_html/css_WEB-ITnose </a> </li> <li class="rank-item"> <a href="/htmldaima-271209.html" title='改变鼠标选中区域的样式。_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">226次</span> <span class="g-sort-num ">16</span> 改变鼠标选中区域的样式。_html/css_WEB-ITnose </a> </li> <li class="rank-item"> <a href="/htmldaima-273428.html" title='关于$("body").append()一段html代码，在页面写能触发事件，写在js文件里写就没有_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">225次</span> <span class="g-sort-num ">17</span> 关于$("body").append()一段html代码，在页面写能触发事件，写在js文件里写就没有_html/css_WEB-ITnose </a> </li> <li class="rank-item"> <a href="/htmldaima-271182.html" title='CSS3悬浮动画效果_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">225次</span> <span class="g-sort-num ">18</span> CSS3悬浮动画效果_html/css_WEB-ITnose </a> </li> <li class="rank-item"> <a href="/htmldaima-271093.html" title='纯C语言实现的CSS解析器：katana_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">225次</span> <span class="g-sort-num ">19</span> 纯C语言实现的CSS解析器：katana_html/css_WEB-ITnose </a> </li> <li class="rank-item"> <a href="/htmldaima-267953.html" title='body在默认情况下是具有margin外边距的_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">225次</span> <span class="g-sort-num ">20</span> body在默认情况下是具有margin外边距的_html/css_WEB-ITnose </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>