简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > md常用语法html语义化结构元素
Blogger Information
Blog 18
fans 1
comment 0
visits 17187
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
md常用语法html语义化结构元素
α清尘
Original
850 people have browsed it

一.md常用语法html语义化结构元素

1.标题

一个文档只有一个大标题

标题用’#’表示；一级标题为#；二级标题为##；三级标题为###；
例如：

二级标题

三级标题

2.段落

这是一段段落；
html是超文本标记语言，markdown是轻量级的标记语言；

3列表

有序列表

  1. 周一打球
  2. 周二游泳
  3. 周三爬山

无序列表

  • 前端
    • html
    • css
    • javascript
  • 后端
    • php
    • java
    • python

ps：无序列表通常使用’-‘+一个空格来实现。

4引用

这是引用的一段话
引用通常用’>’来实现；

5块代码

单行代码
<?php echo ?>

多行代码

  1. <!Doctype html>
  2. <html>
  3. <head></head>
  4. <body>
  5. <h1>多行代码演示文档</h1>
  6. </body>
  7. </html>

6链接

只显示链接文本
php中文网

全部显示
php中文网https://www.php.cn

只显示链接
php中文网https://www.php.cn

7图片

课程

php课程

8表格

编号 名称 单价 单位 数量 金额
1 电脑 5000 台 2 10000
2 pad 3000 台 2 6000

语义化结构元素

常用标签

序号 标签 名称 描述
1 <h1>-<h6> 标题 通常用来划分或者标注内容中的文本段落
2 <header> 页眉 一般由导航logo等元素来构成
3 <footer> 页脚 一般由友情链接，联系方式，备案号，版权信息组成
4 <nav> 导航 导航通常由一个或多个<a>标签组成
5 <main> 主体 展示主题内容，建议一个页面只出现一次
6 <article> 文档 本意是文档，实际上可以充当其他内容的容器
7 <aside> 边栏 与主体无关的信息（广告位，相关推荐，阅读排行）
8 <section> 区块 文档或主体中的通用小组件
9 <div> 容器 本身无任何语义，通过它的属性来描述用途

实例

  • HTML页面
  1. <!Doctype html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  5.     <title>元素标签与属性</title>
  6.     <link rel="stylesheet" href="css/demo1.css" />
  7. </head>
  8. <body>
  9. <header>
  10.         <h1>&lt;header&gt;</h1>
  11.     </header>
  12. <div class="container">
  13.     <aside>
  14.         <h1>&lt;aside&gt;</h1>
  15.     </aside>
  16.     <main>
  17.         <h1>&lt;mian&gt;</h1>
  18.         <div>
  19.         <section>
  20.             <h1>&lt;section&gt;</h1>
  21.         </section>
  22.         <section>
  23.             <h1>&lt;section&gt;</h1>
  24.         </section>
  25.         </div>
  26.     </main>
  28. </div>
  29.     <footer>
  30.         <h1>&lt;footer&gt;</h1>
  31.     </footer>
  32. </body>
  33. </html>
  • css样式
  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  7. body {
  8.   width: 100vw;
  9.   height: 100vh;
  10.   display: grid;
  11.   grid-template-rows: 60px 1fr 60px;
  12.   gap: 10px;
  13. }
  15. header,
  16. footer {
  17.   height: 80px;
  18.   background-color: lightgreen;
  19.   text-align: center;
  20. }
  22. .container {
  23.   display: grid;
  24.   grid-template-columns: 200px 1fr;
  25.   gap: 10px;
  26.   padding: 10px;
  27.   background-color: lightskyblue;
  28. }
  30. .container > aside {
  31.   background-color: lightcyan;
  32.   text-align: center;
  33. }
  34. .container > main {
  35.   display: grid;
  36.   grid-template-rows: 1fr 200px;
  38.   background-color: wheat;
  39.   text-align: center;
  40.   padding: 10px;
  41. }
  42. .container > main > div {
  43.   display: grid;
  44.   grid-template-columns: 1fr 1fr;
  45.   gap: 10px;
  46. }
  47. main div section {
  48.   background-color: violet;
  49. }
  • 效果图展示
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！