HTML、表单、CSS、盒子模型

最新推荐文章于 2022-09-01 18:31:32 发布

YuanGuoHong5878

最新推荐文章于 2022-09-01 18:31:32 发布

阅读量999

点赞数 1

分类专栏：知识点的整理

本文链接：https://blog.csdn.net/weixin_41630924/article/details/83313847

版权

知识点的整理专栏收录该内容

25 篇文章 0 订阅

订阅专栏

HTML

HTML基本概述

什么HTML：

HTML：Hyper Text Markup Language，超文本标记语言，不是一种编程语言。

超文本：不同于普通的文本，比普通文本功能更强大的文本。
标记语言：这门语言，由各种标签组成。

html是作为网页开发的基础语言。
html是一门松散型语言，校验不严谨。

HTML的基本结构：

html：根元素，所有其他的元素都应该放在html之内。
head：网页的头部，头部的信息放在这个标签中。例如：网页标题。
body：网页的主体，网页的内容放在这里。

HTML的注释：

格式：

html的注释不可以嵌套。

标签的属性：

标签里的属性参数，用双引号括着。属性是在开始标签里面的。

HTML的标签

标签的分类

按主题分类：

1）有主体标签

每个标签内部可以包含其他的标签或文本，图片。
有标签的开头和结尾。例如：<body>内容</body>

2）没有主体的标签

标签只有一行，在结尾加 / 表示标签结束。例如：<hr/>

如何判断一个标签是否需要带主体：

我们可以思考该标签是否需要封装数据。
如果需要封装数据，那么该标签必定带主体；如果不需要封装数据，那么就不需要带主体。

按是否换行分类：

1）块标签

每个标签单独占一行的，有自动换行的功能。例如：<div></div>

2）内联标签

标签本身没有换行的功能，所有的内联标签都在同一行。如果网页一行放不下，会被挤到第二行去。
例如：<span></span>

语义化标签

<header>标签、<footer>标签

概述：

标签名可以让人见名知意，但是标签本身没有任何的效果。

文本标签

h1--h6

概述：

标题标签，这是块标签，所有的标题都是加粗的。1级文本最大，6级最小。

常用属性：

align：设置标题对齐方式

center：居中
right：右对齐
left：左对齐

概述：

水平线，没有主体。
自动换行，上下都自动换行。

常用属性：

width：线长度单位：px

size：大小，粗细

color：颜色

align：center、left、right

font（在HTML5已经淘汰）

概述：

设置字体的类型、大小、颜色

常用属性：

color：颜色

size：大小

face：指定字体的名字

概述：

对字体加粗，与strong标签功能相同。

概述：

设置字体为斜体。

概述：

换行，没有主体的标签。

概述：

分段，每个p标签就是一个段落，没有首行缩进，段落之间有间隔。

常用属性：

title：鼠标一上去以后，显示文字信息。

块标签与内联标签

div

概述：

块标签，需要独立占一行。

span

概述：

内联标签，不需要独占一行。

列表标签

ol--li（有序列表）

常用属性：（作用在ol标签上）

type：

1 默认值，数字编号
a、A 以大小写字母编号
i、I 以罗马数字编号

ul--li（无序列表）

常用属性：（作用在ul标签上）

type：

disc 默认值，实心圆
circle 空心圆
square 实心正方形

实体字符

学习实体字符的原因：

在html页面中，有些字符是有着特殊含义的，如果需要在网页上显示这种特殊的字符，那么就需要使用到该特殊字符对应的实体字符。

常用的实体字符：

特殊的字符	对应的实体字符
<	&lt；
>	&gt；
空格	&nbsp；
¥	&yen；
© 版本所有	&copy；
®	&reg；

注意事项：

实体名称对大小写敏感。

图像标签

img（没有主体的标签）

属性：

src：使source图片文件地址，注：不能使用客户端本地地址。

width：图片宽度，如果只指定宽或高，另一个参数会等比例缩放。

height：图片高度。

alt：如果图片丢失，图片显示的文字。

title：如果鼠标移动图片上，显示提示文字信息。

超链接标签

概述：

跳转页面、锚点链接、激活程序。

属性：

href：指定要跳转到的页面地址。

title：鼠标移上去以后，显示的文字。

target：

_self ：默认值，在当前的窗口中打开页面。
_blank 在新的窗体中打开页面。

锚点定位：

1）先设置一个锚点：

<a href = "锚点的名字"></a>

2）定位到锚点上：

<a href = "#锚点的名字"></a>

调用发邮件客户端：

作用：

打开发邮件的客户端，给指定邮箱发邮件。

