HTML笔记

这1k多行的Markdown我大概写了一个多月，差不多俩月qwq

结构

基本标记标签

文档类型声明

1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHRML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5

1	<!DOCTYPE html>

`<html></html>`

`<head></head>`

`<title></title>`

`<meta>` 文档元数据

1	<meta htt[-equiv="Content-Type" content="text/html; charset=字符集">

HTML5

1	<meta charset="字符集">

关键字

1	<meta name="keywords" contenet" , , , ">

网页描述信息

1	<meta name="discription" content="网页描述信息">

`<body></body>`

html注释

字体

字体粗细

1	font-weight: normal \| bold \| bolder \| number(100,900) \| inherit;

字体风格

1	font-style: normal \| italic \| oblique \| inhert;

italic | oblique 均为倾斜字体常用 italic

字体族属性

1	font-family: 字体族1,字体族2,...,通用字体族 \|inherit;

行高

1	line-height: normal \| number \| length \| n% \| inherit

字体属性

1	font: [font-style][font-weihgt] font-size/line-height font-family;

[]内的可没有其他属性必须有并且/不可省略

文本属性

颜色

1	color: 颜色英文名 \| 颜色十六进制 \| RGB \| inherit;

一种省略表示方式：
RGB3位全相同可只写3位

水平对齐属性

1	text-align: left \| right \| center \| inherit;

首行缩进属性

1	text-indent: length \| n% \| inherit;

文本修饰属性

1 2	text-decoration: none \| underline \| overline \| line-through \| inherit; 无修饰 \| 下划线 \| 上划线 \| 删除线 \| 继承父属性

字符间距属性

1	letter-spacing: normal \| length \|inherit;

字间距属性

1	word-spacing: normal \| length \| inherit;

背景属性

背景颜色属性

1	background-color: 英文单词 \| RBG \| transparent \| inherit;

背景图片属性

1	background-image: url(image_file_path) \| inherit;

背景图片重复属性

1	background-repeat: repeat \| repeat-x \| repeat-y \| no-repeat \| inherit;

背景图片位置属性

1 2	background-position: 表示位置的关键字 \| x% y% \| xpos ypos; 关键字 top/center/bottom left/center/right;

背景图片滚动属性

1 2	background-attachment: scroll \| fixed \| inherit; 默认值滚动 \| 背景图片不滚动 \| 继承父属性

背景属性

1	background: background-color \| background-image[ \| background-position \| background-repeat \| background-attachment ]

盒子模型

边框风格

属性

border-style
border-bottom-style
border-left-style
border-right-style
border-top-style

语法

1 2	border-style: style [style] [style] [style] [style]; border-方向-style: style [style] [style] [style];

参数值

none        无边框
dotted      点
dashed      虚线
solid       实线
double      双实线
groove      3D凹槽
ridge       3D垄状
inset       内嵌立体边框
outset      外嵌立体边框
inherit     继承父元素

1个值时设置4个方向
2个值时上下/左右
3个值时上/左右/下
4个值时上/右/下/左

边框宽度

border-width
border-bottom-width
border-left-width
border-right-width
border-top-width

语法

1 2	border-width: width_value [width_value] [width_value] [width_value] \| inherit; border-方向-width: width_value [width_value] [width_value] [width_value] \| inherit;

边框颜色

border-color
border-bottom-color
border-left-color
border-right-color
border-top-color

语法

1 2	border-color: color_value [color_value] [color_value] [color_value] \| inherit; border-方向-color: color_value [color_value] [color_value] [color_value] \| inherit;

边框属性

border
border-bottom
border-left
border-right
border-top

形状

三角形

div {
    width:0;
    height:0;
    border: 20px solid #fff;
    border-left-color: #ff594f;
}

盒子内边距

padding
padding-bottom
padding-left
padding-right
padding-top

1 2	padding: padding_value [padding_value] [padding_value] [padding_value]; padding-方向: padding_value [padding_value] [padding_value] [padding_value];

auto
length
%
inherit

padding会撑开元素大小

盒子外边距

margin
margin-bottom
margin-left
margin-right
margin-top

1 2	margin: margin_value [margin_value] [margin_value] [margin_value]; margin-方向: margin_value [margin_value] [margin_value] [margin_value];

auto
length
%
inherit

外边距合并

特殊符号	字符实体
空格	` `
"	`"`
&	`&`
<	`<`
>	`>`
·	`·`
×	`×`
§	`§`
¢	`¢`
¥	`¥`
£	`£`
©	`©`
®	`®`
™	`™`

文档结构标签

`<header>`标签

一般放置站点名称、Logo、导航栏、搜索栏、内容区域标题、作者、发布日期。

注意:

可以做为网页或任何元素头部信息
无个数限制
不能嵌套<header>和<footer>

`<article>`标签

<article>独立内容</article>

`<section>标签`

分块
<section>块内容</section>

`<main>`标签

主体内容不可重复出现
<main>主体内容</main>

`<nav>`标签

<nav>导航条</nav>

`<aside>`标签

侧边栏
<aside>导航条</aside>

多媒体标签

`<object>`标签

IE9/IE8/IE7/IE6

<object classid="clsid_value" codebase="url" width="value" height="value">
    <param name="movie" value="fail_name">
    <param name="quality" value="high">
    <param name="wmode" value="opaque">
    ...
</object>

IE 10/11 not IE

<object classid="clsid_value" codebase="url" width="value" height="value">
    <param name="movie" value="fail_name">
    <param name="quality" value="high">
    ...
    <!--[if !IE]>-->
    <object type="media_type" data="media_fileName" width="value" height="value">
    <!--<!endif]-->
    ...
    <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
</object>

属性	描述
classid	设置浏览器ActiveX控件
codebase	设置ActiveX控件的位置，如果浏览器没安装会自动下载安装
data	在嵌套的object标签中指定嵌入多媒体文件名
type	嵌套的object标签中这是媒体类型，对动画类型是 application/x-shockwave-flash
height	以百分比或限速指定嵌入对象高度
width	以百分比或限速指定嵌入对象宽度
name	设置参数名称
value	设置参数值
movie	指定动画的下载地址
quality	指定嵌入对象的播放质量
wmode	设置嵌入对象窗口模式，可取 window/opaque/transparent，其中，window为默认值，表示嵌入对象始终位于HTML顶层，opaque允许嵌入对象上层可以有网页遮挡，transparent 设置 flash背景透明

`<embed>`标签

用于Netscape Navigator2.0及以后的浏览器包括IE, Chrome,firefox不支持
语法

1	<embed src="file_url"> </embed>

属性	描述
src	文件路径文件类型可以为mp3,mp4,swf
width	以像素为单位定义嵌入对象宽度
height	以像素为单位定义嵌入对线高度
loop	定义嵌入对象是否循环播放,true为循环播放,默认为false
hidden	设置嵌入对象可视属性,默认false可见
type	定义嵌入对象MIME类型

`<video>标签`

支持HTML5的可以用<video> <audio>代替前两个标签

语法

1	<video src="file_url"></video>

属性	描述
src	指定嵌入对象文件路径
autoplay	嵌入对象在加载页面后自动播放
controls	出现该属性则向用户显示控件
preload	设置视频在页面加载时进行加载，并预备播放，如果同时设置了autoplay则该属性无效
muted	音频输出静音
width	以像素为单位定义嵌入对象宽度
height	以像素为单位定义嵌入对线高度
loop	定义嵌入对象是否循环播放,true为循环播放,默认为false
hidden	设置嵌入对象可视属性,默认false可见
poster	设置视频下载时显示的图像，或者在用户单击播放按钮前显示的图像
type	定义嵌入对象MIME类型

`<audio>`标签

嵌入音频格式包括 mp3,wav,ogg,webm

语法

1	<audio src="file_url" control> </audio>

属性	描述
src	指定嵌入对象文件路径
autoplay	嵌入对象在加载页面后自动播放
controls	出现该属性则向用户显示控件
preload	设置视频在页面加载时进行加载，并预备播放，如果同时设置了autoplay则该属性无效
muted	音频输出静音
width	以像素为单位定义嵌入对象宽度
height	以像素为单位定义嵌入对线高度
loop	定义嵌入对象是否循环播放,true为循环播放,默认为false
hidden	设置嵌入对象可视属性,默认false可见
type	定义嵌入对象MIME类型

元素类型

`block`块级元素

特点

独占一行
不设置宽度时自动撑满父元素宽度
和相邻的块级元素依次垂直排列
可设置元素宽度高度和四个方向内外边距

常见的div,o,h1~h6,ul,ol,dt,dd
HTML5中section,header,footer,nav

`inline`行内元素

特点

行内元素从左到右依次排列在同一行里，直到排不下
不可设置宽度高度
可以设置四个方向内边距及左右外边距，不可设置上下外边距
高度由元素高度决定，宽度由内容长度控制。

常见span,a,em,strong
HTML5中mark,time

`inline-block`行内块元素

特点

从左到右排列在同一行，直到排不下才换行
可以设置高度和宽度
可以设置4个方向内外边距

常见 input,img

问题

浏览器兼容问题低版本失效(解决方法:display:inline;zoom:1;)
默认下方有间隙(解决方法:给行内块元素设置vertical-align:middle|top|bottom之一)

使用`display`属性改变元素类型

属性	描述
none	不显示
block	显示为块级元素
inline	显示为行内元素
inline-block	显示为行内块级元素
inherit	继承父级元素display属性

使用CSS reset标签样式

重置标签默认样式，防止浏览器默认样式不同。

图片

常用格式

JPEG,GIF,PNG

插入图片基本语法

1	<img src="file_url">

属性	描述
alt	指定图片的替换信息
height	高度
width	宽度
title	提示信息

border,align属性建议使用CSS设置

取消小空隙

设置父元素高度
添加垂直对齐样式

使用CSS设置样式

vertical-align: align_value;

参数	描述
length	以px,em为单位,可取正负值。正值表示相对于基线升高的，负值表示相对于基线降低的
%	相对于继承的line-height百分数，可取正负值，同上。
baseline	默认对齐方式，基线与父元素基线对齐
bottom	底端对齐
text-bottom	底部与父元素文本底部对齐
middle	居中对齐
top	顶部对齐
text-top	顶部与文本对齐

列表

有序列表

语法

<ol>
    <li>p_1</li>
    <li>p_2</li>
    ...
</ol>

项目符号
<ol type=" ">

参数	描述
1	1,2,3
a	a,b,c
A	A,B,C
i	i,ii,iii
I	I,II,III

无序列表

语法

<ul>
    <li>p_1</li>
    <li>p_2</li>
    ...
</ul>

项目符号
<ul type="">

参数	描述
disc	实心圆点(默认)
circle	空心圆点
squatr	实心方块

定义列表

语法

<dl>
<dt>noun_1</dt>
    <dd>explain_1</dd>
    <dd>explain_2</dd>
    ...
<dt>noun_2</dt>
    <dd>explain_1</dd>
    ...
</dl>

无项目符号

使用CSS列表属性设置列表样式

属性	参数	描述
list-style	其他任意列表参数	简写属性
	disc	实心圆点
	circle	空心圆点
	square	实心方块
	decimal	阿拉伯数字
list-style-type	lower-roman	小写罗马数字
	upper-roman	大写罗马数字
	lower-alpha	小写英文字母
	upper-alpha	大写英文字母
	none	无项目符号

创建横纵菜单

横向菜单注意设置display:inline;
注意取消边框线、项目符号

display:inline-block;可以设置图文横向排列

链接

`a`标签

属性	描述
href	链接路径
target	目标窗口
title	链接提示信息

语法

1	<a href="url"> text/images </a>

href

参数	描述
“”(无内容)	跳转到页面顶部(search)
#	跳转到页面顶部(hash)
javascript:…;	执行javascript脚本
URL	跳转到指定页面

target

参数	描述
_blank	新开窗口打开
_self	同窗口/框架下打开(默认)
_parent	上一级窗口打开
_top	在浏览器整个窗口打开
框架名称	指定浮动框架窗口打开

基准URL

路径前共同部分
可以使用基准URL+相对路径的形式

基本语法

1	<base href=".." target=".." />

链接类型

内部链接

外部链接

URL格式	描述
http://	万维网
mailto:	启动邮件发送系统
ftp://	文件传输服务器
telnet://	启动远程登录方式
news://	启动新闻讨论组

书签链接
HTML5中用id创建书签
创建书签链接
<a href="#name"> origin </a>
<a href="file_url#name"> origin </a>

脚本链接

文件下载链接

文本链接

图像链接

图像映射

基本语法

<img src="img_url" usemap="#map_name">
<map name="map_name">
    <area shape="rect" coords="x1,y1,x2,y2" href="URL">
    <area shape="circle" coords="x,y,r" href="URL">
    <area shape="poly" coords="x1,y1,x2,y2,x3,y3,..." href="URL">
    ...
</map>

标签usemap用于激活映射
标签定义图像映射中包含热点映射
标签用于图像映射中定义一个热区,包含3个必要属性:href,shape,coords
href属性设置热区链接
shape设置热区形状
coords设置热区坐标

shape	coords	描述
rect	x1,y1,x2,y2	左上右下
circle	x,y,r	圆心半径
poly	x1,y1,x2,y2…	各个顶点坐标按照单击先后顺序

伪类设置链接样式

伪类类型
:link,:visited,:hover,:active
未访问、访问后、鼠标悬停、活动状态

链接内联框架

语法
<iframe src="source_url">...</iframe>

属性	参数	描述
src	file_url	文档地址
height	px,%	高度
width	px,%	宽度
name	frame_name	名字
frameborder	1,0	是否显示边框
marginheight	px	顶部底部边距
marginwidth	px	左右边距

网页表格

表格标签

标签	描述
`<table>`	定义表格
`<caption>`	定义表格标题
`<tr>`	定义表格行
`<th>`	定义表格表头
`<td>`	定义表格单元格
`<thead>`	定义表格页眉
`<tbody>`	定义表格主体
`<tfoot>`	定义表格页脚

`<table>`标签

属性	参数	描述
align	left,center,right	水平对齐方式,默认左对齐
border	px	边框宽度,默认为0
bgcolor	#xxxxxx,rgb(x,x,x),colorname	背景颜色
cellpadding	px	单元格间距,数据与边框
cellspcing	px	单元格边距,单元格与单元格
height	px,%	表格高度
width	px,%	表格宽度

注意HTML5中以上属性不再支持，建议使用CSS格式化表格

`<tr>`标签

属性	参数	描述
align	left,center,right	水平对齐方式,`<td>`默认左对齐,`<th>`默认居中对齐
bgcolor	#xxxxxx,rgb(x,x,x),colorname	行背景颜色
height	px,%	表格行高度
valign	baseline,top,middle,bottom	垂直对齐方式,默认居中对齐

`<td> & <th>`标签

属性	参数	描述
align	left,center,right	水平对齐方式,`<td>`默认左对齐,`<th>`默认居中对齐
bgcolor	#xxxxxx,rgb(x,x,x),colorname	背景颜色
colspan	number	单元格横跨列数
rowspan	number	单元格横跨行数
height	px,%	单元格高度
width	px,%	大暖格宽度
valign	baseline,top,middle,bottom	垂直对齐方式,默认居中对齐

`<caption>`标签

属性	参数	描述
align	left,center,right	设置水平对齐方式,默认center
valign	top,bottom	设置垂直对齐方式,默认top

`<thead>,<tbody>,<tfoot>`标签

分区

表格标签属性格式化表格

CSS表格属性

下面代码不是Markdown语法咯，自己练练HTML表格

CSS表格属性
属性	参数	描述
border-collase	separate	默认值,表格边框和单元格边框会分开
border-collase	collapse	表格边框和单元格边框会合并为单一边框
border-spacing	length[length]	相邻单元格边框之间距离，单位可取px,cm，定义一个参数则为水平垂直间距，两个参数则为水平和垂直间距
caption-side	top	默认值，标题显示在表格上面
caption-side	bottom	标题在表格下面
table-layout	automatic	默认值，单元格宽度由内容决定
table-layout	fixed	单元格宽度由表格宽度和单元格宽度决定

CSS格式化表格

属性	参数	描述
	top	单元格内容与上边框靠近
vertical-align	middle	默认值,垂直居中
	bottom	与下边框靠近
	inherit	继承父元素

`display`属性值

标签	display属性设置	描述
`<table>`	display:table	块级表格，表格前后带换行符
`<caption>`	display:table-caption	表格标题
`<thead>`	display:table-header-group	分组显示
`<tbody>`	display:table-row-group	分组显示
`<tfoot>`	display:table-footer-group	分组显示
`<tr>`	display:table-row	表格行
`<th>,<td>`	display:table-cell	表格单元格

表单

概述

标签	描述
`<form>`	定义一个表单区域
`<input>`	定义输入表单元素
`<select>`	定义列表元素
`<option>`	定义列表元素中的项目
`<textarea>`	定义表单文本域元素
`<lable>`	定义输入元素标签
`<button>`	定义按钮

`<form>`标签

语法

1
2
3

<form name=".." method="the way of submitting" action="program">
    ...
</form>

属性	描述
name	表单名称
method	定义表单数据从客户端传送到服务器方法,包括get和post,默认get
action	用于指定处理表单服务端程序
onsubmit	用于指定处理表单的脚本函数
enctype	设置MIME类型，默认值application/x-www-form-urlencoded;需要上传到服务器时应设为multipart/form-data
target	规定何处打开action URL,包括_black,_self,_parent,_top,_framename

`input`表单控件

语法

1	<input type=".." name="..">

属性	描述
text	设置但行文本框元素
password	设置密码元素
file	设置文件元素
hidden	设置隐藏元素
radio	设置单选框元素
checkbox	设置复选框元素
button	设置普通按钮元素
submit	设置提交按钮元素
reset	设置重置按钮元素

文本框

语法

1	<input type="text" name="..">

文本框其他属性

属性	描述
name	设置名称
maxlength	最多可输入字符数
size	文本框长度,单位px,默认20px
value	设置文本框默认值

密码框

语法

1	<input type="password" name=" ">

和文本框属性相同

隐藏域

用于传递实体id的值

1	<input type="hidden" name=".." value="..">

文件域

1	<input type="file" name="..">

将本地文件上传至服务器

单选框和复选框

单选框

1	<input type="radio" name=".." value=".." checked="checked">

checked:默认选中或不选中

复选框

1	<input type="checkbox" name=".." value=".." checked="checked">

提交按钮

1	<input type="submit" name=".." value="..">

普通按钮

1	<input type="button" value=".." onclick="javascriptfucation" name="..">

重置按钮

1	<input type="reset" name=".." value="..">

图像按钮

1	<input type="image" name=".." src=".." alt=".." width=".." height="..">

button元素按钮

1	<button type="submit\|button\|reset" name=".." value=".."> text\|images\|.. </button>

label标签

可以通过单击标签来进行选择

<label>..</label>

显式联系
<label for="id">..<label>

选择列表

标签	属性	描述
select	name	列表名称
select	size	定义同时显示的列表项数,默认为1,取值大于等于1
select	multiple	定义列表选项可多选
option	value	设置选项值
option	selected	设置默认选项

多行文本域

1
2
3

<textarea name=".." rows=".." cols="..">
    ..
</textarea>

令文本域不能扩大缩小 CSS代码

1
2
3

textarea {
    resize:none;
}

表单元素的disabled 和 readonly属性

在标签内加上readonly|disable或readonly|disable=true
readonly可被提交disable不可以

form 属性

表明隶属关系不必放在<form></form>之间

formaction 属性

1 2	<input type="submit\|image" formaction=".jsp"> <button type="submit" formaction=".jsp">

autofocus 属性

仅有一个设置

<input type="text" autofocus/>
or
<input type="text" autofocus="true"/>

<textarea rows="" cols="" autofocus>...</textarea>
or
<textarea rows="" cols="" autofocus="true">...</textarea>

pattern 属性

验证属性正则表达式

1	<input type="text" pattern="code" title="error note"/>

placeholder 属性

输入信息提示信息自动消失，清空显示

1 2	<input type="text" placeholder="note"> <textarea rows="" cols="" placeholder="note">

required 属性

判断是否为空

1
2
3

<input type="" name="..." required>
or
<input type="" name="..." required="true">

textarea select也可设置该属性

outline 轮廓线

属性	参数	描述
outline	声明同时设置各属性，之间空一格:outline-color outline-style outline-width	简写属性
	none
	inherit
outline-color	同border-color	设置轮廓线颜色，当outline-style不为none才有效，默认transparent
outline-style	同border-style	轮廓风格，默认为none
outline-width	同border-width	轮廓线宽度，默认为medium，outline-style不为none时有效

特殊符号	字符实体
空格	` `
"	`"`
&	`&`
<	`<`
>	`>`
·	`·`
×	`×`
§	`§`
¢	`¢`
¥	`¥`
£	`£`
©	`©`
®	`®`
™	`™`

特殊符号	字符实体
空格	` `
"	`"`
&	`&`
<	`<`
>	`>`
·	`·`
×	`×`
§	`§`
¢	`¢`
¥	`¥`
£	`£`
©	`©`
®	`®`
™	`™`

结构

基本标记标签

文档类型声明

<html></html>

<head></head>

<title></title>

<meta> 文档元数据

<body></body>

html注释

字体

字体粗细

字体风格

字体大小

字体族属性

行高

字体属性

文本属性

颜色

水平对齐属性

首行缩进属性

文本修饰属性

字符间距属性

字间距属性

背景属性

背景颜色属性

背景图片属性

背景图片重复属性

背景图片位置属性

背景图片滚动属性

背景属性

盒子模型

边框风格

边框宽度

边框颜色

边框属性

形状

盒子内边距

盒子外边距

标签

段落

换行

标题

强调

时间

装饰性标签

特殊字符

文档结构标签

<header>标签

<article>标签

<section>标签

<main>标签

<nav>标签

<aside>标签

多媒体标签

<object>标签

<embed>标签

<video>标签

<audio>标签

元素类型

block块级元素

inline行内元素

inline-block行内块元素

使用display属性改变元素类型

使用CSS reset标签样式

图片

常用格式

插入图片基本语法

使用CSS设置样式

列表

有序列表

无序列表

定义列表

使用CSS列表属性设置列表样式

创建横纵菜单

链接

a标签

基准URL

链接类型

伪类设置链接样式

链接内联框架

`<html></html>`

`<head></head>`

`<title></title>`

`<meta>` 文档元数据

`<body></body>`

`<header>`标签

`<article>`标签

`<section>标签`

`<main>`标签

`<nav>`标签

`<aside>`标签

`<object>`标签

`<embed>`标签

`<video>标签`

`<audio>`标签

`block`块级元素

`inline`行内元素

`inline-block`行内块元素

使用`display`属性改变元素类型

`a`标签

`<table>`标签

`<tr>`标签

`<td> & <th>`标签

`<caption>`标签

`<thead>,<tbody>,<tfoot>`标签

`display`属性值

`<form>`标签

`input`表单控件

特殊符号	字符实体
空格	` `
"	`"`
&	`&`
<	`<`
>	`>`
·	`·`
×	`×`
§	`§`
¢	`¢`
¥	`¥`
£	`£`
©	`©`
®	`®`
™	`™`