HTML结构标记

之前学习的时候，基本都是用div完成的，感觉不是很好，所以把HTML5中的结构标记做一个梳理

####1.main标签

元素呈现了文档或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。这部分内容在文档中应当是独一无二的，不包含任何在一系列文档中重复的内容，比如侧边栏，导航栏链接，版权信息，网站logo，搜索框（除非搜索框作为文档的主要功能）。
image.png

####2.article标签

元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。
比如，我们写一篇新闻，其里边依然可以包含header，section等….
image.png

####3.section标签

元素标示文档中的一个区域（或节），比如，内容中的一个专题组，一般来所会有包含一个标题。一般通过是否包含一个标题（h1-h6）作为子节点来辨识section。
注意
１．如果内容要分成几部分，就使用

２．不要把section作为一个普通的容器使用，这本应该是div的用法。（还是需要慎重点）
image.png

####4.nav标签

####5.aside标签

####1.main标签

元素呈现了文档或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。这部分内容在文档中应当是独一无二的，不包含任何在一系列文档中重复的内容，比如侧边栏，导航栏链接，版权信息，网站logo，搜索框（除非搜索框作为文档的主要功能）。
image.png

####2.article标签

元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。
比如，我们写一篇新闻，其里边依然可以包含header，section等….
image.png

####3.section标签

元素标示文档中的一个区域（或节），比如，内容中的一个专题组，一般来所会有包含一个标题。一般通过是否包含一个标题（h1-h6）作为子节点来辨识section。
注意
１．如果内容要分成几部分，就使用

２．不要把section作为一个普通的容器使用，这本应该是div的用法。（还是需要慎重点）
image.png

####4.nav标签

####5.aside标签

####6.header标签

元素表示一组引导性的帮助，可能包含标题元素，也可以包含其他元素，像logo、分节头部、搜索表单等。就是一个页面的头部信息。
image.png

####7.footer标签

元素表示最近一个章节内容或者根节点元素的页脚。一个页脚通常包含作者、版权数据、相关链接等信息。注意
元素内的作者信息应包含在
元素中。
image.png

####8.hgroup标签
The HTML

element represents a multi-level heading for a section of a document. It groups a set of

–

elements.
表示文档的多层次标题，包含h1-h6。就是标题多的时候采用。
image.png