语法：

<a href = "mailto:邮件地址">文字</a>

a标签注册点击事件有两种方式：

方式一：<a onclick = "函数()">链接</a>

缺点：点击的时候没有手指样式。

方式二：<a href = "javascript:函数（）">链接</a>

优点：有手指样式。

表格标签

作用：

显示数据
网页布局

注意事项：

一个表格可以被划分为thead表头，tbody表体，tfoot表尾。
一个表格可以没有thead与tfoot，但是至少要有一个tbody，tbody可以有多个。

表格标签的结构：

table	表格的容器
tr	代表一行
th	列头，文字加粗和居中
td	普通单元格，默认是左对齐
caption	表格标题，出现在表格的上面
thead	表格头部，在逻辑上将表格分成不同的部分
tbody	表格主体，tbody无论有没有写在源代码中，浏览器解析的时候都会有。 table的子元素是tbody，tbody的子元素是tr
tfoot	表格底部，逻辑上将表格进行了分开

常用的表格属性：

width	表格的宽度
border	表格外边框粗细
align	用在table上，表示表格居中用在tr上，表示这一列的内容居中用在td上，表示这一格内容居中
rowspan	单元格跨几行
colspan	单元格跨几列
cellspacing	指定单元格之间的间隔
cellpadding	指定单元格边框与内容之间的间隔

面对不规则的列数的时候我们有两种思路：

rowspan、colspan指定某一个单元格占指定的行数或者列数。
每一行只有一个单元格，单元格再嵌套table标签。

拓展：

width = 100%

作用：让该元素与父元素保持一致。

表单

表单标签的作用：

将客户端的数据提交给服务器。
是客户端与服务器交互的一种方式。
在网页上不可见，只是一个容器。

form标签

概述：

是有个体的标签。
是表单的根标签。

格式：

<form> </form>

属性：

action：指定表单提交的服务器地址。

method：指定表单的提交方式。

post

参数在地址栏不可见，安全性更高。
提交的数据是没有大小限制的。

get（默认）

参数在地址栏的后面，以 ? 隔开，多个参数之间以 & 符号分隔，安全性低。
对提交的数据有大小的限制，不能超过1kb。

拓展：

get方式提交，系统规定是1kb，可是实际上很多浏览器不遵循规定。
例如：谷歌浏览器可以达到16kb。

注意事项：

任何一个表单项如果没有name的属性都不允许提交。
如果一个表单可以输入数据，那么可以没有value属性值，若设置了value属性值，则是输入的默认值。
如果不能输入数据的，那么一定要存在value属性值，提交的时候是提交value属性值。

input标签

概述：

是没有个体的主标签。

格式：

<input/>

隐藏表单项

type = "hidden"
也要有name和value

应用场景：

某些数据对用户而言是没有意义的，用户不需要看到这些数据，但是服务器又需要，那么这时候可以使用隐藏表单项。

文本框（单行多列）

type = "text"
如果没有指定type类型，默认是text。

属性：

name：名字，给服务器使用。

value：默认值。

readonly：文本框只读。

disabled：文本框不可用，数据不能提交给服务器。

placeholder：文本框输入前提示文字。

密码框

type = "password"
输入的字符不可见。

属性：

同上

单选框：

type = "radio"

注意事项：

同一组的单选框只能选择其中的一个。
单选框如果需要分组，那么必须要保持name的属性值一致。
如果需要默认选中某一个，那么需要添加：checked

例如：

<input type="radio" name="bm" value="1" checked />GBK/GB2132

复选框：

type = "checkbox"
默认选中加上：checked="checked"

下拉列表

不是input标签。

<select>标签

默认是单选。
name：给服务器名字。
multiple：多选。
size：指定多选时候的列数。

<option>标签

value：选中这一项的值。
selected：默认选中。

<select name="xueli">
                    <option value="bs">博士</option>
                    <option value="ss">硕士</option>
                    <option value="bk">本科</option>
                    <option value="dz">大专</option>
                </select>

文件域

type = "file"
定义name，不需要定义value。

accept：指定选择文件类型。

