Html、css相关

Html

Html结构：

标签	描述
`<!DOCTYPE html>`	文档声明
`<html>`	根元素
`<head>`	头部
`<body`	主题

常用文本标签：

标签	描述	对应单词	主要属性
`<meta>`	元信息（在head中）	meta	charset
`<title>`	标题（在head中）	title	/
`<h1 ~ h6>`	标题	headline	/
`<hr>`	水平线	Horizontal Rule	size, noshade
`<p>`	段落	paragraph	/
`br`	换行	break	/
`<ul>`	无序列表	Unordered List	type(circle, disc, square)
`<ol>`	有序列表	Ordered List	type(1, a, A, i, I)
`<li>`	列表项	List Item	/
`<img>`	图片	image	src, width, height, title(提示文本), alt(替换文本), border
`<a>`	超链接	anchor	href, target(_blank, self)
`<table>`	表格	table	border, width, heiht, cellpadding, cellspacing, bgcolor
`<caption>`	表格头标题	caption	/
`<th>`	表格标题	table headline
`<tr>`	表格行	table row	align(left, right, center)
`<td>`	单元格	table data	colspan（横向合并）, rowspan（纵向合并）
`<font>`	字体	font	colot, size, face
`<b>`	加粗	bold	/
`<i>`	斜体	italic	/

特殊字符标签：

符号	名称	HTML页面展示
	空格符	` `
<	小于号	`<`
>	大于号	`>`
©	版权符	`©`
¥	元(yen)	`¥`

表单标签：

标签	描述	对应单词	主要属性
`<form>`	表单（父标签）	form	action(请求路径), method(请求方式)
`input`	输入框	input	/
`<select>`	下拉菜单	select	/
`<textarea>`	文本框	textarea	/

关于form请求方式：

get：默认方式，请求的数据会显示在地址栏，不安全但是可以分享链接。

post：提交的数据不在请求路径上追加，使用会多一些

<input>标签的type属性：

属性	描述
`text`	文本框（默认）
`password`	密码框
`radio`	单选按钮（name属性需要相同）
`checkbox`	多选按钮
`file`	文件
`submit`	提交按钮
`reset`	重置按钮
`hidden`	隐藏
`image`	图片
`button`	按钮

input的其他属性：

属性	描述
name	提交表单时必须提供name属性，并且和后台服务器中的Javabean中的成语变量名一直
value	设置input标签的默认值。submit、reset和button为按钮显示数据
checked	单选框或复选框被选中。`checked="checked"`
readonly	是否只读
disabled	是否可用
maxlength	允许输入的最大长度

设置为text或password时可以使用属性placeholder设置输入框的显示文本

<select>：

需要设置name属性。

子标签：<option>：

属性	描述
value	一般option需要给value这个属性，如果不给，默认会把option的文本内容发送给服务器
selected	勾选当前列表项
multiple	如果不写默认是单选，取值为“multiple”表示多选。很少用
size	可见选项的数目

<textarea>：

cols属性：文本域的列数。

rows属性：文本域的行数。

style="resize:none;"可设置不可改变大小

Html5新增属性：

值	描述
color	定义拾色器
date	定义日期字段（带有 calendar 控件）
datetime-local	定义日期字段（带有 calendar 和 time 控件）
month	定义日期字段的月（带有 calendar 控件）
week	定义日期字段的周（带有 calendar 控件）
time	定义日期字段的时、分（带有 time 控件）
email	定义用于 e-mail 地址的文本字段，如果输入不正确的邮箱地址有验证的功能
number	定义带有 spinner 控件的数字字段，该文本框只能输入数字，可以对输入的数字进行加1和减1
search	定义用于搜索的文本字段，当输入内容的时候，搜索框后边会自动出现一个小×，点击这个小×，可以清除输入的内容。

主要标签：div和span

div属于块级元素，独占一行。

span属于行内元素，可共处一行。

CSS

html中引入方式：

<link rel="stylesheet" type="text/css" href="css文件路径" />

可使用../访问父级路径

选择器：

按标签类型选择（一类标签）：标签类型{ 属性 : 值; }

按ID选择（单个标签）：#标签ID{ }

组合选择器：选择器1, 选择器2{ }

关联选择器（基于标签间关系筛选）：父选择器后代标选择器{ }

属性选择器（基于属性进行筛选）:选择器[属性名="属性值"]{}

子元素选择器（只能是子元素）：父选择器 > 子选择器{ }

相邻兄弟选择器（同父）：父选择器 + 兄弟选择器{ }

类选择器（基于类进行筛选）:.类名{ }

锚伪类选择器（基于a标签锚点）：选择器:锚伪类选择器{ }

4种锚伪类选择器：

伪类选择器	状态
:link	某个html标签未被点击之前的状态
:visited	鼠标点击之后，松开了
:hover	鼠标悬浮式
:active	鼠标点击但没有松开

去除链接下划线：text-decoration: none;

CSS常用样式

边框和尺寸：border、width、height

转换：display：

常用的属性值：

inline：此元素将显示为行内元素（行内元素默认的display属性值）

block：此元素将显为块元素（块元素默认的display属性值）

none：此元素将被隐藏，不显示，也不占用页面空间。

字体：color、line-height

背景：background-color，background-image

background-color：颜色; 设置元素的背景颜色

background-image : url(图片的路径地址);

background-repeat: 背景平铺方式;

背景平铺方式取值：

no-repeat：不平铺

repeat-x ：横向平铺

repeat-y ：纵向平铺

注意：图片默认是平铺满整个盒子的

盒子模型：

padding：元素的内边距在边框和内容区之间。

border：边框 (border) 是围绕元素内容和内边距的一条或多条线。

margin：围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。

盒子模型组成部分：

元素的内容(高度、宽度，即content)、内边距（padding）、边框（border）和外边距（margin）组成。

盒子模型大小

盒子模型的大小受元素的内容(高度、宽度)、内边距（padding）、边框（border）的影响，不受外边距的影响

设置边距（padding或margin）的方式为上右下左（顺时针转一圈）

定位

通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。

position 属性值的含义：

static

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

relative

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute

元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视口本身。

提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

浮动（float）：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

巴特西

前端基础之Html、CSS

Html

CSS

最新文章

热门文章

符号	名称	HTML页面展示
	空格符	` `
<	小于号	`<`
>	大于号	`>`
©	版权符	`©`
¥	元(yen)	`¥`

符号	名称	HTML页面展示
	空格符	` `
<	小于号	`<`
>	大于号	`>`
©	版权符	`©`
¥	元(yen)	`¥`

符号	名称	HTML页面展示
	空格符	` `
<	小于号	`<`
>	大于号	`>`
©	版权符	`©`
¥	元(yen)	`¥`