javaweb之--html/CSS基础小结
HTML：HTML是标签的集合，至于标签是干什么的，是功能特性的问题，可以参考下面的部分使用方法与菜鸟教程；
CSS：本质上是【选择器+一条/多条声明】，CSS是管元素怎么显示的，也就是设置样式，数据和逻辑则是后台的问题，这就是前后端；CSS选择器等参照W3C-API；
<!DOCTYPE html> <html> <head id="ihead"> <!--访问链接：http://localhost:8080/zhm_servlet/--> <title>MyHtml</title><!--title标签代表当前页面的标题--> <!--<base href="http://www.runoob.com/" target="_blank">--><!--base标签定义所有链接默认的链接地址，容易出问题，一般建议不要用--> <meta name="keywords" content="html练习"> <meta name="author" content="zhenghm"><!--meta是html页面的元数据，不显示，提供检索、描述html文档作用--> <link rel="stylesheet" type="text/css" href="html.css"><!--link定义了文档与外部资源的关系，用rel标记关系种类--> <style type="text/css"> p.realLangrage{font-style: italic} </style><!--style标签用于设置css格式，注意属性为text/css，样式分为三种方式：内联样式（元素中编写）、内部样式表（head标签中使用style标签）、外部引用（使用link标签）--> <script>/*script用于定义客户端脚本*/ function changeColor() { var eColor=document.getElementById("titleName"); eColor.innerText = "玩一玩"; } function changeColor2() { var eColor=document.getElementById("titleName"); eColor.innerText = "标题格式"; } </script><!--script标签用于设置js，获取标签内内容的方法innerText--> <noscript>您的浏览器不支持</noscript><!--noscript用于不支持客户端脚本的时候的显示--> </head> <body id="ibody"> <div style="width: 1535px; background: aqua;height: 700px"><!--这是一种布局方式，用div布局--><!--color等颜色设置需要看教程，暂时不用--> <h4 id="titleName" onmouseover="changeColor()" onmouseout="changeColor2()"style="width: 1535px";>标题格式</h4><!--h1-h5标签代表各标题格式--> <!--html元素定义：以开始标签起始，以结束标签终止，可拥有属性，所有的标签都需要注意闭合--> <!--html元素属性：在元素中添加附属信息，一般写在开始标签中，以键值对的形式使用，常见的是全局属性--> <div style="width: 535px;background: #ffffff;float: left;height: 620px"> <p class="realLangrage">业 <br> 精于勤<!-- 是字符实体，用各种表达式替代不同的字符显示出来--> <br> 荒于嬉<br> </p><!--p标签中使用br标签可以在不产生新段落的情况下进行折行--> <p>p标签：段落 <a class="aa" href="http://www.runoob.com/tags/ref-standardattributes.html" target="_blank">菜鸟教程属性/标签手册</a> </p><!--p标签代表段落--> <hr><!--定义水平线--> <p><!--链接用途--> <a class="aa" href="https://news.cnblogs.com" target="_blank"><img src="favicon.ico" height="20" width="20"></a><!--img标签定义html图像--><!--为图片添加超链接--> <a class="aa" href="https://www.cnblogs.com/silence-fire/">a标签：博客链接</a><!--a标签代表链接，href代表链接地址--> <a class="aa" href="#author"><small>作者</small></a><!--a标签的第二种用途，跳转到指定id的位置，可用于书签--><!--a标签的第三种用途，跳转到指定网址的指定id的位置--> <a class="aa" href="https://www.cnblogs.com/silence-fire/#footer" target="_top"><small>作者博客指定位置</small></a><!--a标签的target属性决定了用何种方式打开连接，本页，新页....--> <a class="aa" href="http://www.runoob.com/html/html-links.html#div-comment-24805">用链接发送电子邮件-待研究</a> <a class="aa" href="http://www.runoob.com/css/css-tutorial.html"><img src="favicon_find.ico" height="20" width="20"></a><!--利用模拟请求方式，不需要点击按钮，直接访问拿到相应页面--> <a class="aa" href="http://www.runoob.com/html/html-url.html">URL定义的规则</a> <!--不过有点好奇，为什么菜鸟里的页面全都加载了而不是只加载那一部分--> </p> <iframe src="http://www.runoob.com/tags/ref-standardattributes.html" name="frame_a" width="535px" height="200px" frameborder="0"> <!--使用框架，可以在网页中浏览不止一个网页--> </iframe> <p> <a class="aa" href="https://news.cnblogs.com/" target="frame_a">博客园新闻</a><!--用target方式，可以直接在框架中访问相应网址--> <a class="aa" href="http://www.java1234.com/" target="frame_a">java1234</a> <a class="aa" href="http://www.runoob.com/html/html-quicklist.html" target="frame_a">菜鸟教程html基础速查列表</a> </p> </div> <div style="float: left;width: 1000px;height: 620px;background: #cdffcb"><!--div属于块级元素，也就是新加入就会换行，同样特性的有：<h1><p><ul><table>--> <table id="htmltable" border="1" style="clear: both"><!--clear属性，禁止哪面可以浮动显示，both为两面都不能浮动，所以div会显示在下方--> <caption><b>表格模块</b></caption><!--设置表格的标题--> <colgroup> <col span="1" style="color: black;background: aqua"> </colgroup><!--colgroup标签组合表格的列，col则制定colgroup中每一列的属性，即可以对多个列同时进行样式操作--> <tr><!--tr标签代表行--> <th>基础</th><!--th表示表格表头--> <td id="a1">基础标签</td><!--td标签代表列--> <td id="a2">元素</td> <td id="a3">属性</td> <td>标题</td> <td>段落</td> <td>文本格式化</td> <td>链接</td> <td>头部</td> <td>CSS</td> <td>图像</td> <td><a href="#blocks">区块</a></td> <td><a href="#author_info">浮动</a></td><!--区块浮动等框架，目前使用固定长度来限制，自动方式不太对--> </tr> <tr> <!--表格中存在表格页眉thead/表格主体tbody/表格页脚tfoot，我觉得是用来布置表格中各行的位置的，先后展示顺序为：页眉-主体-页脚,这三种标签必须直接接触table标签--> <th><a href="#htmltable" style="color: black;text-decoration: none">表格</a></th><!--设置表格北京和文字的颜色，设置链接样式（无特殊颜色且无下划线）--> </tr> </table> <span id="blocks"><i><small>表格说明：</small></i></span> <span><i><small>该表格用于链接特定主题位置</small></i></span><!--<span>属于内联元素，也就是新建的不会换行，同样的元素包含：<b><td><a><img>--> <div style="float: left"><!--这里用到了滑动让两个div并列显示--> <ul> <li>无序列表1</li><!--无序列表,style属性可以用CSS方式定义不同符号类型--> <li> <ol> <li>嵌套列表1</li><!--无序列表和有序列表之间可以互相嵌套--> <li>嵌套列表2</li> </ol> </li> <li>无序列表3</li> </ul> </div> <div style="float: left;"> <ol type="I"> <li>有序列表1</li><!--有序列表，type属性可以定义序号类型--> <li>有序列表2</li> <li>有序列表3</li> </ol> </div> <div style="clear: both"> <form action="18838283086@139.com"><!--表单练习:文本域、下拉、单选、复选--><!--action属性代表将该表单的信息提交到何处--><!--可发送电子邮件--> <fieldset><!--fieldset是让表单带有边框--> <legend>文本域、下拉、单选、复选</legend><!--legend是表单边框的标题--> 用户名：<input type="text" name="name"> 密码：<input type="password" name="password"><!--type类型不同，数据种类不同，password输入的值不会显示出来--> <input type="submit" value="提交表单"><!--type=submit用于提交表单--> <input type="reset"><!--reset为重置信息--> <input type="button" value="点一点"><!--按钮的声明--> <br> <input type="radio" name="sex" value="0">man<!--type=radio是单选--> <input type="radio" name="sex" value="1">woman<!--添加checked属性则默认选中--> <br> <input type="checkbox" name="sport" value="0">football<!--type=checkout是复选--> <input type="checkbox" name="sport" value="1">basketball<!--添加checked属性则默认选中--> <input type="checkbox" name="sport" value="2">xxxball <br> <select name="车"><!--下拉框--> <option value="0">奔驰</option><!--添加属性“selected”会默认选择该项--> <option value="1">三菱</option><!--option定义选项--> <option value="2">长安</option> <option value="3">福特</option> </select> <br> <textarea>多行文本框</textarea> <br> <select><!--定义选项组--> <optgroup label="汽车"> <option value="福特">Volvo</option> <option value="本田">Saab</option> </optgroup> <optgroup label="乐器"> <option value="钢琴">Mercedes</option> <option value="笛子">Audi</option> </optgroup> </select> <br> <input list="browsers"> <datalist id="browsers"><!--输入框预定义信息--> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <br> </fieldset> </form> <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0<!--output标签定义输出结果--> <input type="range" id="a" value="50">100 +<input type="number" id="b" value="50"> =<output name="x" for="a b"></output> </form> </div> </div> <div id="author_info" style="clear: both;text-align: center"><!--p标签中使用CSS的浮动float属性--> <img src="picture1.jpg" alt="Im super Shuai!" width="20" height="16"><!--alt属性用于替换图片的文本,width和height可以用于指定图片高度和宽度（等比例缩小）--> <!--<img src="http://www.runoob.com/images/pulpit.jpg">--><!--img图片还可以引用网上的图片地址--> <!--还有一种img的map、area属性，可以一张图里添加多个链接，但是不知道怎么获得相应的像素点，用ps是可以的--> <i id="author">author:silence_fire</i><!--i标签代表文本格式化中的[斜体]，其他查看手册：文本格式标签--> <b id="date">date:2018.8.7</b><!--b标签代表文本格式化中的[粗体]，其他查看手册：文本格式标签--> <style> #author{font-family: Monaco}; </style> </div> </div> </body> </html>
/*text-align代表居中对齐*/ #titleName{background: #298abf;color: aqua;text-align: center;font-family: 微软雅黑;size: A4} /*CSS练习--创建方式：html中使用style标签内部嵌套，html中使用元素中的style属性，外部链接CSS文件*/ /*说白了CSS是管元素怎么显示的，也就是设置样式，至于数据和逻辑则是后台的问题，这就是前后端*/ /*样式设置依赖html的各种属性和标签，也就是选择器的产生*/ /*id选择器*/ #a1{color: #7acfff} /*class选择器，与id选择器的不同之处就是可以在多处使用，可以在标签后使用，结果为该标签a中class为aa的元素有该种样式*/ a.aa{color: black;background: white} /*CSS盒子模型：*/ /*分组选择器*/ /*嵌套选择器*/ /*组合方式：后代选择器、子元素选择器、相邻兄弟选择器、普通兄弟选择器*/
