day03笔记

day03笔记

一、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存储汉字数量示意图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rmfzVdCt-1628074191872)(C:\Users\Mac\Desktop\H5-2109\day03\笔记\images\1.png)]

二、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键

  当鼠标悬停在需要查看的区域时，点击鼠标右键 --- 检查（审查元素）--- 点击进去即可

• 控制台示意图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DItE8xtz-1628074192035)(C:\Users\Mac\Desktop\H5-2109\day03\笔记\images\2.png)]

六、css介绍和语法

1、概念：

• css 层叠样式表

• WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制，简单说就是如何修饰网页信息的显示样式

2、概念解释

• 在css里面层叠指的是规则，语言规则

• 样式表指的是css语言执行的环境

• web标准指的是网页制作要遵循的规范，在这个标准下有三个东西，分别是html（结构）、css（表现、样式）、JavaScript（js、行为）

• 网页信息，网页上的文字、图片、超链接、音频、视频等等

• css作用：用来美化html标记的

3、css语言最新的版本是css3，使用最多的是css2.1版本

4、css语法

• css语法由两部分组成，选择器（选择符）和声明
• 什么是选择器？表示要定义样式的对象，可以是标记本身，也可以是取名称标记，简单来说就是给谁设置样式谁就是选择器
• 声明分为属性和属性值。属性和属性值使用冒号连接的，分号结束的，声明必须放在花括号里面才会起作用
• 属性和属性之间换行或者使用空格不影响实际网页效果
• 当一个属性有多个属性值的时候，属性值与属性值之间不分先后顺序
• 语法示意图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6XuJf1nx-1628074192040)(C:\Users\Mac\Desktop\H5-2109\day03\笔记\images\5.png)]

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文件方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qZ3M7rRq-1628074192067)(C:\Users\Mac\Desktop\H5-2109\day03\笔记\images\3.png)]

6、如果遇到以下错误说明路径有问题

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xMDBjb3U-1628074192071)(C:\Users\Mac\Desktop\H5-2109\day03\笔记\images\4.png)]

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>

表示边框宽度 值2表示宽度样式 值3表示边框颜色

margin 指的是外边距，元素与元素之间的距离

padding 指的是内边距（填充），元素内容到边框之间的距离

*{margin:0;padding:0;} 重置样式，清除内外边距

margin:0 auto; 可以让元素在页面中水平居中

text-align:left|center|right; 文本水平对齐方式

line-height 行高 当行高等于容器高度的时候可以实现文本垂直居中

代码示例：

```css
<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>