Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Markdown与HTML语义化结构元素学习初体验
Blogger Information
Blog 4
fans 0
comment 0
visits 3123
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与HTML语义化结构元素学习初体验
朝与同歌暮同酒
Original
638 people have browsed it

什么是MarkDown

  • markdown是一种轻量级的标记语言。通过简单的标签，即可实现内容优雅的排版。
  • 常用来快速记录笔记
  • 一个文档只有一个大标题

MarkDown的语法

  1. 标题
    标题总共分为六个层级，分别用#，##，###…表示一至六级标题，其中一级标题，字号最大，且一个文档中只有一个
    ### 这是一个三级标题

    这是一个三级标题

  2. 文本常用的格式标签
    *斜体*
    斜体
    **加粗**
    加粗
    ~~删除线~~
    删除线
  3. 列表
    列表分为有序列表和无序列表，有序列表即有一定的顺序，可以用1，2，3等表示顺序，无序列表即没有特定排列顺序的列表，列表之间支持嵌套
    有序列表：
    1. 序列1
    无序列表：
    - 无序列表
  4. 引用
    > 这是一条引用

    这是一条引用

  5. 代码
    代码的表示分为两种，分别是单行代码表示和多行代码表示
    单行代码：
    ``：用两个重音符号包裹
    多行代码:
    ```html… ```：三个重音符号后，可以加上语言类型，目的是针对不同的语言进行关键词突出显示
    1. <p>段落</p>
    2. <p>段落</p>
    3. <p>段落</p>
  6. 链接
    [名称](url)
    显示名称
    [php中文网](https://www.php.cn)
    php中文网
    显示名称和链接
    [php中文网](https://www.php.cn)<https://www.php.cn>
    php中文网https://www.php.cn
    显示链接
    php中文网<https://www.php.cn>
    php中文网https://www.php.cn
  7. 图片
    ![图片示例](https://gravatar.wp-china-yes.net/avatar/74f66ef04d322203f2af76e345125b19?s=36&d=mm&r=g)
    图片示例
  8. 分隔条
    不少于三个 —- 字符
    ---

表格
表格的表示具体可见代码所示:

  1. |姓名|编号|
  2. | ---- | ---- |
  3. |张三|1|
  4. |孙二|2|
姓名 编号
张三 1
孙二 2

HTML基础

什么是HTML

HTML是一种超文本标记语言，之所以称为超文本，是因为它是在普通文本的基础上进行了加强。所谓加强，就是通过属性定义特殊行为，使用标签作为页面元素的标识符，所以标签与属性是HTML最重要的两个特征。但是，由于没有流程控制，所以HTML不算是一种真正的编程语言。

HTML元素

HTML元素只存在垂直或水平的两种排列方式，网页则是由功能不同的元素按一定规则排列而成的，根据功能与排列的不同可分为三大类:

序号 名称 描述 举例
1 块元素 垂直排列，两个块元素不能同时存在同一行，宽高可自定义 <div>,<p>
2 行内元素 可以在同一行排列，宽高由内容排列 <span>,<a>
3 行内块元素 即可水平排列，宽高又可自定义，多用于外部资源 <img>

标签的分类

1.单标签
也称为空标签，例如：<img>
2.双标签
由起始标签和结束标签组成,属性写在起始标签中，例如：<p></p>

常用的HTML标签

序号 标签 名称 描述
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 lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <!-- 引用外部css代码 -->
  7.     <link rel="stylesheet" href="demo1.css" />
  8.     <title>Document</title>
  9.   </head>
  10.   <body>
  11.     <!-- header -->
  12.     <header>
  13.       <h1>&lt;header&gt;</h1>
  14.     </header>
  15.     <div class="container">
  16.       <!-- aside -->
  17.       <aside>
  18.         <h1>&lt;aside&gt;</h1>
  19.       </aside>
  20.       <!-- main -->
  21.       <main>
  22.         <h1>&lt;main&gt;</h1>
  23.         <div>
  24.           <section>
  25.             <h1>&lt;section&gt;</h1>
  26.           </section>
  27.           <section>
  28.             <h1>&lt;section&gt;</h1>
  29.           </section>
  30.         </div>
  31.       </main>
  32.     </div>
  33.     <!-- footer -->
  34.     <footer>
  35.       <h1>&lt;footer&gt;</h1>
  36.     </footer>
  37.   </body>
  38. </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. }

显示效果如下:

总结

今天学习的内容主要分为两大部分，一部分是MarkDown语法，另一部分是HTML基础，在开头还讲了软件的安装与一些常用插件的安装。其中MarkDown语法主要是为了记笔记使用，这是一种很便捷的快速记录方法。另外，在HTML中需要着重记忆的有以下几点：

  • 表单是除了URL之外，与后端进行交互的唯一入口
  • HTML中有语义标签，例如<header>,<main>,<aside>,<footer>等。这些标签的作用，可以全部使用div或其它元素代替。但是推荐在构建页面的时候，使用语义标签，这样更有助于我们的代码更加有清晰和有条理。即页面有页头，页面主题和页尾，而不是 div div div
Correcting teacher：天蓬老师天蓬老师

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