例如：image/*

多行文本域（多行多列）

不用input标签。
用<textarea>标签。（有主体的标签）
没有value值，主体部分就是它的值。

属性：

rows：指定显示的行数。

cols：指定显示的列数。

按钮

不需要定义name。

提交按钮：

type = "submit"

重置按钮

type = "reset"
还原到开始的状态。

普通按钮

type = "button"
在表单中没有具体功能，主要用于注册事件。

也可以使用：

<button>文字</button>

图片按钮：

type = "image"
具有与submit相同的功能。

属性：

src：文件路径

注意：

该文件或该文件所在的文件夹，跟该html文件平级才行。

html5新添加type属性：

值	描述
color	定义拾色器
date	定义日期字段（带有 calendar 控件）
datetime-local	定义日期字段（带有 calendar 和 time 控件）
month	定义日期字段的月（带有 calendar 控件）
week	定义日期字段的周（带有 calendar 控件）
time	定义日期字段的时、分、秒（带有 time 控件）
email	定义用于 e-mail 地址的文本字段，如果输入不正确的邮箱地址有验证的功能
number	定义带有 spinner 控件的数字字段
range	定义带有 slider 控件的数字字段
search	定义用于搜索的文本字段，当输入内容的时候，搜索框后边会自动出现一个小×，点击这个小×，可以清除输入的内容。
tel	定义用于电话号码的文本字段，在手机上操作会出现输入数字的键盘。
url	定义用于 URL 的文本字段，在手机上操作会出现输入网址的键盘。

CSS

概述：

Cascading Style Sheet 层叠样式表
在网页制作时可以有效的对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。

缺点：

没有函数和控制流程语句。

好处：

1）功能上更强

比HTML美化的功能更加强大，可以实现HTML不能实现的功能。
例如：给 h2 加颜色。

2）降低耦合度

分工更加明确，css专用于美化，HTML专门用于结构搭建。

CSS的编写规范：

大括号：

所有的CSS代码放在｛｝中间。

样式名：

称为样式属性，全部字母小写，如果多个单词使用 - 分隔。

样式值：

每个样式名都有固定的样式值，样式名与样式值之间使用：

样式结尾：

以；结尾

注释：

/* 内容 */

CSS的位置

1）行内样式

概述：

行内样式就是直接在html元素内部使用style属性进行编写的。

示例：

<div style="color: red;font-size: 33px">这个是div</div>

缺点：

耦合度高。html代码和css代码混合使用。
复用性极差。

2）内部样式

概述：

在head标签内部添加style标签。然后编写css样式。

示例：

<style type="text/css">

    div{
        color: green;
        font-size: 33px;
    }

</style>

弊端：

复用性稍差，因为当前页面使用的CSS样式不能被其他页面所使用。

3）外部样式

概述：

引入外部的CSS文件。

步骤一：编写CSS文件

p{
    color:red;
    font-size: 32px;
}

步骤二：引入CSS文件

方式一：使用import语句引入。

<style type="text/css">

    @import url("文件路径");

</style>

方式二：可以使用link标签引入。

 <link href="css/a.css" type="text/css"  rel="stylesheet" />

rel：指明引入的文件与当前页面是什么关系，stylesheet代表的是引入文件是样式的脚本代码。

href：指定样式文件地址。

type：指定文本的类型。

推荐使用link标签引入：

@import是CSS提供的语法规则，只有导入样式表的作用。link是HTML提供的规则，不仅可以加载CSS文件，还可以定义RSS、rel连接属性等。
加载页面时，link标签引入的CSS被同时加载。@import引入的CSS在页面加载完毕后才被加载。
@import是CSS2.1才有的语法，故值可在IE5以上才能识别。link标签作为HTML元素，不存在兼容问题。

基本选择器

选择器的作用：

在对html元素进行样式化之前，我们首先应该先找到该元素。CSS选择器的作用就是找到对应的元素。

语法格式：

选择器 {
样式名: 样式值;
}

标签选择器

作用：

通过标签名选中元素。

语法：

标签名 {

}

类选择器

作用：

通过class属性的值选择元素。

语法：

.类名 {

}

前提：

先给标签进行分类，使用class属性分类。

注意事项：

类名不能以数字开头。
当一个标签有多个类时，用类选择器选择一个类，只要该标签有该类，就可以被选中。

ID选择器

作用：

通过属性ID选择元素。

语法：

#id{

}

注意事项：

先给标签指定id属性。
建议id在同个网页中唯一，不要重复。

通用选择器

作用：

选中网页中所有的元素。

语法：

* {

}

基本选择器之间的优先级：

通用选择器 < 标签选择器 < 类选择器 < id选择器

扩展选择器

概述：

由基本选择器组合而成，可以有更加灵活的选择方式。

层级选择器

语法：

父选择器子孙选择器{ }

作用：

选择某个元素下面所有的子元素和孙元素。

属性选择器

语法1：

标签名[ 属性名 ]{ }

作用：

选择某个标签，具有某个指定的属性名。

语法2：

标签名[ 属性名 = "属性值" ]{ }

作用：

