HTML常用代码
html+css代码
文本设置
font-size
字号大小
font-style
字体格式
font-weight
字体粗细
color
文本颜色
超链接设置
text-decoration
参数
参数取值范围:
underline
为文字加下划线
overline
为文字加上划线
line-through
为文字加删除线
blink
使文字闪烁
none
不显示上述任何效果
背景颜色
background-color
设置背景色
背景图片
background-image
url(图片链接)
背景图片重复
background-repeat
参数
参数取值范围 :
no-repeat
不重复平铺背景图片
repeat-x
使图片只在水平方向上平铺
repeat-y
使图片只在垂直方向上平铺
背景图片固定
background-attachment
参数
参数取值范围:
fixed
网页滚动时,背景图片相对于浏览器的窗口而言,固定不动scroll
网页滚动时,背景图片相对于浏览器的窗口而言,一起滚动
区块
单词间距
word-spacing
字母间距
letter-spacing
文本对齐
text-align
参数
参数的取值:
left
左对齐
right
右对齐
center
居中对齐
justify
相对左右两端对齐
垂直对齐
vertical-align
参数
top
顶对齐
bottom
底对齐
text-top
相对文本顶对齐
text-bottom
相对文本底对齐
baseline
基准线对齐
middle
中心对齐
sub
以下标的形式显示
super
以上标的形式显示
文本缩进
text-indent
缩进距离
12px
相当于一个文字距离
空格
white-space
参数
参数取值范围:
pre
保留空白
nowrap
文本不换行
显示样式
display
参数
参数取值范围:
block
块级元素,在对象前后都换行
inline
在对象前后都不换行
list-item
在对象前后都换行,增加了项目符号
none
无显示
方框
height
高度
width
宽度
padding
内边距
margin
外边距
float
(浮动) 可以让块级元素在一行中排列,例如横向菜单。
clear
清除浮动
边框
- 1、样式
border style
参数
边框样式的参数:
none
无边框
dotted
边框为点线
dashed
边框为长短线
solid
边框为实线
double
边框为双线
2、宽度
border width
3、颜色
border color
列表
list-style-type
列表样式
鼠标
cursor
鼠标形状参数
CSS鼠标形状参数表:
鼠标形状:CSS代码
style="cursor:hand"
手形
style="cursor:crosshair"
十字形
style="cursor:text"
文本形
style="cursor:wait"
沙漏形
style="cursor:move"
十字箭头形
style="cursor:help"
问号形
style="cursor:e-resize"
右箭头形
style="cursor:n-resize"
上箭头形
style="cursor:nw-resize"
左上箭头形
style="cursor:w-resize"
左箭头形
style="cursor:s-resize"
下箭头形
style="cursor:se-resize"
右下箭头形
style="cursor:sw-resize"
左下箭头形
结构性定义
文件类型<HTML></HTML>
(放在档案的开头与结尾)
文件主题<TITLE></TITLE>
(必须放在「文头」区块内)
文头<HEAD></HEAD>
(描述性资料,像是「主题」)
文体<body></body>
(文件本体)
标题<H?></H?>
(从1到6,有六层选择)
标题的对齐 <H?ALIGN=LEFT|CENTER|RIGHT></H?>
区分<DIV></DIV>
区分的对齐 <DIVALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>
引文区块<BLOCKQUOTE></BLOCKQUOTE>
强调<EM></EM>
特别强调<STRONG></STRONG>
引文<CITE></CITE>
码<CODE></CODE>
样本<SAMP></SAMP>
键盘输入<KBD></KBD>
变数<VAR></VAR>
定义<DFN></DFN>
地址 <ADDRESS></ADDRESS>
大字<BIG></BIG>
小字<SMALL></SMALL>
加粗<B></B>
斜体<I></I>
底线<U></U>
删除线<S></S>
下标<SUB></SUB>
上标<SUP></SUP>
打字机体<TT></TT>
预定格式<PRE></PRE>
(保留文件中空格的大小)
预定格式的宽度<PRE WIDTH=?></PRE>
(以字元计算)
向中看齐<CENTER></CENTER>
(文字与图片都可以)
闪耀<BLINK></BLINK>
(有史以来最被嘲弄的标签)
字体大小 <FONTSIZE=?></FONT>
(从1到7)
改变字体大小 <FONTSIZE=+|-?></FONT>
基本字体大小 <BASEFONTSIZE=?>
(从1到7; 内定为3)
字体颜色 <FONTCOLOR="#$$"></FONT>
($$为颜色代码)
修改页面的实用性HTML代码
贴图:<img src="图片地址">
加入连接:<a href="所要连接的相关地址">文字</a>
在新窗口打开连接:<a href="相关地址" target="_blank">文字</a>
移动字体(走马灯):<marquee>文字</marquee>
更改字体颜色:<font color="#value">
写上你想写的字</font>
(其中value值在000000与ffffff(16位进制)之间
消除连接的下划线:<a href="相关地址" style="text-decoration:none">写上你想写的字</a>
贴音乐:<embed src="音乐地址" width="宽度" height="高度" autostart=false>
贴flash: <embed src="flash地址" width="宽度" height="高度">
贴影视文件:<img dynsrc="文件地址" width="宽度" height="高度" start=mouseover>
换行:<br>
段落:<p>段落</p>
原始文字样式:<pre>正文</pre>
换帖子背景:<body background="背景图片地址">
固定帖子背景不随滚动条滚动:<body background="背景图片地址" body bgproperties=fixed>
定制帖子背景颜色:<body bgcolor="#value">
(value值见10)
帖子背景音乐:<bgsound="背景音乐地址" loop=infinite>
贴网页:<iframe. src="相关地址" width="宽度" height="高度"></iframe>
点击关闭窗口
<a href="javascript.:top.window.close();">点击关闭窗口</a>!
去掉主页右面的滚动条?**
<body scroll="no">
<body style="overflow-y:hidden">
HTML页面结构
<!DOCTYPE>
定义文档类型
<html>
定义文档的标题
<body>
定义文档的主体
<h1>to<h6>
定义HTML标题
<p>
定义段落
<br>
定义简单的换行
<hr>
定义水平线
<!--...-->
定义注释
表单
<form>
定义表单
<input>
定义输入控件
<textarea>
定义多行文本框
<button>
定义按钮
<select>
定义选择列表
<optgroup>
定义选择列表相关选项组合
<option>
定义选择列表中的选项
<label>
定义input元素的标注
<fieldset>
定义围绕表单中元素的边框
<legend>
定义fieldset元素的标题
<datalist>
定义下拉列表
<keygen>
定义生成密钥
<output>
定义输出的一些类型
框架
<frame>
定义框架的窗口或框架
<frameset>
定义框架集
<noframes>
定义针对不支持框架的用户的替代内容
<iframe>
定义内联框架
图像
<img>
定义图像
<map>
定义图像映射
<area>
定义图像地图内部的区域
<canvas>
定义图形
<figcaption>
定义figure元素的标题
<figure>
定义媒介内容的分组,以及它们的标题
链接
<a>
定义锚
<link>
定义文档与外部资源的关系
<nav>
定义导航链接
列表
<ul>
定义无序列表
<ol>
定义有序列表
<li>
定义列表的项目
<dir>
不赞成使用,定义目录列表
<dl>
定义定义列表
<dt>
定义定义列表中的项目
<dd>
定义定义列表中项目的描述
<menu>
定义命令的菜单/列表
<menuitem>
定义用户可以从弹出菜单调用的命令/菜单项目
<command>
定义命令按钮
表格
<table>
定义表格
<caption>
定义表格标题
<th>
定义表格中的表头单元格
<tr>
定义表格中的行
<td>
定义表格中的单元
<thead>
定义表格中的表头内容
<tbody>
定义表格中的主体内容
<tfoot>
定义表格中的表注内容(脚注)
<col>
定义表格中一个或多个列的属性值
<colgroup>
定义表格中供格式化的列祖
样式
<style>
定义文档的样式信息
<div>
定义文档中的节
<span>
定义文档中的节
<header>
定义section或page的页眉
<footer>
定义section或page的页脚
<section>
定义section
<article>
定义文章
<aside>
定义页面内容之外的内容
<details>
定义元素的细节
<dialog>
定义对话框或窗口
<summary>
为details元素定义可见的标题
<head>
定义关于文档的信息
<meta>
定义关于html文档的元信息
<base>
定义页面中所有链接的默认地址或默认目标
<basefont>
不赞成使用,定义页面中文本的默认字体 颜色或尺寸
简单可折叠目录树
鼠标点击项目可折叠展开子项目
- apps #应用目录
- admin #后台
- api #API接口
- common #公共目录
- home #前台
- config #配置
- config.php #系统配置
- database.php #数据库配置
- route.php #自定义路由配置
- core #框架核心
- data #sqilte数据库存储位置
- runtime #运行时目录
- static #静态资源目录
- template #模板文件夹目录
- admin.php #后台入口
- api.php #API接口入口
- index.php #前台入口
折叠展开内容
点击查看详细内容
展开的内容
哈哈哈哈哈
哈哈哈哈哈
酷酷酷酷酷
屌屌屌屌屌
<details>
<summary>点击查看详细内容</summary>
输入展开的内容</details>
未完待续 持续添加