网页常用代码

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>不赞成使用,定义页面中文本的默认字体 颜色或尺寸


简单可折叠目录树

鼠标点击项目可折叠展开子项目




PbootCMS目录文件说明

  • 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>


未完待续 持续添加