简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > markdown以及emmet语法
Blogger Information
Blog 25
fans 1
comment 0
visits 12706
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
markdown以及emmet语法
xueblog9的进阶之旅
Original
414 people have browsed it

markdown常用语法

markdown常用语法

1. 语法1-标题使用

“#”一个“#”号为一级标题
“##”以此类推这个是二级标题
“###”三级标题
“####”四级标题
“#####”五级标题
“######”六级标题，最多六级

2. 列表

2.1 无序列表用“- + * ”表示，通常用“- ”（空格生成），首行按tab为下一级标题，示例如下

  • 公司1
  • 公司2
  • 公司3
    • 财务部
    • 开发部
    • 市场部

2.2 有序列表用数字加”.”，首行按tab为下一级标题，示例如下

  1. 公司1
  2. 公司2
  3. 公司3
    3.1 财务部
    3.2 开发部
    3.3 市场部

3. 表格

表格”|”区分列，”-“区分表头与其他行
人员 身高 体重 视力
张三 160 130 5.0
李四 170 140 5.1

4. 图片

格式：！【说明】（连接地址），符号均为英文状态下输入

php20期

5. 代码块

单行代码

<echo> hello </echo>

多行代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>test</title>
  9. </head>
  11. <body>
  12.     <style>
  13.         h1 {
  15.              color: rgb(0, 255, 0)
  16.         }
  17.     </style>
  18.     <h1>大家好,我是帅逼</h1>
  19.     <script>
  20.         document.body.style.backgroundColor = "yellow";
  21.         document.body.style.backgroundColor = "blue"
  22.     </script>
  23. </body>
  25. </html>

emmet语法

1. 父子关系用“>”;

2. 兄弟关系用“+”;

3. id用“#”表示;

4. class用“.”表示;

5. 子标签内容用“{}”括起来;

6. 生成几列子标签用“*数字”;

7. 内容上的数字区分用“$@数字”，单独“$”号从1开始顺序生成，“$@5”从5开始顺序生成，“$@-5”从5开始倒序生成;

8. “（）”表示括号内的所有标签为一个整体与括号外处理父子或者兄弟的关系，类似加减乘除括号的作用;

举例说明：

(aa>bb#123.4565>cc{搜索$@-5})+(dd>ee#789.9873>ff{商品$@5})生成结果：

  1. <aa>
  2.     <bb id="123" class="456"><cc>搜索9</cc></bb>
  3.     <bb id="123" class="456"><cc>搜索8</cc></bb>
  4.     <bb id="123" class="456"><cc>搜索7</cc></bb>
  5.     <bb id="123" class="456"><cc>搜索6</cc></bb>
  6.     <bb id="123" class="456"><cc>搜索5</cc></bb>
  7. </aa>
  8. <dd>
  9.     <ee id="789" class="987"><ff>商品5</ff></ee>
  10.     <ee id="789" class="987"><ff>商品6</ff></ee>
  11.     <ee id="789" class="987"><ff>商品7</ff></ee>
  12. </dd>

html总结

html结构

  1. html代码:模板/结构；
    1.1 html只是给结构化文本,引入外部元素,必须使用标签进行包装；
    1.2 html为根标签,包含两个子标签总体结构为:总体结构为并列:<html>….<head>….</head>-….<body>…</body>…</html>；
    1.3 html根标签,根元素；
    1.4 head:头元素,给浏览器,搜索引擎看的,用户不关注；
    1.5 body:主体元素,这才是用户真正在页面中看到的内容,主要编程的位置；
  2. css样式:html元素的样式与布局；
    2.1 对某一个标签进行声明,属于静态的属性,对位置上没有要求,建议可以养成习惯在head与body之间进行输入；
    2.2 代码格式:<style>h1{color: beige;}</style>,对h1标签进行声明；
  3. js脚本:javascript,页面元素的交互；
    3.1 属于动态的,对位置有要求,代码执行的流程是从上到下,js脚本必须在被执行标签之后,编写位置在</body>的结束标签之前；
    3.2 执行js代码会打断整个html文本的执行,所以位置在</body>的结束标签之前；
    3.2 实例:<body>……<script>document.body.style.backgroundColor = “red”</script></body>；
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！