2015年10月15日学习html基础笔记_html/css_WEB-ITnose

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了2015年10月15日学习html基础笔记_html/css_WEB-ITnose，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5436字，纯文字阅读大概需要8分钟。

内容图文

www网页服务，FTP文件上传下载，telnet远程控制

Apache2.2服务器

windows+r=运行，输入services.msc调出服务控制台

本地：127.0.0.1，访问自己本地服务器，需要使用Apache架起服务器之后，将文件放置到htdocs文件夹当中。安装Apache时要注意不能有中文文字不能有空格，可以直接安装到C盘下，不要安装到默认文件夹中。

主要使用的测试浏览器有IE、firefox、chrome、opera、safari

服务器端技术与客户端技术

常见的服务器端技术（运行在服务器上）：

JSP/PHP/ASPX

（前端）常见的客户端技术（运行在浏览器上）：

HTML/CSS/JS/SWF（flash）

计算机语言，HTML与JAVA/C/PHP不同，一门语言有三种结构，顺序执行、循环执行、选择执行。HTML里没有循环、选择等基本结构，只有纯文本和52个标签。

双标记标签：<标签名>文本

单标记标签：<标签名> 单标记标签中不能包含内容

Meta标记的使用

多个关键字内容之间可以用“，”分割

设置描述：

设置作者：

设置字符集：或者utf-8

gb2312主要用于中文文字较多的，而utf-8是国标，在国际上使用较多。

设置页面定时跳转：

html与xhtml的区别，xhtml首先所有字母都小写，其次所有标记都要有关闭。

格式：<标记 属性1="参数1" 属性2="参数2">内容

不同标签具有不同的属性，所有标签都具备以下四个属性：

id：整个文档每个标签可以声明一个唯一的id号

style：为元素指定css样式

class：指定元素所属的类型

title:指定标签的弹出提示语

写代码前需要声明文档类型，否则会影响到css和javascript的解释执行，很多效果就会出不来。

文档类型声明：（所有工具都能生成这句话）

windows+d可以将桌面调出来。

meta data:元数据-描述数据的数据（视频1day02视频1的35分）

元数据，写在head里面title上面比较好，这样会告诉浏览器以下的文字内容以这个标准来解析。避免出现乱码问题。

转义字符：

<>正常来说是无法显示的，会被认为是告诉浏览器的语言，所以需要使用转义字符来显示到前台。

基本格式：&xxxx

< 是<

> 是>

空格 是

& 是&

© 是©

? 是?

® 是&reg；

XHTML中不使用描述样式，都是使用CSS来控制样式，而在html中描述样式和描述语义是混杂的。例如和，前面是描述样式，后面是描述语义，在xhtml中描述样式标签就不可存在了。xhtml中，代替。

如今新网页中大多都是用的xhtml，为什么html却没被废弃呢？因为之前很多老网页没有修改过，都还是用的描述样式的方式，所以无法废弃，只是新的不再使用。

html元素类型，共有100多个元素类型，差不多各占一半，有的只能用于区块元素中，有的只能用于内联元素中。如果区块元素的用于内联元素中，那么效果就不会显示出来。

1. 区块元素(block)，必须自己独立占一行，例如
2. 内联元素(inline)，自己有多宽就占多宽，同时也与其他的处于同一行中。

