HTML
资源站:
W3school
记录一些常用便捷的功能,用于做HTML单机版的日志。
保留字使用
常用功能记录
代码段设置
<pre style="background:#eee;color:#360">111<pre>
设置代码段:灰底绿字
按钮-编辑框
<input type="button" onclick="getElements()" value="holle" />
<button onClick="getElements()">click me</button><br />
<input name="myInput" type="text" size="20" />
第一行:参1.编辑框型按钮,参2.功能调用,参3.按钮显示字符
第二行:按钮,显示字符’click me’ ◎◎◎ br.回车符等同于p>& nbsp;</p
第三行:编辑框
目录
外联JS and CSS
<link rel="stylesheet" href="../test.css" type="text/css" data-for="result">
link 单独一行,无需结尾/link
href= 相对路径:
当层文件夹直接写文件名。
俩点表示上层文件夹。
内脚本编辑
<head>
<style type="text/css">
h1 {color:red}
p {color:blue}
</style>
</head>
内联必有:type=“text/css”
设置保留字n1和p在 body 中的统一属性。
属性 | 值 | 描述 |
---|---|---|
type | text/css | 规定样式表的 MIME 类型 |
属性说明
关键字 | 描述 |
---|---|
style | 指定CSS 样式 |
class | 类,引用样脚本中的类型变量 |
id | 局部属性 |
title | 额外信息 |
dir | 文本方向 |
draggable | 可否拖动 |
accesskey | 激活元素的快捷键 |
tabindex | tab 键次序 |
data-* | 存储页面或exe文件的私有数据 |
功能&值
关键字 | 描述 |
---|---|
float | 浮动 |
position | 静态固定元素 |
display | 显示方式 |
可用值 | 描述 |
---|---|
background-color | 背景色 |
transparent | 透明 |
padding | 填充 |
margin-left | 左边距 |
margin-right | 右边距 |
inline-block | 同行排列[display用] |
absolute | 指定坐标[position用] |
例子:
<div style="float:left">例子1</div>
//左侧跟随浮动
<div style="position: absolute;width:100px">例子2</div>
//左侧留100宽度待用
<div style="display:inline-block;margin-left:50px">例子3</div>
//并列div(模块区)
脚本
这里另外转载【大鹏学前端的百度百科】
定义标签
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
p.no2 {background-color: gray; padding: 20px;}
</style>
<p class="no2">这个段落设置了内边距。</p>
脚本的定义
全局变量
<style type="text/css">
.test {
color:#223;
font-size:16px;
}
</style>
<p class="test">ssss</p>
.test前面的‘点’必须有
单页变量
<style type="text/css">
#just {
color:#223;
font-size:16px;
}
</style>
<p id="just">kjlasdhkjlh</p>
#just的#号必须有
特性:ID只能用于1页,属于局部变量。