HTML+CSS学习Day03笔记

最新推荐文章于 2024-07-24 23:00:08 发布

怒锤狗男人

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量139

点赞数

分类专栏：一阶段文章标签：前端 html5 css3

本文链接：https://blog.csdn.net/qq_57479061/article/details/117379094

版权

一阶段专栏收录该内容

19 篇文章 0 订阅

订阅专栏

Day03笔记

一、表单标记

表单标记介绍：

1、form表单标记，双标记

2、作用：收集用户信息，然后发送给服务器。例如：登陆（login）和注册（register），咱们填写的信息最终都发送给了网站的服务器进行保存，只要保存咱们下次使用这个网站的时候才会对应等登陆

3、form这个标记必须配合其他的input标记一起使用

4、属性：

name 表单的名称，用于区分不同的表单
action 表单的提交地址
method 表单提交方式:

get方式:

    get从服务器上面获取数据

    get方式不安全，数据可以在url（地址）浏览器地址栏可以看得到。

    例如：https://www.baidu.com/?username=hello&userpwd=123

    get传输的数据大小有现在，一般是2kb左右

    get传输速度比post快

post方式:

    post是向服务器传输数据

    post通过https协议加密过的，所以它必将安全

    post理论上数据大小是没有限定的

    post没有get快
    
 http、https 超文本传输协议，规定了咱们如何上网。https是比http安全性更高

5、form特点：自上而下排列的

input标记介绍：

1、input标记有不同的类型的，文本框、密码框、按钮、单选、复选等等

2、特点：横向排列的

3、属性：

name input标记的名称，区分不同的表单框的类型
value 表示input框的默认值
type 区分不同的表单的功能，type属性的属性值决定了input标记的不同的类型
placeholder表单的提示信息（和value的功能有些类型），当用户输入内容时提示信息会默认消失。如果给密码框设置提示信息会显示出来，value默认显示的是点点。这是H5新增的一个属性
注意点：placeholder属性不能给提交按钮设置，设置了也不会改变
代码：

<form name="login" action="http://www.baidu.com" method="post">
	<!--文本框-->
	用户名:<input type="text" placeholder="请输入用户名" name="username"/>
    <!--密码框-->
    密码:<input type="password" placeholder="请输入密码" name="userpwd"/>
    <!--提交按钮，当咱们不给默认值（value）的时候，会自动显示一个提交-->
    <input type="submit"/>
</form>

4、其他表单标记:

<h3>世纪家园网</h3>
<form>
	<!--按钮-->
    <input type="button" value="第一次来到世纪家园网"/>
    <input type="button" value="已有世纪家园网账户"/>
    
    <hr/>
    <!--复选框 font字体标记 横向排列的，双标记。属性：size 文字大小 取值范围：1-7 color 文字颜色-->
    <input type="checkbox"/><font size="2" color="red">诚意宣言：我保证我骗财不骗色保证没有暴力倾向</font>
    <br/><br/>
    
    <!--单选按钮 规则：同一组单选按钮上面的name属性必须设置，属性值必须一样。不同组，反之亦然-->
    我是:<input type="radio" name="sex"/>男<input type="radio" name="sex"/>女
    <br/><br/>
    
    <!--
    	select标记 
        
        option标记 
        
        属性：value，给option标记上面设置value属性主要是给后面js使用的
    	
        属性：selected 默认选中排列在第一位
        
        注意点：如果html属性的属性和属性值是一样的，属性值可以省略不写
    -->
    生日：
    <select>
    	<option>-请选择-</option>
        <option value="1995" selected="selected">1995</option>
        <option value="1996">1996</option>
        <option value="1997">1997</option>
    </select>年
    <select>
    	<option>-请选择-</option>
        <option value="1995">1995</option>
        <option value="1996">1996</option>
        <option value="1997">1997</option>
    </select>月
     <select>
    	<option>-请选择-</option>
        <option value="1995">1995</option>
        <option value="1996">1996</option>
        <option value="1997">1997</option>
    </select>日
    <br/><br/>
    
    婚姻状况：
    <input type="radio" name="md"/>未婚
    <input type="radio" name="md"/>离异
    <input type="radio" name="md"/>丧偶
    
    <p>我的手机号：<input type="text"/></p>
    <p>自我独白：</p>
    <!--多行文本域 textarea标记 属性：cols表示字符宽度  rows字符行数-->
    <textarea cols="50" rows="20"></textarea>
    
    <p><input type="submit" value="免费注册，开启寻爱之旅"/></p>
</form>

submit和button的区别:

submit和button都可以进行跳转，button的跳转需要配合js一起使用才能实现
button不能提交而submit可以进行提交信息，因为submit可以使用form上面的action属性实现跳转和提交功能
button属于一个单独的html标记，横向排列的

