3.HTML补充和CSS

最新推荐文章于 2024-11-04 07:45:03 发布

我吃榴莲

最新推荐文章于 2024-11-04 07:45:03 发布

阅读量162

点赞数 1

分类专栏：前端文章标签： css html

本文链接：https://blog.csdn.net/qq_38903404/article/details/106008332

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文深入探讨了HTML中的表格table和表单form，以及CSS的基础知识和语法。CSS作为WEB标准的表现层语言，用于控制网页的显示样式，提高页面访问速度，简化代码维护，并有助于SEO优化。内容涵盖了CSS的内部样式表、外部样式表和内联样式表的应用。

摘要由CSDN通过智能技术生成

以后会对当前博文进行再次的改进

表格table

<table>
    <tr>
    	<td></td>
    	<td></td>
    	<td></td>
    </tr>
</table>
table里面的html属性：
	width=""	宽度
	height=""	高度
	border=""	边框
	bordercolor=""	边框颜色
	bgcolor=""	背景色
	align=""	水平对齐方式 属性值：center（中） left（左） right（右）
	valign=""	垂直对齐 属性值:top（上） middle（中） bottom（下）
重要属性:
	cellspacing=""	表格边框之间的距离
	cellpadding=""	单元格内容与边框的距离
	横行竖列
	colspan="合并的单元格数量" 合并列
	rowspan="合并的单元格数量" 合并行
	注：无论是合并列还是合并行，都是对哦表格的单元格进行操作
单元格合并：
	只要不跨行的都是合并列、跨行的就是合并行。
	和谁合并就把那个td删掉
	如果合并行又合并列：尽量县合并列在合并行

表单form

表单作用:收集用户信息
<form></form>
form的html属性：
	name="表单的名称"
	action="接口地址（数据提交的地址路径）"
	method="post/get" 控制数据的提交方式
表单标签
	<input>
	input的html属性有：
		type属性决定了input在页面中显示状态
		name属性为当前控件的名称
		value属性根据控件的不同，作用也是不一样
		size属性控制控件的大小

文本框：
	<input type="text">
密码框：
	<input type="password">
提交按钮:
	<input tyoe="submit" value="控制按钮显示的文字">
重置按钮:
	<input tyoe="reset" value="控制按钮显示的文字">
空按钮：
	<input tyoe="button" value="控制按钮显示的文字">

拓展：post/get
(1). 从功能上讲，GET一般用来从服务器上获取资源，POST一般用来更新服务器上的资源；
(2). 从REST服务角度上说，GET是幂等的，即读取同一个资源，总是得到相同的数据，而POST不是幂等的，因为每次请求对资源的改变并不是相同的；进一步地，GET不会改变服务器上的资源，而POST会对服务器资源进行改变；
(3). 从请求参数形式上看，GET请求的数据会附在URL之后，即将请求数据放置在HTTP报文的 请求头 中，以?分割URL和传输数据，参数之间以&相连。特别地，如果数据是英文字母/数字，原样发送；否则，会将其编码为 application/x-www-form-urlencoded MIME 字符串(如果是空格，转换为+，如果是中文/其他字符，则直接把字符串用BASE64加密，得出如：%E4%BD%A0%E5%A5%BD，其中％XX中的XX为该符号以16进制表示的ASCII)；而POST请求会把提交的数据则放置在是HTTP请求报文的 请求体 中。
(4). 就安全性而言，POST的安全性要比GET的安全性高，因为GET请求提交的数据将明文出现在URL上，而且POST请求参数则被包装到请求体中，相对更安全。
(5). 从请求的大小看，GET请求的长度受限于浏览器或服务器对URL长度的限制，允许发送的数据量比较小，而POST请求则是没有大小限制的。

CSS

CSS(cascading style sheet) 汉译为层叠样式表,是用于控制网页样式

WEB标准中的表现标准语言,在网页中主要对网页信息的显示进行控制。
目前推荐遵循的是W3C发布的CSS3.0版本；
用来表现HTML或者XHTML等样式文件的计算机语言。
1998年5月21日由w3C正式推出的css2.

HTML + CSS

弥补html语言的不足
缩减页面代码，提高访问速度;
代码减少，页面文件就会小，占用网络带宽就少，客户端打开速度就快，用户体验就会更好
结构清晰，有利于seo优化
有利于搜索引擎优化
缩短改版时间
对网站的重构有很好的支持
方便维护（html专门搭建结构、css专门渲染样式）

CSS语法

css语句包括：
            选择符 和 声明
            声明又包括 属性 和 属性值

        语法说明：
            选择符{ 
                属性1：属性值; 
                属性2：属性值1 属性值2 属性值3;
            }

            a：css声明必须放在花括号里面
            b: 属性和属性值之间用 冒号 连接
            c: 每一条声明的结尾用分号
            d: 如果一个属性有多个属性值的时候，属性值与属性值之间用空格隔开。
            e：选择符就是标签的一个名称。

            举例：
                div{
                    width:500px;            div宽度500像素
                    height:400px;           div高度400像素
                    background:orange;      div背景颜色橘黄色
                    border:solid 20px blue; div边框20px  实线  蓝色
                }
         注：css的注释   /*    */

CSS样式表

1.内部样式表

语法：
    <style type="text/css">
         css语句 
    </style>

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

2.外部样式表

(1)  语法：<link rel="stylesheet" type="text/css" href="目标文件的路径及文件名全称" />

说明：使用link元素导入外部样式表时，需将该元素写在文档头部，即<head>与</head>之间。
      rel：用于定义文档关联，表示关联样式表；
      type：定义文档类型；
      
      
(2)、导入外部样式表
      <style type="text/css">
                @import  url("目标文件的路径及文件名全称");
	  </style>

说明：@和import之间没有空格 url和小括号之间也没有空格；括号内部加引号，必须结尾以分号结束；

3.内联样式表

<标签    style="属性1:值1;属性2:值2; ……"></标签>

拓展：

比较 link  与 @import 区别：
            1:本质区别：
                link属于 html语言。
                @import 属于css提供的方法

            2：加载顺序：
                link导入的css 和 html结构同时加载
                @import 等待html结构加载完毕再加载css

            3: javascript 操作DOM的区别
                @import 不同做一些DOM动态操作。

            4：兼容性区别

在这里插入图片描述