内联标签：<sub><sup></p> <p>区块标签：<h2>到<h6><div><p><hr><pre class="brush:php;toolbar:false"><table><ul><li><ol><dl><dt><dd><form></p> <p>描述标签：<b><i>_{^{<width><color></p> <p>语义标签：<p><strong><em><h2>到<h6></p> <p>分区元素用于为元素分组，常用与页面布局。<span>和<div></p> <p>块分区元素<div></div>，元素分组工具，用于内容分层和页面布局，需配合CSS使用</p> <p>行内分区元素<span></span>需配合css和Js才有效果</p> <p> </p> <p>下标字：</p> <p>上标字：</p> <p> </p> <p>ctrl+d删除一整行</p> <p>ctrl+alt+↓复制一整行</p> <p> </p> <p>标题字在不同的浏览器默认字体高度、间距都是不一样，所以会存在兼容性的问题。要使用css来屏蔽这个问题。</p> <p><b/>,在html或者html5中“/”可以省略，但是在xhmtl中是不可以省略的。</p> <p><hr>分隔线元素，创建一条水平线，常用属性为（size、width、align、color）</p> <p><img/>通知浏览器此刻应该向服务器发起一个图片请求，src指定图片的URL,alt属性，如果图片无法显示则显示此文字来替代。</p> <p> </p> <p>html页面中可能用到资源：图片、css、js、另一个页面</p> <p>web开发用到的图片格式</p> <p>bmp:未经压缩的bit图，一般不用于web开发</p> <p>psd：ps的原始文档，支持层，页面中不直接使用</p> <p>tiff：出版印刷</p> <p class="sycode"> <p>raw：太大</p> </p> <p>jpeg：经过压缩的图片，保真度高，色彩丰富，适用于web中的照片，1024*768大压缩到100k甚至更小完全可以接受</p> <p>png：色彩没有jpg丰富，但是透明度支持的好，压缩比例大，适合于图标</p> <p>gif：色彩比较丰富，支持动画效果，也在一定程度支持透明度。</p> <p> </p> <p>链接的表现形式</p> <ol> <li>目标文档为下载资源下载</li> <li>电子邮件链接联系我们</li> <li>返回页面顶部的空链接…</li> <li>链接到javascriptjs功能</li> </ol> <p> </p> <p>页面布局的三种方式：</p> <p>table的使用主要用于显示批量的数据，但是作为页面布局已经过时。</p> <p>div+css现在的主流</p> <p>html5布局标签，未来的趋势</p> <p> </p> <p>蓝色的是内容所占区域，橙色的是间距，绿色的是填充。</p> <p> </p> <p>form表单，用于收集用户的数据，提交给服务器。有两个属性，action是指定表单数据的处理页面，必须是动态页面。还有input type。</p> <p> </p> <p>地址栏url中最多输入字符不能超过1024个字节。<a href="http://www.laitingfm.com" /></a> <a href="https://curl.qcloud.com/kfoLTs9R" /></a> </article> </div> <div class="w310 r"> <a href="https://www.gxlcms.com/server-467421.html" target="_blank"> <img src="http://www.gxlcms.com/Public/aiod/ts.jpg" /></a> <div class="book"> <a href="http://www.gxlcms.com/special/html/" target="_blank" title="html代码教程/参考手册"> <img src="https://img.gxlcms.com/" alt="html代码教程/参考手册" /> <h3>html代码教程/参考手册</h3> </a> </div> <div class="youclmt"> <h3>html代码热搜</h3> </div> <div class="langmubt"> <ul> <li><a href="/htmldaima-351565.html" target="_blank">关于type="file"的input框样式修改小结</a></li><li><a href="/htmldaima-351559.html" target="_blank">HTMLcellpadding与cellspacing属性图文详解</a></li><li><a href="/htmldaima-351555.html" target="_blank">详解HTML编程的标记与文档结构</a></li><li><a href="/htmldaima-351550.html" target="_blank">用DIV遮罩解决鼠标直接勾选checkbox无效的问题</a></li><li><a href="/htmldaima-351547.html" target="_blank">在网页上调用桌面exe程序的简单方法</a></li><li><a href="/htmldaima-351545.html" target="_blank">html借助marquee实现文字左右滚动</a></li><li><a href="/htmldaima-351540.html" target="_blank">关于分割线hr在各浏览器中的差异</a></li><li><a href="/htmldaima-351537.html" target="_blank">a标签的target链接指向iframe的方法</a></li><li><a href="/htmldaima-351533.html" target="_blank">使用overflow:hidden来禁用页面滚动条</a></li><li><a href="/htmldaima-351531.html" target="_blank">使用SWFObject完美解决HTML插入Flash的各浏览器兼容性方案</a></li><li><a href="/htmldaima-351530.html" target="_blank">如何使用图片按钮作为重置(reset)表单按钮</a></li><li><a href="/htmldaima-351528.html" target="_blank">超链接的宽度和高度直接设置不起作用的解决方法</a></li><li><a href="/htmldaima-351525.html" target="_blank">textarea的disabled与readonly属性具体用法介绍</a></li><li><a href="/htmldaima-351521.html" target="_blank">空格在Html中如何表示( 有什么含义)</a></li><li><a href="/htmldaima-351515.html" target="_blank">在js或css后加?v=版本号不让浏览器缓存</a></li><li><a href="/htmldaima-351514.html" target="_blank">块级元素和内联元素及可变元素汇总</a></li><li><a href="/htmldaima-351513.html" target="_blank">HTML的结束标签问题与w3c标准</a></li><li><a href="/htmldaima-351512.html" target="_blank">iframe框架在IE浏览器下将白色背景设为透明色</a></li><li><a href="/htmldaima-351511.html" target="_blank">AdobeBrackets简单使用图文教程</a></li><li><a href="/htmldaima-351505.html" target="_blank">如何去除表单的回车即提交即回车!=提交</a></li><li><a href="/htmldaima-351495.html" target="_blank">Readonly和Disabled之间的微小区别详解</a></li><li><a href="/htmldaima-351494.html" target="_blank">如何设置select只读不可编辑且select的值可传递</a></li><li><a href="/htmldaima-351489.html" target="_blank">html中radio值的获取、赋值、注册事件示例详解</a></li><li><a href="/htmldaima-351482.html" target="_blank">textarea标签大小不可变不能通过鼠标拖动的方式来拖动</a></li><li><a href="/htmldaima-351481.html" target="_blank">HTML中select标签单选多选用法详解</a></li> </ul> </div> <a href="https://curl.qcloud.com/I8w1gZa8" target="_blank"> <img src="http://www.gxlcms.com/ad/tx500x500.jpg" /></a> </div> </div> </div> </div> <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: '2015年10月15日学习html基础笔记_html/css_WEB-ITnose代码块', encode: true //是否转义html标签。默认不开启 }); }); </script> <link rel="stylesheet" type="text/css" href="/kan/css/basezb.css"> <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-ico"><a rel="nofollow" class="qq" id="qqlogin" target="_blank" href="/?s=user-center-qqlogin.html"> QQ </a></div> --> <div class="login-box-form" id="con_login_1"> <form id="loginform" action="/?s=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="/?s=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="/?s=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="/?s=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="/?s=user-center-agreement.html">用户协议</a>及<a rel="nofollow" href="/?s=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> <div id="footer"> <div class="w1200"> <p class="tips_text">本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！ <a href="/?s=gb-show-p-1.html" title="合作方式" target="_blank">合作方式</a></p> <p class="tips_text">Copyright © 2004-2018 https://www.gxlcms.com/. All Rights Reserved.<script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?afb4873a3fbaa95f710a04306bfb4a0b"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <a href="http://beian.miit.gov.cn/" target="_blank">豫ICP备19030742号</a></p> </div> </div> <link rel="stylesheet" href="/Public/del/css/list.css"> </body> </html>}}

内容总结

以上是互联网集市为您收集整理的2015年10月15日学习html基础笔记_html/css_WEB-ITnose全部内容，希望文章能够帮你解决2015年10月15日学习html基础笔记_html/css_WEB-ITnose所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端