1 Html其他标签1.1 html的表单标签1.1.1 表单项—input(重点)1.1.2 表单项—下拉框(重点)1.1.3 表单项—文本域1.1.4 按钮标签—了解1.2 Html的div标签2 CSS2.1 css概述2.2 css的语法规则2.3 css与html结合的3种方式2.4 css的基本选择器(重点)2.5 css的扩展选择器(知道)2.6 css的属性(知道)2.7 css对html标签的转换操作(了解)2.8 css浮动效果(了解)2.9 CSS盒子模型(框模型)3 用户注册页面的案例3.1 需求3.2 技术分析3.3 案例的代码实现 1 Html其他标签 1.1 html的表单标签HTML 表单用于搜集不同类型的用户输入。简单记就是可以让用户输入信息,获取到这些信息并提交到指定位置;使用标签表示表单;action:用于指定表单提交的路径。(就是表单的数据交给谁)enctype:用于指定表单的提交编码格式。(后面使用,用于文件上传)method:用于指定表达的提交方式。(后面使用,用于在服务器中获取表单的数据及乱码处理) 1.1.1 表单项—input(重点)在表单中,可以收集用户信息的具体标签。例如:输入框,下拉框,多选框,单选框。在表单项中使用表示普通的表单项。具体类型由input标签的type属性决定。type=”具体值”;具体值的可用范围:button 代表一个按钮。(需要我们自己绑定事件才有效果)checkbox 代表一个多选框。file 代表一个文件上传项。hidden 代表一个隐藏域,可以保存我们程序员需要使用的数据。image 代表图片提交按钮。password 代表一个密码框。radio 代表一个单选框。注意:多个单选框的name属性值必须一致,才会认为是一组。reset 重置按钮。submit 提交按钮。(提交效果与image一样,样式不如image好看而已)text 普通文本。扩展:type=”date” 可以自动添加一个日期插件。(谷歌浏览器可以使用)所有表单项的通用属性:1:name属性,用于将来表单提交的时候,作为参数名使用。必须加,如果不加,这个表单项的值将不会提交。2:value属性,用于给表单项规定一个默认值。(多选框和单选框必加)3:disabled=”disabled” 可以控制这个 表单项无效,无效的表单项不会提交数据。4:checked=”checked” 可以让单选框或多选框默认选中。 1.1.2 表单项—下拉框(重点)可以让用户选择一个固定的信息。使用标签表示,里面使用标签表示下拉选项。格式: <select name="xueLi"> <option value="">------请选择------</option> <option value="bs" selected="selected">------博士------</option> <option value="ss">------硕士------</option> <option value="bk">------本科------</option> </select> 如果里面没有value提交的时候就直接提交元素体,写上value提交的时候就提交value值。可选择的属性:multiple=”multiple” 规定可选择多个选项。(使用的时候按住ctrl可以多选)size =”数字” 规定下拉列表中可见选项的数目。 1.1.3 表单项—文本域可以输入很多信息。使用表示文本域。<br />常用属性:<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/986301/1616733591683-a693a2db-5ee0-469f-933d-ebd86ed1bf6d.png#align=left&display=inline&height=85&margin=%5Bobject%20Object%5D&name=image.png&originHeight=85&originWidth=464&size=4815&status=done&style=none&width=464" alt="image.png"> <a name="8m8Qa"></a></p> <h3 id="cr88jj"><a name="cr88jj" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1.1.4 按钮标签—了解</h3><p>直接使用button标签,可以也可以出现一个按钮标签,需要在按钮的元素体中添加文字,才会显示到按钮上。<br /><button >自定义按钮</button> <a name="z2Lma"></a></p> <h2 id="6c86jq"><a name="6c86jq" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1.2 Html的div标签</h2><p>div是html的块标签,块的区域可大可小,完全取决于我们自定义,因此通常需要配合css样式才有效果。 <a name="H6UmO"></a></p> <h1 id="cdgc8v"><a name="cdgc8v" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2 CSS</h1><p><a name="kfoTa"></a></p> <h2 id="axe39p"><a name="axe39p" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.1 css概述</h2><p>css是层叠样式表(英文全称:Cascading Style Sheets)。<br />可以对html页面中的标签进行统一的样式控制,或个性化控制,也可以配合各种脚本语言,对html的样式进行控制。 <a name="f4wIs"></a></p> <h2 id="a9ddjz"><a name="a9ddjz" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.2 css的语法规则</h2><p>基本格式:</p> <p>选择器{<br />属性名1:属性值1;<br />属性名2:属性值2;<br />…<br />}</p> <p>选择器的作用就是选中页面上的html标签,让这些选中的标签使用我们编写的样式。<br />属性名是css中固定的一堆具体名称。<br />属性值也是css固定好的一些具体的值。</p> <p>注意事项:<br />1:选择器严格区分大小写。<br />2:属性名和属性值不区分大小写。<br />3:属性名和属性值之间使用冒号分割,多个键值对之间使用分号分割,最后一个键值对可以省略分号,,建议写上。<br />4:属性名都是直接写,属性值如果本身代表的是一个值,由多个单词组成时,必须加引号,其他情况不能加引号。<br />5:css虽然也是一个编程语言,但是需要配合html才能执行,不能独立运行。 <a name="8qU5I"></a></p> <h2 id="e30u79"><a name="e30u79" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.3 css与html结合的3种方式</h2><p>1: 标签内样式<br />在html的开头标签中,直接使用style=”属性名1:属性值1;属性名2:属性值2;”<br />2: 文档内样式<br />在head标签中,使用style标签,即可独立的编写样式<br /><style><br />选择器{<br />属性名1:属性值1;<br />属性名2:属性值2;<br />…<br />}<br /></style><br />3: 外部样式<br />(1):单独编写一个后缀名是.css的文件,在文件内,直接编写css代码即可。<br />例如:<br />选择器{<br />属性名1:属性值1;<br />属性名2:属性值2;<br />…<br />}<br />(2):在html页面中使用<link rel="stylesheet" href="css文件位置" />标签引入已经编写好的css文件到页面中。</p> <p>注意事项:<br />如果3种方式对同一个标签的样式控制出现冲突的时候,以就近原则为主。<br />标签内样式 > 文档内样式 > 外部样式 <a name="ait0a"></a></p> <h2 id="ewfffm"><a name="ewfffm" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.4 css的基本选择器(重点)</h2><p>基本选择器有:<br />1:id选择器(不常用,因为以后用的JavaScript的原因,我们一般需要id唯一)<br />#ID的值{<br />属性名1:属性值1;<br />属性名2:属性值2;<br />…<br />}<br />2:标签选择器(元素选择器)<br />Html的标签名{<br />属性名1:属性值1;<br />属性名2:属性值2;<br />…<br />}<br />3:类选择器(常用)<br />.class的属性值{<br />属性名1:属性值1;<br />属性名2:属性值2;<br />…<br />} <a name="zN1AZ"></a></p> <h2 id="6clfv1"><a name="6clfv1" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.5 css的扩展选择器(知道)</h2><p>1:根据标签的属性选择信息<br />基本选择器[标签的属性名=属性值]{<br />属性名1:属性值1;<br />属性名2:属性值2;<br />…<br />}<br />2:根据父标签下选择子标签<br />基本选择器A 其他选择器B{<br />属性名1:属性值1;<br />属性名2:属性值2;<br />}<br />意思是:在A选择器的内部选择B <a name="BSvcS"></a></p> <h2 id="d5izxn"><a name="d5izxn" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.6 css的属性(知道)</h2><p>常用属性:<br />背景相关的:</p> <table> <thead> <tr> <th><a href="">background-color</a></th> <th>设置元素的背景颜色。</th> </tr> </thead> <tbody> <tr> <td><a href="">background</a></td> <td>在一个声明中设置所有的背景属性。</td> </tr> </tbody> </table> <p>文本相关的:</p> <table> <thead> <tr> <th><a href="">color</a></th> <th>设置文本的颜色。</th> </tr> </thead> <tbody> <tr> <td><a href="">text-align</a></td> <td>规定文本的水平对齐方式。</td> </tr> </tbody> </table> <p>字体相关的:</p> <table> <thead> <tr> <th><a href="">font-family</a></th> <th>规定文本的字体系列。</th> </tr> </thead> <tbody> <tr> <td><a href="">font-size</a></td> <td>规定文本的字体尺寸。</td> </tr> </tbody> </table> <p>边框相关的:</p> <table> <thead> <tr> <th><a href="">border</a></th> <th>在一个声明中设置所有的边框属性。</th> </tr> </thead> <tbody> <tr> <td></td> </tr> </tbody> </table> <p>尺寸相关的:</p> <table> <thead> <tr> <th><a href="">width</a></th> <th>设置元素的宽度。</th> </tr> </thead> <tbody> <tr> <td><a href="">height</a></td> <td>设置元素高度。</td> </tr> </tbody> </table> <p>特殊的用法:<br />Backgroud:url(“图片路径”) 可以使用图片作为背景<br />border:像素 线型 颜色 <a name="rbfoT"></a></p> <h2 id="3bwt01"><a name="3bwt01" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.7 css对html标签的转换操作(了解)</h2><p>css中的display属性,可以将html的标签进行行与块的转换,也可以让标签隐藏。<br />取值:<br />block 转成块<br />inline 转成行<br />none 隐藏这个元素 <a name="x0Doz"></a></p> <h2 id="8d9maj"><a name="8d9maj" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.8 css浮动效果(了解)</h2><p>浮动可以让元素从原始层次浮动到上一个层次,浮动的时候,也可以控制左右上下的元素等。<br />使用css的float属性名可以完成浮动效果;</p> <pre><code class="lang-html">#d2{ /*让div2向右侧浮动*/ float: right; /*不希望我的右侧有内容*/ clear: right; } </code></pre> <p><a name="hzOA9"></a></p> <h2 id="6vnf32"><a name="6vnf32" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.9 CSS盒子模型(框模型)</h2><p><img src="https://cdn.nlark.com/yuque/0/2021/png/986301/1616948596861-b534fd27-7062-4dd4-b051-91982db2bb97.png#align=left&display=inline&height=458&margin=%5Bobject%20Object%5D&name=image.png&originHeight=458&originWidth=444&size=16031&status=done&style=none&width=444" alt="image.png"><br />可以通过padding-top,padding-left….控制具体方向的内边距,同理也可以控制外边距; <a name="QvDT7"></a></p> <h1 id="b38449"><a name="b38449" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3 用户注册页面的案例</h1><p><a name="Nfizx"></a></p> <h2 id="5kgrwy"><a name="5kgrwy" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.1 需求</h2><p>写一个表单页面,使用css样式控制,具体的效果 <a name="FnlEV"></a></p> <h2 id="7wbmrp"><a name="7wbmrp" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.2 技术分析</h2><p>1:使用div作为最大的背景图片;<br />2:在大div中,写一个小div,作为表单的背景色;需要使用盒子模型调整距离<br />3:在小div中写form表单;<br />4:将表单的每一个表单项添加到表格的td中; <a name="3scSd"></a></p> <h2 id="e40bdq"><a name="e40bdq" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.3 案例的代码实现</h2><pre><code class="lang-html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .zuo{ text-align: right; } #da{ background: url("../img/regist_bg.jpg"); width: 1300px; height: 600px; padding-top: 150px; padding-left: 450px; } #xiao{ background-color: white; width: 400px; height: 300px; border: 5px solid chocolate; } </style> </head> <body> <div id="da"> <div id="xiao"> <table> <form> <tr> <td colspan="2">会员注册 USER REGISTER</td> </tr> <tr> <td class="zuo">用户名</td> <td><input type="text" name="username" value="名字是啥" /> </td> </tr> <tr> <td class="zuo">密码</td> <td><input type="password" name="password" /> </td> </tr> <tr> <td class="zuo">确认密码</td> <td><input type="password" name="repassword" /> </td> </tr> <tr> <td class="zuo">邮箱</td> <td><input type="text" name="email" value="填个邮箱吧"/> </td> </tr> <tr> <td class="zuo">真实姓名</td> <td><input type="text" name="name" /> </td> </tr> <tr> <td class="zuo">性别</td> <td><input type="radio" name="sex" value="man"/>男 <input type="radio" name="sex" value="woman"/>女 <input type="radio" name="sex" value="nc" checked="checked"/>你猜 </td> </tr> <tr> <td class="zuo">验证码</td> <td><input type="text" name="code" /><img src="../img/captcha.jhtml" /> </td> </tr> <tr> <td colspan="2" style="padding-left: 50px;"> <input type="submit" value="提交" /> </td> </tr> </form> </table> </div> </div> </body> </html> </code></pre>