博客列表 >markdown以及emmet语法

markdown以及emmet语法

xueblog9的进阶之旅
xueblog9的进阶之旅原创
2022年07月03日 15:55:17423浏览

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">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>test</title>
  8. </head>
  9. <body>
  10. <style>
  11. h1 {
  12. color: rgb(0, 255, 0)
  13. }
  14. </style>
  15. <h1>大家好,我是帅逼</h1>
  16. <script>
  17. document.body.style.backgroundColor = "yellow";
  18. document.body.style.backgroundColor = "blue"
  19. </script>
  20. </body>
  21. </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>;
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议