一、form表单标记
1、作用:收集用户信息然后发送给服务器
2、特点:独占一行,自上而下排列的,双标记
3、注意点:form标记不能单独使用要配合其他的表单标记一起使用
4、属性:
-
name 表单的名称,为了区分不同的表单而存在
-
action 表单的提交地址,你要把表单的信息发给谁,在实际工作中是一个后台地址
-
method 表单提交方式,get、post
5、get和post方式区别
a、get是从服务器获取数据,post传输数据 例如:搜索内容、登陆和注册 b、get数据可以在url(浏览器的地址栏)上面看得到,而post是通过http post机制加密过所以看不见。post比get安全 例如:https://www.baidu.com/?username=hello&userpwd=123 get形式 c、get数据量一般大小是2kb左右,而post理论上是没有限定的 d、get执行速度比post快
6、2kb存储汉字数量示意图
二、input标记
1、作用:是配合form标记一起使用,主要是收集用户信息
2、特点:横向排列的,单标记
3、属性
-
name 表单的名称,为了区分不同的表单框
-
type 表单类型,由于type属性的属性值不同决定了input标记的功能不同
-
value 表单的默认值,主要给用户提示信息
4、表单标记介绍
<form name="login" action="http://www.baidu.com" method="post"> <!--文本框--> 用户名: <input type="text" value="" name="username"/> <!--密码框--> 密码:<input type="password" name="userpwd" value=""/> <!--提交按钮--> <input type="submit" value="登陆"/> </form>
5、常用表单标记
<h2>李曾伟真爱有缘网</h2> <form> <!--按钮--> <input type="button" value="第一次李曾伟真爱有缘网" /> <input type="button" value="已有李曾伟真爱有缘网账号"/> <h3>欢迎来到,李曾伟真爱有缘网</h3> <p>请花1分钟仔细阅读咱们的网站协议</p> <hr/> <!--复选框--> <input type="checkbox"/><font size="2">诚意宣言:我保证不骗人不骗财不偏色</font> <br/><br/> <!--单选按钮 注意点:同一组单选按钮标记上面的name属性必须设置,属性值必须一样。不同组的,反之亦然--> 我是 <input type="radio" name="sex"/>男 <input type="radio" name="sex"/>女 <br/><br/> 生日 <!-- 下拉菜单 select标记属性:name 区分不同的下拉菜单框 option选项标记属性:selected默认排列第一位 value表示 值 注意点:当html属性的属性值和属性是一样的情况下,可以把属性值省略不写 --> <select name="year"> <option>1995</option> <option>1996</option> <option selected>1997</option> </select> 年 <select name="month"> <option>5</option> <option>6</option> <option>7</option> </select> 月 <select name="day"> <option>5</option> <option>6</option> <option>7</option> </select> 日 <br/><br/> 婚姻状况 <input type="radio" name="md"/>离异 <input type="radio" name="md"/>未婚 <input type="radio" name="md"/>丧偶 <hr/> 注册方式<input type="radio" name="phone"/> <br/><br/> 我的手机<input type="text" value=""/> <p>手机验证码<input type="text" value=""/></p> <p>密码<input type="password"/></p> <p>内容独白</p> <!--多行文本域 属性:cols字符宽度 rows字符高度--> <textarea cols="30" rows="20"></textarea> <br/><br/> <input type="submit" value="免费注册,开启寻爱之旅"/> </form>
三、表单属性
1、属性
disabled 禁用
checked 默认选中
2、标记补充
button 按钮标记
input标记类型的button属于form表单专属的,而button标记是单独存在的
3、submit和button区别
button是按钮,当咱们点击过后可以进行跳转,可以使用js设置事件
submit提交按钮,可以直接让form表单里面的内容直接提交到服务器
4、表单属性示例代码
<form action="http://www.baidu.com"> 兴趣爱好: <input type="checkbox"/>篮球 <input type="checkbox" checked="checked"/>足球 <input type="checkbox"/>游泳 <input type="checkbox"/>睡觉 <input type="checkbox"/>美食 <input type="checkbox" checked/>敲代码 <input type="checkbox"/>打麻将 <br/><br/> <input type="button" value="获取验证码"/> <input type="button" value="剩余时间50秒" disabled/> <!--submit默认带有提交事件的--> <input type="submit"/> </form> <button>我是按钮,快来点我!</button>
四、div网页布局标记
-
分割,划分。把网页划分成不同的区域,主要用于网页布局
-
特点:独占一行,自上而下排列的。双标记
五、使用浏览器控制台
-
是浏览器给咱们程序员提供的一个调试代码的工具
-
打开方式
直接按下键盘上的F12键
当鼠标悬停在需要查看的区域时,点击鼠标右键 --- 检查(审查元素)--- 点击进去即可
-
控制台示意图
六、css介绍和语法
1、概念:
-
css 层叠样式表
-
WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制,简单说就是如何修饰网页信息的显示样式
2、概念解释
-
在css里面层叠指的是规则,语言规则
-
样式表指的是css语言执行的环境
-
web标准指的是网页制作要遵循的规范,在这个标准下有三个东西,分别是html(结构)、css(表现、样式)、JavaScript(js、行为)
-
网页信息,网页上的文字、图片、超链接、音频、视频等等
-
css作用:用来美化html标记的
3、css语言最新的版本是css3,使用最多的是css2.1版本
4、css语法
-
css语法由两部分组成,选择器(选择符)和声明
-
什么是选择器?表示要定义样式的对象,可以是标记本身,也可以是取名称标记,简单来说就是给谁设置样式谁就是选择器
-
声明分为属性和属性值。属性和属性值使用冒号连接的,分号结束的,声明必须放在花括号里面才会起作用
-
属性和属性之间换行或者使用空格不影响实际网页效果
-
当一个属性有多个属性值的时候,属性值与属性值之间不分先后顺序
-
语法示意图
5、css注释
-
语法:
/*代码意思*/
-
注意点:必须要等于或者大于两个星星
七、css样式表
1、内部样式表
语法:
<style type="text/css"> div{ /*宽度*/ width:200px; /*高度*/ height:200px; /*背景颜色*/ background-color:orange; } </style>
说明:
-
style是标记,style标记的功能就是执行css代码
-
属性:
type="text/css"
定义文档类型,定义了css语言类型,可以省略不写,但是不能写错
2、外部样式表
语法:
<!--引入外部css文件--> <link rel="stylesheet" type="text/css" href="css/hello.css"/>
说明:
-
link标记,通过link标记上面的href属性引入外部的css文件
-
属性:
type="text/css"
定义文档类型,定义了css语言类型,可以省略不写,但是不能写错rel="stylesheet"
关联样式表,把html文件与css文件关联起来href="地址"
引入外部css文件使用
3、内联(行内)样式表
语法:
<h1 style="color:red;font-size:66px;">老大哥</h1>
说明:
-
把style写在标记的行内的,style是属性,属性值里面写的是css代码
4、注意点:外部和内部样式表一般放在网页头部区域的,这个跟代码执行顺序有关,自上而下、从左到右
5、使用DW创建css文件方法
6、如果遇到以下错误说明路径有问题
7、样式表优先级
-
优先级的作用是为了解决样式冲突问题而存在的
-
规则
-
内联样式表的优先级是最高的
-
内部样式表和外部样式表的优先级和书写顺序有关,后面的会把前面的给覆盖掉
-
注意点:优先级覆盖的是相同的样式,同一个css文件可以给不同的html文件引用
-
八、css选择器
1、标记选择器(标签、元素、类型)
语法: 标记名称{}
<style> div{ width:200px; height:200px; font-size:30px; color:red; background-color:yellow; } </style>
说明:可以一次性给相同的很多标记设置样式,不能单独区
2、class选择器
语法:
css: .名称{}
html: <标记 class="名称"></标记>
<style> .heihei{ width:200px; height:100px; background-color:yellow; } .haha{ width:300px; height:200px; background-color:orange; } .yingying{ width:100px; height:100px; background-color:hotpink; } </style>
说明:可以帮助咱们区分同类型的标记,方便设置样式
3、id选择器
语法:
css: #名称{}
html: <标记 id="名称"></标记>
<style> #heihei{ width:200px; height:100px; background-color:yellow; } #haha{ width:300px; height:200px; background-color:orange; } #yingying{ width:100px; height:100px; background-color:hotpink; } </style>
说明:
-
可以帮助咱们区分同类型的标记,方便设置样式
-
具有唯一性,一个标记对应的只能有一个id名称
4、包含选择器
语法:
css:选择器1 选择器2{}
html: <标记1><标记2></标记2></标记1>
<style> /*表示只有div下的p标记才起作用*/ div p{color:red;} </style>
说明:限定样式起作用的范围
5、class和id选择器区别
-
一个标记class可以有多个名称
-
id一个标记对应的只能有一个名称,具有唯一性
-
id选择器权重高于class选择
6、通配方选择器
语法:语法: *{}
*{margin:0;padding:0;}
说明:
-
星号(all)表示所有的意思
-
可以一次性给所有的标记设置样式
-
作用:设置重置样式,网页开发中一开始就把标记一些默认的咱们不需要的样式给清除掉
九、css权重
1、css权重是css语言的一种规则,规定了每一个选择器都有权重这种特性,用于解决样式冲突问题存在的
2、权重是使用四位数表示 0 0 0 0
3、选择器权重
-
标记选择器权重 0 0 0 1
-
class选择器权重 0 0 1 0
-
id选择器权重 0 1 0 0
-
包含选择器权重为包含选择器之和
-
内联样式表权重1 0 0 0
-
通配符没有权重
4、权重使用规则,高权重覆盖低权重的
5、权重具有就近原则,先找自己选择器上的样式没有的话,去上一级查找有就继承样式
6、权重计算
当不同选择符的样式设置有冲突的时候,高权重选择 符的样式会覆盖低权重选择符的样式。 例如:b .demo的权重是1+10=11 .demo的权重是10 所以经常会发生.demo的样式失效
十、css常用属性
属性:
width 宽度 height 高度 font-size 字体大小 color 文本颜色 background-color 背景颜色 border:1px solid red; 边框 值1表示边框宽度 值2表示宽度样式 值3表示边框颜色 margin 指的是外边距,元素与元素之间的距离 padding 指的是内边距(填充),元素内容到边框之间的距离 *{margin:0;padding:0;} 重置样式,清除内外边距 margin:0 auto; 可以让元素在页面中水平居中 text-align:left|center|right; 文本水平对齐方式 line-height 行高 当行高等于容器高度的时候可以实现文本垂直居中
代码示例:
<style> *{margin:0;padding:0;} .header{ width:1000px; height:100px; background-color:orange; margin:0 auto; text-align:center; border:3px solid red; font-size:20px; color:#fff; line-height:100px; } </style>