markdown,html,css笔记

markdown 基础

	你好，我是markdown文档

介绍

Markdown是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式。

说的简单一点，markdown其实就是一种简单的文本，与普通的文本文件 (txt文件)不同的是，支持一些特殊的符号，通过特殊的符号来表示不同的语义，并且给予不同的样式。同时普通的文本文件后缀是.txt,而markdown文件的后缀是.md。

宗旨和特点

markdown 实现的宗旨是[易读易写]。方便书写和阅读，通过特殊的符号实现一些基础的样式，而不同的符号也代表了不同的语义，例如#表示一级标题，##则表示二级标题。

同时，markdown文件还可以兼容一些html标签，让markdown书写的范围应用更广。

在markdown文件中，一些特殊字符会被转换，所以想要在markdown中输出一些特殊字符需要使用实体字符才能输出成。

例如想要输出? 必须使用实体字符。

http://tool.xker.com/htmlchar.php

markdown常用语法

标题

在markdown中，存在不同级别的标题，类似于我们在作文中的标题，共有六级标题。 每一级标题通过#来表示，例如一级标题是一个#，二级标题就是两个#，以此类推。

区块引用

在markdown中，如果想要表示区块引用，可以使用>来表示，例如，表示某人说的一句话。

李白：安能使我摧眉折腰事权贵，使我不得开心颜

同样，我们的引用也可以是多行的，那么就可以在>一行的后面输入回车，然后继续来书写内容，如下：

世上本无路，走的人多了，也就有了路 * -- 鲁迅 * 鲁迅（1881年9月25日－1936年10月19日），原名周樟寿，后改名周树人，字豫山，后改豫才，“鲁迅”是他1918年发表《狂人日记》时所用的笔名，也是他影响最为广泛的笔名，浙江绍兴人。著名文学家、思想家，五四新文化运动的重要参与者，中国现代文学的奠基人。毛主席曾评价：“鲁迅的方向，就是中华民族新文化的方向。

在区块引用中，也可以使用其他的markdown语法，例如标题：

兄弟连H5全栈开发课程
  1. HTML5 + css3
  2. JavaScript
  3. jQuery
  4. 响应式网页设计
  5. Less and Sass
  6. Vue.js
  7. Node.js
  8. Express
  9. ......

列表

在markdown语法中，支持列表的语法，而列表通常情况下分为无序列表和有序列表。

无序列表

markdown中，想要实现无序列表的样式，可以在每一项选项前添加*或者+或者-，如下：

  • 白日依山尽
  • 黄河入海流
  • 欲穷千里目
  • 更上一层楼

当然也可以使用 + 或者 - 来实现无序列表

  • 锄禾日当午
  • 汗滴禾下土
  • 谁知盘中餐
  • 粒粒皆辛苦

有序列表

markdown中，想要实现有序列表的样式，可以在每一个选项前面使用数字和英文的点.

h5学习顺序
  1. html
  2. css
  3. JavaScript

代码区块

和程序相关的写作或是标签语言原始码通常会有已经排版好的代码区块，通常这些区块我们并不希望它以一般段落文件的方式去排版，而是照原来的样子显示，Markdown会用pre和code标签来把代码区块包起来。

要在 Markdown 中建立代码区块很简单，只要简单地缩进 4 个空格或是 1 个制表符就可以，例如，下面的输入：

function show () {
    alert(‘hello,world‘)
}
show()

在上面的内容的前面，输出四个空格或者一个制表符(一下tab键) ，就可以实现代码段的样式。

分割线

可以在一行中使用三个以上的星号，减号，下划线来建立一个分割线，行内不能有其他内容,但是可以在其中插入空格 ，下面的几种写法都可以创建分割线:

***
* * *
___
_ _ _
________

链接

在markdown中表示链接，可以按照下面的语法来实现。

首先，链接文字要使用[] 来表示链接的名字，而在链接的网址则在后面使用()来表示。 如下：

