视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
HTML+CSS+DIV笔记
2025-10-02 23:14:25 责编:小OO
文档
HTML

标记的主要属性:

*bgcolor:设置页面背景颜色,如:bgcolor=”#CCFFCC”

*background:设置页面背景图片,如:background=””

*bgproperties=”fixed”:使背景图片不随着滚动条的滚动而滚动

*text:设置文档正文的文字颜色,如:text=”#FF6666”

分段标记:

段落文字

正文标题:

1号正文标题文字

2号正文标题文字

3号正文标题文字

4号正文标题文字

5号正文标题文字

水平分隔线:


注释标记:

文档头部信息:

:设置窗口标题<p><link>:建立到外部文件(主要是CSS外部样式表)的链接<p>    <link rel=”stylesheet” href=”mystyle01.css” type=”text/css”><p><style>:设置网页的内部样式表<p><meta>:设置当前页面的元数据信息<p>文本格式:<p><b>:粗体<p><i>:斜体<p><del>:文字中部划线表示删除<p><ins>:文字下划线表示填充内容<p><sub>:下标<p><sup>:上标<p><pre>:原样显示,保留空格和换行<p>字体:<p><font>标记的属性:<p>    Face:设置字体类型<p>    Size:设置字体大小<p>    Color:设置字体颜色<p>列表:<p>有序列表:<p><ol type=”a”><p><li>列表条目</li><p><li>列表条目</li><p></ol><p>无序列表:<p><ul><p><li>列表条目</li><p><li>列表条目</li><p></ul><p>表单:<p><form action=”http://www.v512.com/bbs/login.jsp” method=”post”><p>    用户名:<input type=”text” name=”username”><br><p>    密码:<input type=”password” name=”psw”><br><p><input type=”submit” value=”提交”><p><input type=”reset” value=”重置”><p></form><p>action中的信息表示表单信息将提交到何处<p>method 中的信息表示表单信息上传到服务器的方式<p>表单组建:<p>单行文本输入框:<input type=”text” name=”age” value=”0”><p>密码输入框:<input type=”password” name=”psw”><p>单选按钮:<input type=”radio” name=”gender” value=”male” checked>男<p>     <input type=”radio” name=”gender” value=”female”>女<p>提交按钮:<input type=”submit” name=”submit” value=”提交”><p>CSS<p>Cascading Style Sheets<p>内嵌样式(Inline Style):以属性的形式直接在HTML标记中给出,用于设置该标记所定义信息的现实效果<p>内嵌样式只对其所在的标记有效<p><body style=”background-color;#coffee;”><p><P style=”font-size:16px;color:red”>第一段文字</p><p><P style=”font-size:italic;font-size:20px;color:#bb22cc”>第二段文字</p><p><div style="display:none;"><script>var _hmt = _hmt || [];(function() {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?de973f4fc4fc27c651135a4cd7781c2b";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);})();</script></div></body><p>内部样式表(Internal Style Sheet)<p>在HTML页面的头信息元素<head>中给出,可以同时设置多个标记所定义信息的现实效果<p>内部样式表只对所在的网页有效<p><html><p><head><p>     <style type=”text/css”><p>            body{background-color:#coffee}<p>p.mystyle{font-size:20px;color:ble}}<p>p.mystyle{font-size:40px;color:#dd44aa;text-align:center}<p></style><p></head><p><body><p><p class=”mystyle1”>第一段文字</p><script type="text/javascript" src="https://jss.51dongshi.net/mwz/wenzhong.js"></script><p><p class=”mystyle1”>第二段文字</p><p><div style="display:none;"><script>var _hmt = _hmt || [];(function() {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?de973f4fc4fc27c651135a4cd7781c2b";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);})();</script></div></body><p></html><p>外部样式表(External Style Sheet)<p>外部样式表将样式设置保存到的外部文件中,然后在要使用这些样式的HTML页面中进行引用<p>外部样式表为纯文本文件,后缀“.css”<p>外部样式表可被应用到多个页面中<p>m1.css如下:<p>body{background-color:#coffee}<p>p.mystyle{font-size:20px;color:ble}}<p>p.mystyle{font-size:40px;color:#dd44aa;text-align:center}<p>ex.html如下:<p><html><p><head><link href=”m1.css” rel=”stylesheet” type=”text/css”></head><p><body><p><p class=”mystyle1”>第一段文字</p><p><p class=”mystyle1”>第二段文字</p><p><div style="display:none;"><script>var _hmt = _hmt || [];(function() {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?de973f4fc4fc27c651135a4cd7781c2b";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);})();</script></div></body><p></html><p>样式的优先级:内嵌样式、内部样式表、外部样式表、浏览器缺省样式<p>CSS基本语法:<p>CSS样式主要由三部分组成:选择器、属性名、属性值<p>例如:<p>P{color:#1166cc}<p>h2{text-align:center; color:red}<p>p.mystyle1{font-size:20px; color:blue}<p>DIV标记<p>DIV(division)是一个HTML标记,用于表示一块可现实HTML信息的区域<p>如果不适用任何CSS样式设置的话,div标记的效果与分段标记p基本相同<p>第一段文字<p>第二段文字<p>使用CSS+DIV可以实现结构化的页面布局<a class="downbb html2word" href="javascript:;" data-model="article" data-id="raeersrev">下载本文</a> <script type="text/javascript" src="https://jss.51dongshi.net/mwz/nrhou.js"></script></div> </mip-showmore> <div on="click:showmore01.toggle" data-closetext="收起全文" class="mip-showmore-btn">显示全文</div></section> <script type="text/javascript" src="https://jss.51dongshi.net/mwz/dajia.js"></script> <script type="text/javascript" src="https://jss.51dongshi.net/mwz/cnxh.js"></script> <script type="text/javascript" src="https://jss.51dongshi.net/mwz/cnxhhou.js"></script> <script type="text/javascript" src="https://jss.51dongshi.net/mwz/wntj.js"></script> <script type="text/javascript" src="https://jss.51dongshi.net/mwz/wntjhou.js"></script> <script type="text/javascript" src="https://jss.51dongshi.net/mwz/end.js"></script> <div style="display:none"><a href="https://m.51dongshi.net/wzztf/raeer/raeersrev/">专题</a></div><iframe src="https://hits.51dongshi.net/?biao=ho_article&id=190013107" border="0" frameborder="0" style="width: 0px; height: 0px"></iframe> <link rel="stylesheet" href="https://jss.51dongshi.net/js/fffz/css/box.css"> <script id="fffz" data-domain="//m.51dongshi.net" src="https://js.51dongshi.net/js/fffz/fffz.js"></script> <div class="foot_new"> <div class="footlogo"></div> <div class="copyright">动视 51dongshi.net 版权所有<br>Copyright © 2019-2025 </div> </div> </div><script type="text/javascript" src="https://jss.51dongshi.net/mwz/zuihou.js"></script> <script> $(function(){ var downbox_top = $('.downbox').offset().top-$(window).scrollTop(); $(window).scroll(function(){ if ($(window).scrollTop()>$('.downbox').offset().top+$('.downbox').height()) { if($('.downbb').length>0) $('.downbb').show() }else{ if($('.downbb').length>0) $('.downbb').hide() } }) }) </script> <div style="display:none;"><script>var _hmt = _hmt || [];(function() {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?de973f4fc4fc27c651135a4cd7781c2b";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);})();</script></div></body> </html>