1、一、HTML的常用标签表单标签作用：可以提交不同的数据到服务器标签：<form></form>:表示表单的范围【父标签】 主要作用：用于采集用户信息 子标签的分类： 表单标签：包含数据提交服务器地址、提交方式【get和post】 表单域：用于采集用户信息【姓名，密码，邮箱，上传文件。。。。。】 表单按钮：提交按钮·，复原按钮【面试题】get和post的区别a.get请求地址栏中会携带页面中所有的信息，post中不会【http请求】b.get请求安全性低，post相对较高c.get请求效率高，post相对较低d.get请求对数据的大小限制，而post没有任何限制 属性： action：提交到服务器的地址【#】 method：提交采用的方式，【get和post】 enctype：很少用，做文件上传的时候需要设置这个属性使用method指定的方式，提交到action表示的服务器<input />:表示输入项，可以输入内容【子标签】 type:输入内容的类型 普通输入项：type="text" 密码输入项：type=“password” 单项输入项：type="radio" 多项输入项：type="checkbox" 文件输入项：type="file" 邮箱输入项：type="email" name:用于提交 value:标记【值】 checked:checked= “checked“表示默认选中 重置按钮：type=“reset” 提交按钮：type="submit" 普通按钮：type="button"<select></select>:下拉输入项【年份，城市的选择】【子标签】 <option></option>:select标签的子标签，表示可以选择的选项 name:名称 value:值 selected="selected"<textarea></textarea> ：文本域【子标签】 cols:列 rows:行例题1、<body> <form action="index.html" method="post"> <!--普通文本输入项--> 手机号码：<input type="text" placeholder="请输入手机号码" name="phone" /><br /> <!--密码输入项--> 创建密码：<input type="password" placeholder="请输入密码" name="pwd" /><br /> 姓 名：<input type="text" placeholder="请输入姓名" /><br /> <!--单项输入项--> 性 别：<input type="radio" name="sex" value="man" />男 <input type="radio" name="sex" value="woman" />女<br /> <!--多项输入项--> 爱 好:<input type="checkbox" name="hobby" value="l"/>篮球 <input type="checkbox" name="hobby" value="z" />足球 <input type="checkbox" name="hobby" value="p" />排球 <input type="checkbox" name="hobby" value="pp"/>乒乓球 <input type="checkbox" name="hobby" value="b"/>棒球<br /> <!--文件输入项--> 上传头像：<input type="file" /><br /> <!--下拉输入框select--> 出生年月：<select name="birth"> <option>1988</option> <option>1989</option> <option>1990</option> <option>1991</option> <option>1992</option> <option>1993</option> <option>1994</option> </select> <br /> 自我描述：<textarea cols="30" rows="5" name="des"></textarea><br /> <!--提交按钮--> <input type="submit" value="注册" /> <!--重置按钮--> <input type="reset" value="重置" /> </form> </body>2、 <!--了解--> <!--邮箱输入项--> 邮 箱：<input type="email" placeholder="请输入邮箱" /><br /> <!--隐藏域--> <!--隐藏域的值是固定的，可以存在于代码中，但是在界面中不显示--> <input type="hidden" name="id" value="245" /><br /> <!--时间输入项--> <input type="date" name="date" /><br /> <!--颜色输入项--> <input type="color" name="color" /><br /><br /> <!--进度条--> <input type="range" name="range" max="100" min="0" value="10"/>头标签<head><title></title> :指定浏览器标题栏显示的内容<base></base>:设置超链接的基本位置，可以统一设置超链接的打开方式<meta></meta>:设置和页面相关的一些信息 name：关键字 content:内容 charset:编码格式<link></link>:一般用于引入外部文件【css中】 <head> <!--通过关键字进行搜索--> <meta charset="UTF-8" name="keywords" content="千锋，it"> <!--当前页面经过3秒之后会重新刷新，跳转到url指定的页面 <meta http-equiv="refresh" content="3;url=http://www.baidu.com"> --> <title>当前网页的标题</title> <!--可以设置当前页面中的所有的信息--> <base target="_blank" /> </head> <body> <a href="formDemo01.html">超链接一</a> </body>框架标签<frameset></frameset>：划分规则【父标签】 rows:按照行进行划分 cols:：按照列进行划分<frame />:显示具体的页面【子标签】注意：frameset标签不能使用在body中，也不能使用body的外面，一旦使用了框架标签之后，则需要删除body标签【违背了规范，很少使用】<!--列分 <frameset cols="20%,50%,30%"> <frame src="formDemo01.html"/> <frame src="formDemo02.html"/> <frame src="formPracticeDemo.html"/> </frameset>--> <!--行分 <frameset rows="20%,50%,30%"> <frame src="formDemo01.html"/> <frame src="formDemo02.html"/> <frame src="formPracticeDemo.html"/> </frameset>--> <!--混合分--> <frameset rows="20%,*"> <frame src="formDemo01.html"/> <frameset cols="40%,*"> <frame src="formDemo02.html"/> <frame src="formPracticeDemo.html"/> </frameset> </frameset>css的核心基础概念CSS；Cascading Style Sheet,层叠样式表作用;用于控制网页样式并允许将样式信息和网页分离的一种标记性语言层叠：使用不同的添加方式为同一个标签设置不同的样式，最后将所有的样式叠加到一起，共同作用域当前标签传统html的缺陷： a.维护困难【为了修改某个标签需要花费大量的时间】 b.标签不足【文字间距，段落缩进办不到】 c.网页过“胖” d.定位困难语法规则三要素：object,name,value用同样的方式描述网页标题{ 字体：宋体; 字号：15px; 颜色：红色; 装饰：下划线;}h2{ font-family:宋体; font-size:15px; color：red; text-decoration:underline;}css三要素组成：对象，属性和值在CSS的3个组成中，对象时最重要的，他指定了对哪些网页元素进行设置样式，在CSS中称为选择器选择器标签名称选择器p h2<style> p{ color:red; font-size:20px; }</style>类选择器使用场景：标签名称选择器一旦声明之后，那么页面中所有相关的标签全部都会随着发生改变，但是，如果其中的某个标签想显示的不同，需要使用类选择器说明：类名自定义，只要是一个合法的标识符即可<head> <meta charset="UTF-8"> <title></title> <style> /*注意：类选择器不会自动作用于html的标签，需要手动的设置*/ .blue{ color:blue; font-size:20px; } .special{ font-style:italic; } </style> </head> <body> <!--同一个类选择器可以同时作用于多个标签--> <p class="blue">aaabbbbbbbbxcccccc</p> <!--多个类选择器可以同时作用于同一个标签，使用空格隔开--> <p class="blue special">古诗词</p> </body>ID选择器和类选择器的用法基本相同，区别在于：最好在同一个页面中只使用一次，因此针对性更强说明：id名称是一个自定义的标识符即可 <head> <style> #bold{ font-weight: bold; /*设置文字粗体*/background-color: yellow; text-indent: 2em; /*首行缩进*/ } #color{ color: red;/*设置文字颜色*/ } </style> </head> <body> <p id="bold">轻轻地我走了</p> <p id="color">正如我轻轻的来</p> <!--一个id最好只作用于一个标签，将多个id作用于同一个标签在id选择器中是完全错误的语法--> <!--定义的id选择器不只是为了在css中使用，在js中也需要使用，其中有一个函数getElementById()，通过一个id来获取对应的标签元素 </body>属性选择器和包含选择器（了解）属性选择器选择器[属性名]{ 属性名称1：值1； 属性名称2：值2； }选择器[属性名="属性值"]{ 属性名称1：值1； 属性名称2：值2； }/*name是p标签中的一个属性*/ p[name]{ /*font-family: "微软雅黑" arial "arial black";*/ text-decoration: overline; } p[name="good"]{ text-decoration: underline; }<p name="good">“吹面不寒杨柳风”<p name="bbbb">雨是最寻常的，<p name="aaa">天上的风筝渐渐多了包含选择器： 父子标签，先辈和后辈标签 先辈选择器 后辈选择器 查找直接子标签 父标签选择器>子标签选择器/*父标签的id值>子标签的标签名称*/ /*父标签的id值>子标签的标签名称*/ #box>span{ border: dashed 5px blue; }<div id="box"> <span>春天像刚落地的娃娃，从头到脚都是新的，它生长着。</span> </div>组合选择器和伪类选择器组合选择器：选择器1，选择器2，。。。。{}伪类选择器类选择器：特定的设置{}说明：特定的设置： hover【鼠标悬浮】before after first-letter first-line/*组合选择器*/ div,p,span{ } /*伪类选择器*//*鼠标悬浮选择器*/ #first:hover{ /*此处的first表示id选择器的名称*/ color: blue; font-size: 26px; } /*添加头部*/ #first:before{ content: "这是朱自清的《春》"; } /*添加尾部*/ #first:after{ content: "是一个尾部"; } /*设置第一个字符的样式*/ #first:first-letter{ font-size: 40px; } /*设置第一行字符的样式*/ #first:first-line{ color: purple; }<p id="first">盼望着，盼望着，东风来了，春天的脚步近了。 </p>全局选择器 *{ background-color: lightgray; } CSS和HTML的结合方式行内样式（了解）<p style="color:#800080;font-size: 20px; text-decoration: underline;">hello</p><p style="font-style: italic;"></p>html标签都有一个属性style，可以直接对html进行设置，style的值其实就是css代码内嵌标签内嵌样式就是在<head>标签中使用<style>标签说明：所有的css的代码集中了一个区域中，方便后期维护，实现了html和css代码的分离。但是，如果一个网站，拥有很多个页面，不同的页面会有重叠的功能，内嵌样式成本太高。适合：仅适用于特殊的页面进行制定的设置。代码演示：选择器的使用全部使用的内嵌样式链接样式（）<link href="外部css文件的路径" type="MIME类型" rel="文本类型"> href:css文件的路径，一般使用相对路径 rel:stylesheet MIME类型：就是标记文档的类型，格式：大类型/小类型 css:text/css js:text/javascript 图片：image/jpg 所有图片：image/*<head> <meta charset="UTF-8"> <title></title> <!--链接样式引入css文件--> <link href="css/css1.css" type="text/css" rel="stylesheet"/> </head> <body> <h2>hello</h2> <p>fhajhgkagjalkgjak</p> </body>导入样式导入样式和链接样式基本相同语法：在<style>标签中使用：假设有一个css文件sheet.css,可以有以下几种方式导入@import url(sheet.css)@import url("sheet.css")@import url('sheet.css')各种样式的优先级问题总结：作用范围： 行内样式：只作用于当前标签【行内引用】 内嵌样式：只作用于当前页面【内部引用】 链接样式和导入样式：可以同时作用与多个页面【外部引用】优先级： 行内样式的优先级是最高的 内部引用和外部引用：谁后写则采用谁的方式【以body为参照物，就近原则】注意：在同一个页面中最多选用1-2种css中的属性字体属性<head> <meta charset="UTF-8"> <title></title> <style> p{ /*字体*/ font-family:arial; /*字体类型 * oblique:真正的倾斜 * italic：意大利体 * normal: */ font-style: italic; /*字体加粗 * 取值范围100~900之间，数值越大，字体越粗 * normal:正常 * bold：加粗 * bolder：比bold还加粗 * lighter:比normal更细 */ font-weight:100 ; /*字体大小*/ font-size: 25px; } </style> </head> <body> <p>字体属性</p> <!-- 补充： 1.px和em：文字大小单位 px：像素,与分辨率有关 em:自动使用尺寸，方便字体的放大和缩小 1em = 16px 2.oblique和italic italic：只是一种字体风格，对每个字母进行一定的小的改动，达到倾斜的效果 oblique：则是将正常文字倾斜一定的角度 --> </body>文本属性<html> <head> <meta charset="UTF-8"> <title></title> <style> p{ /*文本装饰 * none:正常 * underline:下划线 * line-through:删除线 * overline:顶线 * blink:文字闪烁【不是所有的浏览器都支持】 */ text-decoration:underline; /*段落缩进，中文常用2em*/ text-indent: 2em; /*对齐方式 * left * right * center * justify:两端对齐 */ text-align:left; /*设置单词之间的间距*/ word-spacing:50px; /*设置字符之间的间距*/ letter-spacing: 30px; /*字母大小写转换 * none；正常显示 * uppercase:转换成大写 * lowercase；转换为小写 * capitalize:单词首字母大写 */ text-transform: capitalize; /*文本方向 * ltr:文本方向从左到右【默认】 * rtl:文本方向从右向左 */ direction: rtl; } </style> </head> <body> <p>today is a good day中文中文中文 </p> </body></html>