HTML结构标记

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

####1.main标签

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

####2.article标签

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

####3.section标签

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

2.不要把section作为一个普通的容器使用,这本应该是div的用法。(还是需要慎重点)
image.png

####4.nav标签

####5.aside标签

####1.main标签

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

####2.article标签

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

####3.section标签

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

2.不要把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

替换元素与非替换元素

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

  • 行内元素:
    1.设置宽高无效
    2.设置margin,左右有效,上下无效;设置padding,上下左右都有效,即会撑大空间
    3.不能自动换行
    如:

image.png
image.png

  • 块级元素:
    1.能够设置宽高
    2.margin,paddin上下左右都有效
    3.可以自动换行
    4.多个块级元素,从上到下排列

但是问题来了~
是行内元素,为什么它可以设置宽高?
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概述

目录:
1.W3C简介
2.MDN简介
3.HTML所有标签列表(含部分解释)
4.空标签
5.可替换标签
6.其他

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

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

###3.HTML所有标签列表

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

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

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

浅谈HTTP

### 浅谈HTTP

目录:
1.补充
2.HTTP 请求包括哪些部分,如何用Chrome开发者工具查看 HTTP 请求内容
3.HTTP 响应包括哪些部分,如何用Chrome开发者工具查看 HTTP 响应内容
4.如何使用 curl 命令

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

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

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

####2.请求
请求包含四部分:进行描述的起始行,包含属性的首部行,回车,以及可选的,包含数据的主体部分。
用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的使用:
现在用到的几种:
1.获取页面内容

curl https://www.baidu.com 

2.显示HTTP头

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

3.将链接保存到文件

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. 每天都要学习,一鼓作气,完成课程;

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

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