<button>按钮</button>

表单两个常用的属性：

disabled禁用属性，获取验证码或者叫做动态码
checked默认选中，主要用于单选和复选框

div标记:

表示的分割的意思
可以使用div标记把网页划分成不同的区域
div标记主要用于其他标记的外层，当做容器来使用
自上而下排列的，独占一行

浏览器控制台调试代码：

浏览器自带了一个控制台，可以通过它看到自己和其他网站的源代码。可以通过控制台调试代码的错误

打开浏览器控制台的方式：
按下键盘上面的F12
当鼠标光标移到目标区域时，点击鼠标右键，找到审查元素（检查）按下就可以找到

二、 css介绍

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

2、css翻译过来就是层叠样式表，层叠在css里面指的是语言的一些规则

3、表现标准语言，css就是web标准里面的一种语言，web标准下有三个语言，html结构、css表现（样式）、JavaScript（行为）

4、网页信息指的是网页中的一些内容，文字、图片、音频、视频、程序、超链接。在网页中这些内容都是通过html标记进行包裹

5、css作用简单来理解就是用来美化html标记的

三、css语法

选择符表示要定义样式的对象，可以是元素本身，也可以是一类元素或者制定名称的元素

理解：选择器（选择符）：选择符表示的是要定义样式的对象，选择器也可以是标记的名称。选择器的作用就是把标记选取出来给其设置样式，理解为一个小"工具"

说明：

1）每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值；

2）属性必须放在花括号中，属性与属性值用冒号连接。

3）每条声明用分号结束。

4）当一个属性有多个属性值的时候，属性值与属性值不分先后顺序。

5）在书写样式过程中，空格、换行等操作不影响属性显示。

四、css样式表

理解：html和css两门不同的语言，每个语言执行的过程中都需要一个自己的执行环境，html执行的环境是html5基本结构，css执行也需要一个环境，而样式表就是css执行的一个环境，样式表是html和css语言沟通的"桥梁"

内部样式

语法：

<style type="text/css">
	/*css语句*/
</style>

注：使用style标记创建样式时，最好将该标记写在<head></head>;

外部样式

语法:

*方法一：外部样式表的创建：
<link rel="stylesheet" type="text/css" href="目标文件的路径及文件名全称" />

说明：
使用link元素导入外部样式表时，需将该元素写在文档头部，即<head>与</head>之间。
rel（relation）：用于定义文档关联，表示关联样式表；
type：定义文档类型；

*方法二：外部样式表的导入
<style type="text/css">
@import url(目标文件的路径及文件名全称);
</style>

注：@和import之间没有空格 url和小括号之间也没有空格；必须结尾以分号结束；

link和@import的区别

1、link属于XHTML标签，@import是css提供的一种方式

2、link引用的css会同时加载，@import等页面加载完成后再加载

3、@import只在IE5以上才能识别，以下版本不兼容

4、当js控制dom改变样式时，@import不被控制

内联样式表

语法:

<标签 style="属性：属性值;属性:属性值;"></标签>

css样式表区别：

内部样式表 style标记，适用于代码量较少的时候使用
外部样式表 link标记，适用于代码量较多的时候使用
内联样式表 style属性，偶尔使用

五、样式表优先级

1、内联样式表的优先级最高，内部样式表和外部样式表的优先级和书写顺序有关，后面的会把前面的给覆盖掉

2、优先级覆盖的是相同的属性，不同的属性依旧会起作用

不被控制


内联样式表

语法:

```html
<标签 style="属性：属性值;属性:属性值;"></标签>

css样式表区别：

内部样式表 style标记，适用于代码量较少的时候使用
外部样式表 link标记，适用于代码量较多的时候使用
内联样式表 style属性，偶尔使用

五、样式表优先级

1、内联样式表的优先级最高，内部样式表和外部样式表的优先级和书写顺序有关，后面的会把前面的给覆盖掉

2、优先级覆盖的是相同的属性，不同的属性依旧会起作用

3、优先级主要是解决冲突问题，当样式遇到冲突时选择优先级高的为标准

怒锤狗男人

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS学习Day03笔记

Day03笔记一、表单标记表单标记介绍：1、form表单标记，双标记2、作用：收集用户信息，然后发送给服务器。例如：登陆（login）和注册（register），咱们填写的信息最终都发送给了网站的服务器进行保存，只要保存咱们下次使用这个网站的时候才会对应等登陆3、form这个标记必须配合其他的input标记一起使用4、属性：name 表单的名称，用于区分不同的表单action 表单的提交地址method 表单提交方式:get方式: get从服务器上面获取数据 ge
复制链接

扫一扫