####9.address标签
用来呈现联系方式、电话、地址、邮箱等内容；
image.png
(https://upload-images.jianshu.io/upload_images/7513933-f1644d596eb39e6b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

####6.header标签

元素表示一组引导性的帮助，可能包含标题元素，也可以包含其他元素，像logo、分节头部、搜索表单等。就是一个页面的头部信息。
image.png

####7.footer标签

元素表示最近一个章节内容或者根节点元素的页脚。一个页脚通常包含作者、版权数据、相关链接等信息。注意
元素内的作者信息应包含在
元素中。
image.png

####8.hgroup标签
The HTML

element represents a multi-level heading for a section of a document. It groups a set of

–

elements.
表示文档的多层次标题，包含h1-h6。就是标题多的时候采用。
image.png

####9.address标签
用来呈现联系方式、电话、地址、邮箱等内容；
image.png

替换元素与非替换元素

以前在自学的过程中，只了解到行内元素以及块级元素。

  • 行内元素：
    １．设置宽高无效
    ２．设置margin，左右有效，上下无效；设置padding，上下左右都有效，即会撑大空间
    ３．不能自动换行
    如：

image.png
image.png

  • 块级元素：
    １．能够设置宽高
    ２．margin，paddin上下左右都有效
    ３．可以自动换行
    ４．多个块级元素，从上到下排列

但是问题来了～
是行内元素，为什么它可以设置宽高？
image.png
我们很明显发现第二幅图的宽高被设置了，到底是怎么回事～
image.png

这里，实际上就是所谓的替换元素
替换元素在MDN上的解释：CSS 里，可替换元素（replaced element）的展现不是由CSS来控制的。这些元素是一类 外观渲染独立于CSS的 外部对象。 典型的可替换元素有 <img>、 <object>、 <video> 和 表单元素，如<textarea>、 <input> 。 某些元素只在一些特殊情况下表现为可替换元素，例如 <audio> 和 <canvas> 。 通过 CSS content 属性来插入的对象 被称作 匿名可替换元素（*anonymous replaced elements*）。

CSS在某些情况下会对可替换元素做特殊处理，比如计算外边距和一些auto值。

需要注意的是，一部分（并非全部）可替换元素，本身具有尺寸和基线（baseline），会被像vertical-align之类的一些 CSS 属性用到。

由于我的CSS水平感人，不太能理解所有的意思，参考了一些博客，就在我所学习到的知识范围内做了一个理解：可替换元素所显示的内容，需要浏览器根据元素的属性去判断。
比如元素，本身并没有什么内容，内容是有属性src决定的；又如

所以，我们刚才的，由于虽然是行内元素，但是也是替换元素，宽高由属性src的内容决定。而作为行内元素，为非替换元素，它是什么，就显示什么，有行内非替换元素的特征。

写完了还有点乱～遇到了，接着写～

HTML概述

目录：
１．W3C简介
２．MDN简介
３．HTML所有标签列表（含部分解释）
４．空标签
５．可替换标签
６．其他

###１．W3C简介
W3C（万维网联盟），听名字就是一个机构，details是在web技术领域最具权威和影响力的国际中立性技术标准机构。比如给超文本标记语言（HTML）制定标准。为什么要制定标准呢？因为浏览器有很多，常见的chrome opera firefox safari ie等，要是这几家都自己玩自己的，那么问题就非常多了。所以，W3C制定标准，大家都采用这个标准，世界就简单了许多。

###２．MDN是什么
我们这里说的MDN（Mozilla Developer NetWork. Mozilla Developer Center），指的是MDN Web Docs，看名字就是“MDN 网络文档”，实际上是汇集众多Mozilla基金会产品和网络技术开发文档的免费网站。既然是免费＋文档，我们当然可以在MDN多查阅所需要的东西～

###３．HTML所有标签列表

  • 定义注释
  • <!DOCTYPE> 定义文档类型
  • 　定义超链接
  • 定义缩写
  • 　　定义地址元素
  • 　　定义图像映射中的区域
  • 　　定义article
  • 　　定义粗体文本
    *　　定义页面所有链接的基准URL
  • 　　定义文本显示的方向
  • 　　定义长的引用
  • 　　定义body元素
  • \<br> 　　插入换行符
  • 　　定义图形
  • 　　定义表格标题
  • 　　定义引用
  • 　　定义计算机代码文本
  • 　　定义表格列的属性
  • 　　定义表格列的分组
  • 定义命令按钮
  • 　　定义下拉列表
  • 　　定义　定义的描述
  • 　　定义删除文本
  • 　　定义元素的细节
  • 　　定义　定义项目
  • 　　定义文档中的一部分
  • 　　定义　定义列表
  • 　　定义　定义的项目
  • 　　定义强调文本
  • 　　定义外部交互内容或插件
  • 　　定义fieldset
  • 　定义figure元素的标题
  • 　　定义媒介内容的分组以及它们的标题
  • 　　定义section或page的页脚
  • 　　定义表单

  • to

    　　定义标题１到标题６
  • 　　定义文档的信息
  • 　　定义section或page的页眉
  • 　　定义有关文档中的section的信息
  • 　　定义html文档
  • 　　定义斜体文本
  • 　　定义图像
  • 　　定义输入
  • 　　定义插入文本
    *　　定义生成密钥
  • 　　定义键盘内容
  • 　定义表单控件的标注
  • 　　定义fieldset（自定义字段）的标题
  • 　　定义列表的项目
  • 　　定义资源引用
  • 　　定义图像的映射
  • 　　定义有记号的文本
  • 　　定义菜单列表
  • 　　定义元信息
  • 　　定义预定义范围内的度量
  • 　　定义嵌入对象
    • 　　定义有序列表
  • 　　定义选项组
  • 　　定义输出的一些类型

  • 　　定义段落

  • 　　为对象定义参数
  • 　　定义预格式化文本
  • 　　定义任何类型的任务进度
  • 　　定义短的引用
  • 　　定义若浏览器不支持ruby元素显示的内容
  • 　　定义ruby注释的解释
  • 　　定义ruby注释
  • 　　定义样本计算机代码

浅谈HTTP

###　浅谈HTTP

目录：
１．补充
２．HTTP 请求包括哪些部分，如何用Chrome开发者工具查看 HTTP 请求内容
３．HTTP 响应包括哪些部分，如何用Chrome开发者工具查看 HTTP 响应内容
４．如何使用 curl 命令

####１．补充
关于客户端与服务器：
web的内容都是存储在web服务器上，这些服务器存储了数据，如果HTTP客户端发出请求的话，服务器会提供数据。即：客户端向服务器发送HTTP请求，服务器会在HTTP响应中回送所请求的数据。
URI URL URN：

  • URI：统一资源标识符，可以标示唯一的一个资源。比如，ISBN:9787542637949 ，可以标识出一本书。
  • URL：统一资源定位符，可以提供找到该资源的路径。又因为它同样可以唯一的标识出一个资源，所以是URL的子集。
    *URN：统一资源名。作为特定内容的唯一名称使用，与目前的资源所在地无关。也是URI的子集。

方法：
常见的HTTP方法：
GET：获取
POST：发送
PUT：更新
DELETE：删除

####２．请求
请求包含四部分：进行描述的起始行，包含属性的首部行，回车，以及可选的，包含数据的主体部分。
用chrome进入百度，查看：
image.png
可以看到第一、第二部分

使用curl -d来试试POST上去的数据（第四部分数据没有显示）：
image.png
不过已经可以看到 content-length 以及 content-type

####3．响应
响应也包含四部分：进行描述的起始行，包含属性的首部行，回车，以及可选的，包含数据的主体部分。
用chrome进入百度，查看：
image.png

同样的可以用curl -I来查看

curl -I "https://www.baidu.com"

image.png

####curl的使用：
现在用到的几种：
１．获取页面内容

curl https://www.baidu.com

２．显示HTTP头

curl -I https://www.baidu.com （显示HTTP头）
curl  -i https://www.baidu.com（显示HTTP头和内容）

３．将链接保存到文件

curl https://www.baidu.com  > index.html

image.png

4．使用-d 发送POST请求

curl -d "1234" "https://www.baidu.com"

5．使用-v显示请求详细信息
6．使用-X指定请求方式
7．使用-H增加头部信息

命令行基础

##命令行基础

命令提示符是在操作系统中，提示进行命令输入的一种工作提示符。在不同的操作系统环境下，命令提示符各不相同。

#####1. ls命令
ls命令用于显示指定工作目录下之内容（列出目前工作目录所含之文件及子目录)。