选择某个标签，属性名等于属性值的元素。

伪类选择器

链接：a

格式：

a:link 没有被访问的状态。
a:visited 访问以后的状态。
a:hover 鼠标悬浮状态（鼠标经过）。
a:actived 正在激活状态。

作用：

在某个元素操作过程中，针对不同的状态下的元素进行样式化。

注意事项：

a:hover必须被置于a:link和a:visited之后，才是有效的。
a:active必须被置于a:hover之后，才是有效的。

文本框

格式：

focus{ }

作用：

文本框得到焦点以后的样式。

并集选择器

语法：

选择器1，选择器1{ }

作用：

多个选择器的集合。

常见的CSS样式

背景样式

功能	属性名	属性取值
背景色	background-color	颜色常量，如：red 使用十六进制，如：#123
背景图片	background-image	url(图片文件)
平铺方式	background-repeat	repeat 默认。背景图像将在垂直方向和水平方向重复。 repeat-x 背景图像将在水平方向重复。 repeat-y 背景图像将在垂直方向重复。 no-repeat 背景图像将仅显示一次。
背景位置	background-position	图片的左上角顶点所在的坐标轴位置。
背景大小	background-size	宽度和高度，一般不会调用，图片会变形。

文本样式

功能	属性名	属性取值
颜色	color	颜色常量，如：red 使用十六进制，如：#123
设置行高	line-height	单位是像素
文字修饰	text-decoration	underline 下划线 overline 上划线 line-through 删除线
文本缩进	text-indent	用于缩进文本，可以使用em单位，2em表示缩进2个字符，无论字符的大小。
文本对齐	text-align	默认值：由浏览器决定。 left 把文本排列到左边。 right 把文本排列到右边。 center 把文本排列到中间。如果需要垂直居中，则需要设置行高line-height等于height。

字样样式

功能	属性名	作用
字体名	font-family	设置字体，本机必须要有这种字体
设置大小	font-size	单位：像素
设置样式	font-style	字体设置为斜体 italic 浏览器会显示一个斜体的字体样式。 normal 默认值。浏览器显示一个标准的字体样式。
设置粗细	font-weight	bolder加粗

盒子模型

概述：

盒子模型其实我们可以学习的就是

padding（内边距：数据与边框的距离）
margin（外边距：元素与元素的边框距离）

盒子模型的属性

属性	作用
width	宽度
height	高度
margin	外边距
padding	内边距
border	边框三个值：粗细线型颜色

盒子模型的类型

box-sizing

1）content-box 标准盒模型

宽和高会被内边距，边框的尺寸撑大。

2）border-box 怪异盒模型

宽和高是设置的值，内容的尺寸会被压缩。

计算盒子的尺寸

在标准盒模型下：

实际宽度 = width+ border(左、右) + padding(左、右)

实际高度 = height+ border(上、下) + padding(上、下)

在怪异盒模型下：

实际宽度 = width

实际高度 = height

边框属性

属性

边框样式

取值

border-style

边框线型

dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。

border-width

边框宽度

length

允许您自定义边框的宽度。

border-color

边框颜色

常量	规定颜色值为颜色名称的边框颜色（比如 red）。
十六进制	十六进制值的边框颜色（比如 #ff0000）。

border-radius

边框圆角

指定圆角的半径

border-collapse

边框模式

separate	默认值，不会忽略空的边框。
collapse	会忽略空的边框。

可以简写为：

border : 线型宽度颜色 ;

设置内边距

内边距的写法	含义
padding-top:10px;	上内边距
padding-left:10px;	左内边距
padding-bottom: 10px;	下内边距
padding-right:10px;	右内边距

设置外边距

外边距的写法	含义
margin-top:10px;	上外边距
margin-left:10px;	左外边距
margin-bottom: 10px;	下外边距
margin-right:10px;	右外边距
margin:auto	块级元素居中

可以简写为：

margin : x x x x;(上右下左)顺时针

display属性

作用：

控制元素的显示和隐藏。

取值：

inline：设置元素为内联元素。

block：设置元素为块元素。

none：设置元素不可见。

YuanGuoHong5878

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
HTML、表单、CSS、盒子模型

HTMLHTML基本概述什么HTML：HTML：Hyper Text Markup Language，超文本标记语言，不是一种编程语言。超文本：不同于普通的文本，比普通文本功能更强大的文本。标记语言：这门语言，由各种标签组成。html是作为网页开发的基础语言。 html是一门松散型语言，校验不严谨。HTML的基本结构：html：根元素，所有其他的元素都应该放在h...
复制链接

扫一扫