markdown 常用语法

markdown 是轻量级的标记语言，可直接转为’html’
markdown 常用来编写电子书，课件等，可导入多种格式，如‘PDF’,’EPUB’等
markdown 语法非常简单，常用的标签有：
一级标题

一个文档应该只有一个大标题#

二级标题

三级标题

段落
html 是超文本标记语言

markdown 是超轻量级的标记语言

2.列表

有序列表
1.上午11点开会
2.中午12.00 午休
3.下午16：00 下班
无序列表

前段
- html
- css
- javascript
后端
- php
- java
- python

3.引用

其实我是一个爱说话的人
我喜欢看老师讲课
不逼迫自己学习，如何成为程序猿

4.代码块

单行代码
<?php include "header.php" ?>
多行代码

<!DOCTYPE html>
<html>
<head></head>
</html>

$name = 'admin';

# git 初始化
git init
#提交
git commit -m 20:46

5.链接

只显示链接文本
百度
全显示
百度 http://www.baidu.com
只显示链接
百度http://www.baidu.com

6.图片

7.表格

id	品名	单价	单位	数量	金额
1	电脑	4500	台	2	9000
2	手机	3500	台	1	3500

表格无法设置大小，列宽，以及行与列的合并
如果有个性化需求，可直接食用<table>标签

8.总结

markdown 语法规范并不统一，不同德工具预览效果并不一致
markdown 允许功能扩展，例如分式，流程图等
markdown 是出个程序员编写技术文档的必备工具，必须熟练掌握

标签和属性

1.html作用

序号	名称	描述	用途
1	HTML	超文本标记语言	页面结构
2	CSS	层叠样式	元素样式与排列
3	javaScript	前端通用脚本语言	元素行为与交互

javaScript,简称，也可用于服务器端编程，如NODE.JS

2.超文本标记语言

序号	名称	描述
1	超文本	普通文本上添加`属性`定义特殊行为
2	标记	使用`标签`作为页面元素的标识符
3	语言	没有流程控制算不真正编程语言

由此可见：标签与属性是html元素最重要的特征

3.html 元素

网页是html元素的集合：由功能各异的html元素按一定的规则排列而成
网页是二维平面：任何元素只存在垂直或者水平二种排列方式
根据元素的功能与排列方式，html元素分三类

序号	名称	描述	举列
1	块级元素	垂直排列，宽高可自定义，与内容无关	<div>,<p>
1	行内元素	水平排列，	<span>,<a>
1	垃圾元素	垂直排列，宽高可自定义，与内容无关	<img>,<video>

4.标签与属性

序号	名称	描述	案列
1	标签	元素的基本用途	<h3>hello</h3>
2	属性	元素的基本特征	<h3 class="title">hello</h3>

标签和属性，在不同的层级上对html元素进行描述
属性必须衣服于标签，不能独立使用

5.标签分类

序号	名称	语法	描述对象
1	双标签	<h3 class="title">hello</h3>	自定义内容
2	单标签	<img src="log.png" alt="logo">	外部资源

双标签：由其实标签与结束标签组成，属性写在起始标签中
单标签：也叫空标签，由属性指定描述对象，如src.

6.属性分类

序号	名称	描述	举例
1	预置属性	标签不同差异较大	<ul class="nav">…</ul>.
2	自定义属性	用户根据需求自定	<div data-index="5">…</div>

7.通用属性

尽管不同标签预置的属性各不相同，但也由一些是公共的属性，绝大多数标签都又具有

序号	属性名	描述	举例
1	id	元素的唯一标识	<div id="wrap">…</div>
2	class	给元素添加类样式	<div class="bos">…</div>
3	style	设置当前元素样式	<div style="..."></div>

8.属性和值

序号	值类型	描述	备注
1	字符串	<p class="active">…</p>
2	预定义值	<input type="text">	仅限预置
3	指定格式	<a href="https://php.cn">…</a>	url/email/…
4	数值(px)	<table width="200">…</table>	默认像素px
5	布尔值	<input type="email" required>	存在即为true

9.元素的种类

标签的的语化是元素的基本要求
html5 提供了大量语义化的元素
html 元素众多，但常用的并不多，我们要放在以下几类元素上

序号	元素类型	描述	举例
1	结构元素	布局	<header>,<main>,<nav>…
2	文本元素	内容	<p>,<addr>,<strong>…
3	链接元素	页面跳转	<a hrer="...">…</a>
4	列表元素	关联数据	<ul>+<li>,<ol>+<li>
5	表格元素	前后端交互	<form>+<label>+<input>..
6	其它元素	不常用	<iframe><video>…

特别是表单元素，唯一的入口，这是前后端最为重要的数据交互，也服务器安全方面唯一来源，更多元素标签，可参考HTML手册，或者上MDN官网查询

案例

语义化结构元素

1.常用标签

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

代码示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>元素标签与属性</title>
    <link rel="stylesheet" href="css/demo1.css" />
  </head>
  <body>
    <!-- 页眉 -->
    <header>
      <h1>&lt;header&gt;</h1>
    </header>
    <div class="container">
      <!-- 边栏 -->
      <aside>
        <h1>&lt;header&gt;</h1>
      </aside>
      <!-- 主体区 -->
      <main>
        <h1>&lt;main&gt;</h1>
      <div>
        <section>
          <h1>&lt;section&gt;</h1>
        </section>
        <section>
          <h1>&lt;section&gt;</h1>
        </section>
      </div>
    </div>
  </main>
    <!-- 页脚 -->
    <header>
      <h1>&lt;footer&gt;</h1>
    </header>
  </body>
</html>

2020/09/28作业《markdown语法学习和语义化结构元素的种类和用途》

一级标题