Web develop guide book for my friends
代码反撇
比较多,加粗 斜体 等在中文里并不明显)支持更多语法,比如表格,比如代码高亮
表格 | 内容 |
---|---|
表 | 表 |
<div class="mz-alert alert-info">
<p>一个段落里面带了<code>代码</code></p>
</div>
*
(Shift_8)_
(Shift_-, 0 右边)~
(Shift_`,1 左边)`
(1 左边,英文输入法状态)在对空行的要求上比较高,比如三个反撇的代码块前后必须要有空行
taovip:某某
支持更多的图表格式,没具体用过不清楚
官方介绍
Hyber Text Markup Language, 超文本标记语言, 核心是 标记语言
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
</head>
<body>
<h1>一级标题</h1>
<p>这里是一段文字</p>
</body>
</html>
跟数学上的括号一样, 一定有开始和结束 <xxx>
和 </xxx>
(部分元素自闭合, 类似 <xxx />
这样的语法, HTML5 里允许部分自闭合元素可以直接写成 <xxx>
)
嵌套关系不能乱, <xxx>...</xxx>
里面可以有 <yyy>...</yyy>
, 但是不能 <xxx><yyy></xxx></yyy>
这样的情况
部分标记有上下级关系, 比如有序列表 <ol>
的下级是 <li>
部分标记是语义相关的, 插入和被插入时有限制, 比如 <p>
标签内部不能插入 <div>
标签
标记可以有多样的属性, 写在 <>
内部的后面, 一般是 xx="yy"
这样的语法, 比如链接标记可以有链接到哪里的属性, <a href="www.meideng.net">
常见属性
id
, 元素代号, 不能重复class
, 元素的样式类, 详见 CSS 部分Cascade Style Sheet 层叠样式表, 核心是 样式表
.orange-btn {
background-color: orange;
color: #fff;
padding: 5px 10px;
}
颜色规则
#rgb
, 等于 #rrggbb
#rrggbb
, 红 (r) 绿 (g) 蓝 (b) 三原色值, 范围是从 00~ff (十六进制, 对应十进制的 0~255)常用尺寸
px
像素, 屏幕上一个小点的大小em
字宽, 定义好字大小后等于一个字的宽度dx
dp
等, 移动设备上考虑的大小, 暂不介绍为一个 HTML 标记加上 class="orange-btn"
的属性即可将此样式应用到该标记部分上
会影响一个 HTML 元素样式的可能情况有
class=
的方式为其指定样式, 加 .
选择符, 如上大块代码#
选择符, 如 #header { background-color: #999 }
p { font-size: 14px }
style
属性, 如 <a style="display: none">
层叠生效, 所以叫 层叠样式表
内容 (content), 内补 (padding), 边框 (border), 外距 (margin), 从内到外, 矩形嵌套
尺寸描述顺序, 上, 右, 下, 左 (顺时针), 如果指定个数不够时, 后面没有的参照其对面的值
padding: 5px 10px 20px 15px
, 上 5px
, 右 10px
, 下 20px
, 左 15px
padding: 5px 10px 20px
, 上 5px
, 右/左 10px
, 下 20px
padding: 5px 10px
, 上/下 5px
, 右/左 10px
padding: 5px
, 上右下左都是 5px
TODO