常用：

  • ls -l ：除文件名称外，亦将文件型态、权限、拥有者、文件大小等资讯详细列出
  • ls -a：显示所有文件及目录 (ls内定将文件名或目录名称开头为”.”的视为隐藏档，不会列出)
  • ls -al：上边两个综合

#####2. cat命令
cat 命令用于连接文件并打印到标准输出设备上。
参数：-n/-b等，不一一介绍，以-n为例展示该命令

➜  demo ls
1.txt  2.md  3.txt

给 1.txt 中输入5行”这是一个测试“；2.md以及3.txt为空文件；

将 1.txt 的文档内容加上行号输出到 2.md：

➜  demo cat -n 1.txt > 2.md

打开 2.md
image.png

将 1.txt和2.md全部加到3.txt中：

cat 1.txt 2.md >> 3.txt

打开 3.txt
image.png

#####3. mv命令
Linux mv命令用来为文件或目录改名、或将文件或目录移入其它位置。

比较明显的意思：
mv 是move的缩写，有很移动的意思。第一层意思很容易理解，比如

mv a b

就是将a目录移入到b目录中
如何改名：
我们将刚才demo目录下的1.txt 改名为 1.md：

move 1.txt 1.md

image.png

#####4. touch命令
Linux touch命令用于修改文件或者目录的时间属性，包括存取时间和更改时间。若文件不存在，系统会建立一个新的文件。
参数较多，不一一列举，做一个简单的说明：
输入:

touch 4.md

查看文档时间：image.png
为体现其可以修改时间的属性，我们采用-d参数：

touch -d 2010-02-22 18:00 4.md

则文件4.md的时间属性被修改为：image.png

如何查看命令是如何使用的：使用explainshell.com
示例：
输入touch
image.png

会出现详细的用法，可以随时查询～～～

命令行基础

###如何使用git（超级基础版）

####1.只在本地使用
记清楚：

git init
git add
git commit

第一步：在需要初始化的目录下输入命令 ‘git init’ ，会产生一个仓库 .git ，据说有毒，就不点开看了。
image.png
这时候：我们可以用 ‘git status -sb’ 看看我们刚才的那些文件
image.png
提示的还挺明显的～

第二步：我们用 ‘git add’ 将文件添加到所谓的暂存区（我也不知道在哪）比如我们将 ‘1.md’ 添加进去
image.png
我们发现 1.md 前边由问号变为A，说明干成了。

第三步：我们就需要将刚才”暂存区“的文件提交到本地仓库！用’ git commit -m ”信息“ ‘，我们将刚才的 1.md提交进去（这一步需要添加注释，省的忘）
image.png
会发现，已经提交走了～～～
这时候怎么看变动呢？利用 ’git log‘ 去看就可以
image.png
到此，如何在本地使用就说完～～～0.0不过文件变动怎么办，我还没看，也没遇到问题～先挖个坑～

####2.将本地仓库上传到github

####3.在github 上创建仓库，下载到本地

开博大吉

9-11

前端的学习，断断续续，犹豫不决，已经持续了两年，不如一鼓作气尽快完成，在这里记录学习的过程。

今天的课堂上明确了几个在学习时候的小目标：

  1. 课堂需要记笔记，不然上完课忘的太快；

  2. 及时的做一些练习demo，巩固学习效果；

  3. 每天都要学习，一鼓作气，完成课程；

在学习的时候，一定要注意性价比。即什么时候该干什么事情一定要清楚了，不要去挖一些不该去挖的坑；

在学习的时候，认真完成练习。将每一次练习当作面试题来处理，等，关于学习上的感想，就放在这个文章里，没事就来更新下。