[百度](http://www.baidu.com)

效果如下：

百度

强调

在正常的文本编辑中，经常会碰到需要强调的内容，那么可以使用星号(*)和下划线(_)来表示需要强调的内容。

如下：

*hello,world*

效果如下： hello,world

如果用两个星号或者下划线，则字体会加粗，强调级别更高。

如下：

**hello,world**

效果如下：

hello,world

代码

如果要在文档内容中表示代码，则可以使用反引号(``)将内容包裹起来。 如下：

`var a = "hello,world";
 alert(a)
`

效果如下： var a = "hello,world" alert(a)

图片

在日常的编辑中，如果需要加入图片，可以采用下面的方式：

![图片加载失败时替代文字](图片地址 "图片的提示文字")

![郁金香](./Tulips.jpg "郁金香")

效果如下： 

反斜杠的作用

在markdown中，存在一些特殊的字符，具有一定的语法意义，例如#表示标题等等，那么在文字编辑的时候想要输出这些特殊的字符不能够直接输出，而是应该使用\转义。

如下：

\#

效果如下： #

这样就能够在正常的编辑中输出这些特殊的字符。

HTML

  1. 什么是html

    • HTML 是用来描述网页的一种语言。
    • HTML 指的是超文本标记语言: Hyper Text Markup Language
    • HTML 不是一种编程语言，而是一种标记语言
    • 标记语言是一套标记标签 (markup tag)
    • HTML 使用标记标签来描述网页
    • HTML 文档包含了HTML 标签及文本内容
    • HTML文档也叫做 web 页面
  2. meta用法
    • 标签提供了 HTML 文档的元数据。元数据不会显示在客户端，当时会被浏览器解析。META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。
    • 实例 1 - 定义文档关键词，用于搜索引擎：<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
    • 实例 2 - 定义web页面描述：<meta name="description" content="Free Web tutorials on HTML and CSS">
    • 实例 3 - 定义页面作者:
      <meta name="author" content="Hege Refsnes">
    • 实例 4 - 每30秒刷新页面：
      <meta http-equiv="refresh" content="30">
  3. html中head标签内相关内容
    • meat标签指定相应的字符集和页面描述关键字等
    • tilte标签说明网页的题目显示在页面左上角（最好写在meat标签下面）
  4. body标签内相关内容
    • a标签引用链接如
      <a herf="http://www.baidu.com">baidu</a>
    • im标签引用图片
      <img src="图片路径">文字</img>
  5. 带有语义的标签
    • <h></h>标签有h1~h6级标题标签
    • <p></p>段落
    • <hr>分割线
    • <br>换行
    • <em></em>表示强调
    • <strong></strong>表示强调，比em更重
    • <abbr> </abbr>定义缩写
    • <address> </address>定义地址元素
    • <blockquote> </blockquote>定义块引用，通常会产生缩进
    • <cite> </cite>引用某本书，进行说明
    • <ins> </ins>定义被插入文本
    • <del> </del>定义被删除文本
  6. 带有样式的标签，同时带有语义
    • <b> </b>定义粗体文本
    • <i> </i>定义斜体文本
    • <big> </big>定义大号文本
    • <small> </small>定义小号字体文本
    • <sup> </sup>上标文本
    • <sub </sub>下标文本
    • <bdo> </bdo>定义文本显示方向，属性dir,值为ltr,rtl
  7. 输出类标签
    • <pre></pre>原样输出
    • <code></code>定义代码文本
    • <kbd></kbd>定义键盘文本
    • <var></var>定义变量
  8. 功能类标签
    • <a></a>定义超链接或锚点
    • <ul> <li></li></ul>定义无序列表
    • <ol><li></li></ol>定义有序列表
    • <iframe></iframe>页面嵌套
    • <dl></dl> <dt></dt> <dd></dd>项目列表描述
    • <img>标签 属性有src="1.jpg" alt="替代文本" width="宽" height="长"
    • <map></map>定义图像映射
    • <area></area>定义图像映射内部区域
    • <base></base>基础连接
    • <table></table>定义表格
    • <caption></caption> 表格标题
    • <th></th>表格页眉
    • <tr></tr>表格的行
    • <td></td>表格的单元格
    • <thead></thead>表格的头部
    • <tbody></tbody>表格的主干
    • <tfoot></tfoot>表格的尾部
    • <form></form>表单
    • <input></input>输入域。有type属性，alt属性，src属性，checked属性，disable属性等
    • <textarea></textarea>文本输入区，其属性有cols，rols，disabled，name，readonly
    • <button></button>按钮,其属性有type(reset,button,submit)，name，value，disabled
    • <select></select>下拉菜单，属性有disabled，multipe，name，size
    • <optgroup></optgroup>定义选项分组，有label属性和disabled属性
    • <option></option>定义下拉列表选项，属性有disabled，label，selected，value
    • <fieldest></fieldest>表单中相关元素分组
    • <legend></legend>定义分组标题

css

什么是CSS

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS的使用方式

  1. 内联样式，也称行内样式，写在标签内的样式，只影响该标签内的元素。适合范围，除<script>外的所有子标签。
  2. 内部样式，定义在style标签中，放在head标签中，设置的样式可以影响整个HTML页面。
  3. 外部样式，将CSS样式编写并安放在一个独立的.css文件内。

CSS基础选择器

  • html选择器：通过html标签名来选择元素:

    1. 所有的html标签都可以当做选择器
    2. 无论标签藏多深都会被选中
    3. 选择的是所有的标签而不是具体某个标签。所以说我们通过html标签选择器来设置的都是一些共性问题。
  • class选择器：
    1. 任何的标签都可以有id属性和属性值(因为id是一个全局属性)。id命名不能随意的命名。大小写敏感 ，id的名字中可以有数字字母下划线，但是要以字母开头。
    2. 但是id名不能够重复
  • id选择器：
    1. 任何的标签都可以使用class属性(class属性也是一个全局属性)
    2. class属性名可以重复使用
    3. 一个class属性中，可以有多个class属性值。

块级元素和行内元素

概念

  • 块级元素：是指块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。例如<div>标签。
  • 行内标签：可以在同一行内分布。如<span>标签。

两种元素的区别

  1. 行内元素部不能够设置宽度和高度。行内元素的宽度和高度是标签内容的宽度和高度。块级元素可以设置宽度和高度。
  2. 块级元素会独占一行。而行内元素却部能够独占一行，只能和其他的行内元素共用一行。
  3. 如果块级元素不设置宽度，那么块级元素会自动的沾满父元素的全部宽度。

块级元素和行内元素的转换

使用display属性进行转换。如下：

display：block ,inlin-block

综合选择器

  • 后代选择器:div p
  • 直系子元素选择器:div>p
  • 相邻兄弟选择器:div+p
  • 普通兄弟选择器:div~p
  • 交集选择器:h3.test
  • 并集选择器:div,p
  • 序列选择器:ul li:first-child ul li:last-child（只能选第一个和最后一个）

CSS的继承性和层叠性

  • CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定 html 标签元素，而且应用于其后代。比如下面代码：如某种颜色应用于 p 标签，这个颜色设置不仅应用 p 标签，还应用于 p 标签中的所有子元素文本，这里子元素为 span 标签。
  • 层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。
  • 权重问题： 通用选择器（*） < 元素(类型)选择器 < 类选择器 < 属性选择器 < 伪类 < ID 选择器 <内联样式

注释：!important 能够把"单独属性"的权重变为无限大。 尽量少用。

时间： 2024-07-28 13:56:12

markdown,html,css笔记的相关文章

HTML+CSS笔记 CSS中级 颜色&长度值

颜色值 在网页中的颜色设置是非常重要,有字体颜色(color).背景颜色(background-color).边框颜色(border)等,设置颜色的方法也有很多种: 1.英文命令颜色 语法: p{color:red;} 2.RGB颜色 这个与 photoshop 中的 RGB 颜色是一致的,由 R(red).G(green).B(blue) 三种颜色的比例来配色 p{color:rgb(133,45,200);} 每一项的值可以是 0~255 之间的整数,也可以是 0%~100% 的百分数. 每

css笔记（二）——几种常用的模式

文本垂直居中 对于行内元素,height会自动收缩到包裹住文本的高度,所以不存在这个问题.但是对于block和inline-block等盒子元素,如果设置了height属性,则文本默认会在上方显示.如果希望文本在垂直方向上居中,可以设置line-height属性等于height属性,或者大于height属性 <div> hello world </div> div { height: 200px; line-height: 200px; } 文本水平居中,图标分列左右两侧 效果是左

css笔记-display属性

css笔记-display属性 display属性可取值 display:none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | co

css笔记-选择器详解

css笔记-选择器详解 CSS通过选择器来定位要应用样式的元素. 下面对所有的选择器做了一个解释(CSS为版本号). CSS选择器详解 选择器 例子 例子描述 CSS .class .intro 选择 class="intro" 的所有元素. 1 #id #firstname id="firstname" 的所有元素. 1 * * 选择所有元素. 2 element p 选择所有 <p> 元素. 1 element,element div,p 选择所有

HTML/CSS笔记归纳整理

前言: 前端无非就是围绕标签.属性.属性值这三个词展开的. *HTML基本语法: 1. 常规标签 <标签 属性1="属性值1" 属性2="属性值2"></标签> # 一个标签可以没有属性也可以有多个属性, 属性和属性之间不分先后顺序. 2. 空标签 <标签 属性1="属性值1" 属性2="属性值2" /> # 空标签没有结束标签, 用"/"代替. *HTML标题: <

HTML+CSS笔记 CSS进阶再续

CSS的布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 CSS 布局样式或 CSS 布局模板.如果说布局模型是本,那么 CSS 布局模板就是末了,是外在的表现形式. CSS包含3种基本的布局模型,用英文概括为:Flow.Layer 和 Float. 在网页中,元素有三种布局模型:1.流动模型(Flow)2.浮动模型 (Float)3.

自用VS Code 上的Markdown 编辑器css

目标效果如下: 主题使用:Markdown Yellow 主题[https://marketplace.visualstudio.com/items?itemName=ms-vscode.Theme-MarkdownKit] 使用方法:F1 呼出命令栏 输入 Install Extension 回车  然后输入 Markdown Theme 点击下面的插件即可安装 随后重启vs code 随后转到 \Program Files (x86)\Microsoft VS Code\resources\

HTML+CSS笔记--1

(初接触html+css时一些笔记) 1.父盒子的高可以不用给,让里面的内容撑起来就好. 2.对于外边距合并问题,解决方法overflow : hidden;,或者是另外加一个边框可以下来. 3.对于网站的logo,我们要给它设置关键字,写在a元素里, 1 .logo a{ 2 display: block; 3 height: 40px; 4 text-indent: -2000em;/*首行缩进 em是一个字的大小,rem是以一个根的大小 这个字是给搜索引擎看的*/ 5 } 4.我们可以将具

HTML+CSS笔记 CSS中级 缩写入门

盒子模型代码简写 回忆盒模型时外边距(margin).内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左. 语法: margin:10px 15px 12px 14px;/*上设置为10px.右设置为15px.下设置为12px.左设置为14px*/ 通常有三种缩写的方法: 1.如果top.right.bottom.left的值相同, margin:10px 10px 10px 10px; 可缩写为: margin:10px; 2.如果top和