diff --git "a/00-345円211円215円347円253円257円345円267円245円345円205円267円/01-VS Code347円232円204円344円275円277円347円224円250円.md" "b/00-345円211円215円347円253円257円345円267円245円345円205円267円/01-VS Code347円232円204円344円275円277円347円224円250円.md" index ba53a10f..a6c9d105 100644 --- "a/00-345円211円215円347円253円257円345円267円245円345円205円267円/01-VS Code347円232円204円344円275円277円347円224円250円.md" +++ "b/00-345円211円215円347円253円257円345円267円245円345円205円267円/01-VS Code347円232円204円344円275円277円347円224円250円.md" @@ -47,6 +47,8 @@ VS Code 的全称是 Visual Studio Code,是一款开源的、免费的、跨 - VS Code 官网: + + VS Code 的安装很简单,直接去官网下载安装包,然后双击安装即可。 ![](http://img.smyhvae.com/20190313_1750_2.png) @@ -76,7 +78,7 @@ VS Code用得熟不熟,首先就看你是否会用快捷键。以下列出的 - 「Cmd + 左右方向键」:在**整行**之间移动光标(很常用)。注:Win 的快捷键是「Fn + 左右方向键」 -- 「Cmd + Shift + \」:在**代码块**之间移动光标。 +- 「`Cmd + Shift + \`」:在**代码块**之间移动光标。 ### 删除操作 @@ -86,7 +88,7 @@ VS Code用得熟不熟,首先就看你是否会用快捷键。以下列出的 | option + delete | Ctrl + delete | 删除光标之后的一个单词 | | | **Cmd + delete** | | 删除光标之前的整行内容 | 很常用 | | Cmd + delete | | 删除光标之后的整行内容 | | -| Cmd + shift + K | Ctrl + Shift + K | 删除整行| 按「Cmd + X」也可以删除整行,虽然它的作用是剪切 | +| Cmd + shift + K | Ctrl + Shift + K | 删除整行| 「Cmd + X」的作用是剪切,但也可以删除整行 | 备注:上面所讲到的移动光标、删除操作的快捷键,在其他编辑器里,也是同样的操作。 @@ -97,6 +99,8 @@ VS Code用得熟不熟,首先就看你是否会用快捷键。以下列出的 | **Cmd + Enter** | Ctrl + Enter | 在当前行下面新增一行,然后跳至该行 | 即使光标不在行尾,也能快速向下插入一行 | | **Option + ↑** | Alt + ↑| 将代码向上移动 | 很常用 | | **Option + ↓** | Alt + ↓| 将代码向下移动 | 很常用 | +| **Option + Shift + ↑** | Alt + Shift + ↑| 将代码向上复制 | 很常用 | +| **Option + Shift + ↓** | Alt + Shift + ↓| 将代码向下复制 | 很常用 | ### JS语言相关 @@ -421,10 +425,8 @@ VS Code 默认支持 Emmet。更多 Emmet 语法规则,请自行查阅。 VS Code 有一个很强大的功能就是支持插件扩展。 - ![](http://img.smyhvae.com/20190418_1932.png) - 上图中,点击红框部分,即可在输入框里,查找你想要的插件名,然后进行安装。 我来列举几个常见的插件,这些插件都很实用。 @@ -435,11 +437,34 @@ VS Code 有一个很强大的功能就是支持插件扩展。 GitLens 在 Git 管理上有很多强大的功能,比如: +- 将光标放置在代码的当前行,可以看到这样代码的提交者是谁,以及提交时间。这一点,是 GitLens 最便捷的功能。 + - 查看某个 commit 的代码改动记录 - 查看不同的分支 -- 可以将两个 commit 进行代码对比,甚至可以将两个 branch 分支进行代码比对。这一点,简直是 GitLens 最强大的功能。 +- 可以将两个 commit 进行代码对比,甚至可以将两个 branch 分支进行整体的代码对比。这一点,简直是 GitLens 最强大的功能。 + +### Bracket Pair Colorizer 2:突出显示成对的括号【荐】 + +`Bracket Pair Colorizer 2`插件:以不同颜色显示括号并用连线标注括号范围。 + +### Rainbow Brackets: + +`Rainbow Brackets`插件:突出显示成对的括号。 + +### indent-rainbow:突出显示缩进 + +`indent-rainbow`插件:突出显示缩进。 + +安装完成后,效果如下图所示: + +![](http://img.smyhvae.com/20190418_1958.png) + + +### Project Manager + +工作中,我们经常会来回切换多个项目,每次都要找到对应项目的目录再打开,比较麻烦。Project Manager插件可以解决这样的烦恼,它提供了专门的视图来展示你的项目,我们可以把常用的项目保存在这里,需要时一键切换,十分方便。 ### RemoteHub @@ -468,22 +493,6 @@ GitLens 在 Git 管理上有很多强大的功能,比如: 安装了插件 `TODO Highlight`之后,按住「Cmd + Shift + P」打开命令面板,输入「Todohighlist」,选择相关的命令,我们就可以看到一个 todoList 的清单。 -### Bracket Pair Colorizer 2:突出显示成对的括号【荐】 - -`Bracket Pair Colorizer 2`插件:以不同颜色显示括号并用连线标注括号范围。 - -### Rainbow Brackets: - -`Rainbow Brackets`插件:突出显示成对的括号。 - -### indent-rainbow:突出显示缩进 - -`indent-rainbow`插件:突出显示缩进。 - -安装完成后,效果如下图所示: - -![](http://img.smyhvae.com/20190418_1958.png) - ### sftp:文件传输 如果你需要将本地文件通过 ftp 的形式上传到局域网的服务器,可以安装`sftp`这个插件,很好用。在公司会经常用到。 @@ -532,6 +541,21 @@ GitLens 在 Git 管理上有很多强大的功能,比如: } ``` +### highlight-icemode:选中相同的代码时,让高亮显示更加明显【荐】 + +VSCode自带的高亮显示,实在是不够显眼。用插件支持一下吧。 + +所用了这个插件之后,VS Code自带的高亮就可以关掉了: + +在用户设置里添加`"editor.selectionHighlight": false`即可。 + + +参考链接:[vscode 选中后相同内容高亮插件推荐](https://blog.csdn.net/palmer_kai/article/details/79548164) + +### 颜色主题推荐: SynthWave '84 + +`SynthWave '84` 这个主题很酷。 + ### Live Share:实时编码分享 `Live Share`这个神奇的插件是由微软官方出品,它的作用是:**实时编码分享**。也就是说,它可以实现你和你的同伴一起写代码。这绝对就是**结对编程**的神器啊。 @@ -546,11 +570,11 @@ GitLens 在 Git 管理上有很多强大的功能,比如: ![](http://img.smyhvae.com/20190418_2005.png) -### Settings Sync +### Settings Sync 【荐】 - 地址: -- 作用:多台设备之间,同步 VS Code 配置。 +- 作用:多台设备之间,同步 VS Code 配置。通过登录 GitHub 账号来使用这个同步工具。 ### vscode-pigments @@ -572,3 +596,6 @@ css颜色高亮显示。 同时,你也可以关注我在 GitHub 上的 [前端入门项目](https://github.com/qianguyihao/Web),超级详细和真诚。 +## 参考链接 + +「Vscode」打造类sublime的高颜值编辑器:https://idoubi.cc/2019/07/08/vscode-sublime-theme/ diff --git "a/00-345円211円215円347円253円257円345円267円245円345円205円267円/02-Git347円232円204円344円275円277円347円224円250円.md" "b/00-345円211円215円347円253円257円345円267円245円345円205円267円/02-Git347円232円204円344円275円277円347円224円250円.md" index 65af486e..be16469c 100644 --- "a/00-345円211円215円347円253円257円345円267円245円345円205円267円/02-Git347円232円204円344円275円277円347円224円250円.md" +++ "b/00-345円211円215円347円253円257円345円267円245円345円205円267円/02-Git347円232円204円344円275円277円347円224円250円.md" @@ -176,6 +176,10 @@ git cherry-pick commit1 ## git客户端推荐 +市面上的Git客户端我基本都用过了,我最推荐的一款Git客户端是:[Tower](https://www.git-tower.com) 或者 [Fork](https://git-fork.com)。 + +- GitUp: + 20180623时,网上看了下Git客户端的推荐排名: ![](http://img.smyhvae.com/20180623_1210.png) @@ -187,7 +191,6 @@ s ![](http://img.smyhvae.com/20180623_1305.png) -上面的Git客户端我基本都用过了,我最推荐的一款Git客户端是:[Tower](https://www.git-tower.com) 或者 [Fork](https://git-fork.com)。 diff --git "a/00-345円211円215円347円253円257円345円267円245円345円205円267円/03-GitHub347円232円204円344円275円277円347円224円250円.md" "b/00-345円211円215円347円253円257円345円267円245円345円205円267円/03-GitHub347円232円204円344円275円277円347円224円250円.md" deleted file mode 100644 index 54bdae8b..00000000 --- "a/00-345円211円215円347円253円257円345円267円245円345円205円267円/03-GitHub347円232円204円344円275円277円347円224円250円.md" +++ /dev/null @@ -1,13 +0,0 @@ - - -## GitHub的使用 - - -### GitHub添加wiki - - - -参考链接: - - -- \ No newline at end of file diff --git "a/00-345円211円215円347円253円257円345円267円245円345円205円267円/05-GitHub347円232円204円344円275円277円347円224円250円.md" "b/00-345円211円215円347円253円257円345円267円245円345円205円267円/05-GitHub347円232円204円344円275円277円347円224円250円.md" new file mode 100644 index 00000000..6f71d5c8 --- /dev/null +++ "b/00-345円211円215円347円253円257円345円267円245円345円205円267円/05-GitHub347円232円204円344円275円277円347円224円250円.md" @@ -0,0 +1,18 @@ + + +## GitHub的使用 + + +### GitHub添加wiki + +参考链接: + + +- + +### GitHub项目添加 licence + +参考链接: + +- + diff --git "a/00-345円211円215円347円253円257円345円267円245円345円205円267円/03-VS Code347円232円204円344円275円277円347円224円250円347円247円257円347円264円257円.md" "b/00-345円211円215円347円253円257円345円267円245円345円205円267円/05-VS Code347円232円204円344円275円277円347円224円250円347円247円257円347円264円257円.md" similarity index 100% rename from "00-345円211円215円347円253円257円345円267円245円345円205円267円/03-VS Code347円232円204円344円275円277円347円224円250円347円247円257円347円264円257円.md" rename to "00-345円211円215円347円253円257円345円267円245円345円205円267円/05-VS Code347円232円204円344円275円277円347円224円250円347円247円257円347円264円257円.md" diff --git "a/00-345円211円215円347円253円257円345円267円245円345円205円267円/03-Emmet in VS Code.md" "b/00-345円211円215円347円253円257円345円267円245円345円205円267円/07-Emmet in VS Code.md" similarity index 100% rename from "00-345円211円215円347円253円257円345円267円245円345円205円267円/03-Emmet in VS Code.md" rename to "00-345円211円215円347円253円257円345円267円245円345円205円267円/07-Emmet in VS Code.md" diff --git "a/01-html/01-html346円240円207円347円255円276円345円233円276円346円226円207円350円257円246円350円247円243円357円274円210円344円270円200円357円274円211円.md" "b/01-html/01-html346円240円207円347円255円276円345円233円276円346円226円207円350円257円246円350円247円243円357円274円210円344円270円200円357円274円211円.md" index 489b8402..d86cecb8 100644 --- "a/01-html/01-html346円240円207円347円255円276円345円233円276円346円226円207円350円257円246円350円247円243円357円274円210円344円270円200円357円274円211円.md" +++ "b/01-html/01-html346円240円207円347円255円276円345円233円276円346円226円207円350円257円246円350円247円243円357円274円210円344円270円200円357円274円211円.md" @@ -1,20 +1,17 @@ - > 本文最初于2015年10月01日发表于[博客园](http://www.cnblogs.com/smyhvae/p/4850684.html),并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我,一起入门和进阶前端。 > 以下是正文。 - 国庆节快乐,还在加班的童鞋,良辰必有重谢! ## 本文主要内容 - - 头标签 -- 排版标签:`

` `

` ```
` `
` `
` `
`
-- 字体标记:`

` `` `` `` `` `` -- 超链接 -- 图片标签 +- 排版标签:`

`、 `

`、 ``、`
` 、 `
` 、 `
` 、 `
`
+- 字体标记:`

`、 ``、 ``、 `` 、`` 、`` +- 超链接 `` +- 图片标签 `` @@ -29,26 +26,18 @@ web标准介绍: - web标准规范的分类:结构标准、表现标准、行为标准。 - 结构:html。表现:css。行为:JavaScript。 - web标准总结: - 结构标准:相当于人的身体。html就是用来制作网页的。 - 表现标准: 相当于人的衣服。css就是对网页进行美化的。 - 行为标准: 相当于人的动作。JS就是让网页动起来,具有生命力的。 - - ### 浏览器介绍 浏览器是网页运行的平台,常用的浏览器有IE、火狐(Firefox)、谷歌(Chrome)、猎豹浏览器、Safari和Opera等。如下图所示: ![](http://img.smyhvae.com/20170628_1352.png) - - - - - 浏览器内核: |浏览器 | 内核| @@ -60,18 +49,9 @@ web标准总结: PS:「浏览器内核」也就是浏览器所采用的「渲染引擎」,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。**渲染引擎是兼容性问题出现的根本原因。** - - ### Sublime Text 的使用 -详情请移步至:[Sublime Text使用技巧](https://github.com/smyhvae/tools/blob/master/01-%E4%B8%AA%E4%BA%BA%E6%95%B4%E7%90%86/02-Sublime%20Text%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7.md) - - - - - - - +详情请移步至:[Sublime Text使用技巧](https://github.com/qianguyihao/Tools/blob/master/%E5%B8%B8%E7%94%A8%E5%B7%A5%E5%85%B7/02-Sublime%20Text%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7.md) ## 一、HTML的介绍 @@ -86,8 +66,6 @@ PS:「浏览器内核」也就是浏览器所采用的「渲染引擎」,渲 **注意**:HTML语言不是一个编程语言(有编译过程),而是一个**标记语言**(**没有编译过程**),HTML页面直接由浏览器解析执行。 - - #### HTML是负责描述文档语义的语言 html中,除了**语义**,其他什么都没有。 @@ -101,8 +79,6 @@ html是一个纯本文文件(就是用txt文件改名而成),用一些标 - 正确答案:给文本增加主标题的语义。 - 错误答案:给文字加粗、加黑、变大。 - - ### 2、HTML的历史 ![html中标签发展趋势](http://img.smyhvae.com/20151001_1001.png) @@ -129,18 +105,19 @@ XHTML是**严格的、纯净的**HTML。 - dhtml:dynamic,动态的。`javascript + css + html`合起来的页面就是一个dhtml。 - http:超文本传输协议。用来规定客户端浏览器和服务端交互时数据的一个格式。SMTP:邮件传输协议,ftp:文件传输协议。 - ### 4、HTML的编辑工具 +> 用的最多的编辑器是: VS Code 和 Sublime Text。 + +- VS Code:最火的前端代码编辑器。 +- Sublime Text:很轻量的代码编辑器。 - NotePad:记事本。 - EditPlus:语法高亮显示。技巧: 根据颜色判断单词是否出错 (不是100%)。不好的地方:没有代码提示。 - UltraEdit:根据颜色判断单词是否出错,可以显示2进制数据。 -- Sublime Text:新一代的代码编辑器(用的人很多)。 - dw(dreamweaver,专业工具) :建立WEB站点和应用程序的专业工具。它将布局功能、开发工具、代码编辑组合在一起。有代码提示。 PS:后缀名不能决定文件格式,只能决定打开文件打开的方式。 - ### 5、计算机编码介绍 计算机,不能直接存储文字,存储的是编码。 @@ -168,7 +145,6 @@ PS:后缀名不能决定文件格式,只能决定打开文件打开的方式 毫无疑问,开发中,都用**UTF-8**编码吧,准没错。 - **中文能够使用的字符集两种:** - 第一种:UTF-8。UTF-8是国际通用字库,里面涵盖了所有地球上所有人类的语言文字,比如阿拉伯文、汉语、鸟语...... @@ -202,14 +178,9 @@ PS:后缀名不能决定文件格式,只能决定打开文件打开的方式 - qq网、网易、搜狐都是使用gb2312。这些公司,都追求显示速度。 - 新华网藏语频道,使用的是UTF-8,保证字符集的数量。 - - 对了,我们是怎么查看网页的编码方式的呢?在浏览器中打开网页,右键,选择"查看网页源代码",找到me标签中的charset属性即可。 那么,我们为什么可以查看网页的源代码呢?因为这个打开的网页已经存到我的临时文件夹里了,临时文件夹里的html是纯文本文件,纯文本文件自然剋以查看网页的源代码了。 - - - ### 6、HTML颜色介绍 **颜色表示:** @@ -225,9 +196,6 @@ PS:后缀名不能决定文件格式,只能决定打开文件打开的方式 - 在数字视频中,对RGB三基色各进行8位编码就构成了大约1678万种颜色,这就是我们常说的真彩色。所有显示设备都采用的是RGB色彩模式。 - RGB各有256级(0-255)亮度,256级的RGB色彩总共能组合出约1678万种色彩,即256×ばつかける256×ばつかける256=16777216。 - - - ## 二、HTML的规范 - HTML是一个弱势语言 @@ -240,7 +208,6 @@ PS:后缀名不能决定文件格式,只能决定打开文件打开的方式 目前,IE浏览器是完全不支持H5的,支持最好的是Opera浏览器,可以支持95%以上;其次是google,可以支持一部分H5。 - ### 1、编写XHTML的规范: (1)所有标记元素都要正确的嵌套,不能交叉嵌套。正确写法举例:`` @@ -258,10 +225,6 @@ PS:后缀名不能决定文件格式,只能决定打开文件打开的方式 (6)XHTML文档开头必须要有DTD文档类型定义 - - - - ### 2、HTML的基本语法特性 #### (1)HTML对换行不敏感,对tab不敏感 @@ -290,8 +253,6 @@ HTML中所有的**文字之间**,如果有空格、换行、tab都将被折叠 ![](http://img.smyhvae.com/20170629_2245.jpg) - - ## 三、HTML结构详解 > 备注: @@ -299,32 +260,31 @@ HTML中所有的**文字之间**,如果有空格、换行、tab都将被折叠 > - 每个标签都有私有属性。也都有公有属性。 > - html中表示长度的单位都是**像素**。HTML只有一种单位就是像素。 -HTML标签通常是成对出现的(**双边标记**),比如 `
` 和 `
`,也有单独呈现的标签(**单边标记**),如:`
`、`
`和``等。 +HTML标签通常是成对出现的(**双边标记**),比如 `
` 和 `
`,也有单独呈现的标签(**单边标记**),如:`
`、`
`和``等。 属性与标记之间、各属性之间需要以空格隔开。属性值以双引号括起来。 +### 快速生成 html 的骨架 - -#### 使用`Emmet`插件快速生成html的骨架 - -在Sublime Text中安装`Emmet`插件。 - -新建html文件,输入`html:xt`,按`Tab`键后(或者按Ctrl+E),自动生成的代码如下: +**方式1**:在 VS Code 中新建 html 文件,输入`html:5`,按 `Tab`键后,自动生成的代码如下: ```html - - + + - - Document + + + + Document
- +

AltStyle によって変換されたページ (->オリジナル) /

+ ``` -新建html,输入`html:5`后,按 `Tab`键后,自动生成的代码如下: +**方式2**:在Sublime Text中安装`Emmet`插件。新建html文件,输入`html:5`,按`Tab`键后,自动生成的代码如下: ```html @@ -339,46 +299,44 @@ HTML标签通常是成对出现的(**双边标记** ``` +**方式3**:在Sublime Text中安装`Emmet`插件。新建html文件,输入`html:xt`,按`Tab`键后(或者按Ctrl+E),自动生成的代码如下: +```html + + + + + Document + + + + +``` -### 1、文档声明头 +上面的方式2和方式3中,我们会发现,第一行的内容有些不太一样,这就是我们接下来要讲的**文档声明头**。 +### 1、文档声明头 -任何一个标准的HTML页面,第一行一定是一个以 -``` -`开头的语句。 -开头的语句。 这一行,就是文档声明头,DocType Declaration,简称DTD。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。 #### HTML4.01有哪些规范呢? -首先我们先确定一件事儿,我们现在学习的是**HTML4.01**这个版本,这个版本是IE6开始兼容的。**HTML5是IE9开开始兼容的**。但是IE6、7、8这些浏览器还不能过早的淘汰,所以这几年网页还是应该用HTML4.01来制作。如今,手机、移动端的网页,就可以使用HTML5了,因为其兼容性更高。 +**HTML4.01**这个版本是IE6开始兼容的。**HTML5是IE9开开始兼容的**。如今,手机、移动端的网页,就可以使用HTML5了,因为其兼容性更高。 说个题外话,html1 至 html3 是美国军方以及高等研究所用的,并未对外公开。 -HTML4.01里面有两大种规范,每大种规范里面又各有3种小规范。所以一共6种规范(见下面): - -> HTML4.01里面规定了**普通**和**XHTML**两大种规范。 - -> HTML觉得自己有一些规定不严谨,比如,标签是否可以用大写字母呢?`` - -> 所以,HTML就觉得,把一些规范严格的标准,又制定了一个XHTML1.0。在XHTML中的字母X,表示"严格的"。 - -总结一下,HTML4.01一共有6种DTD,说白了,HTML第一行语句一共有6种: +HTML4.01里面有两大种规范,每大种规范里面又各有3种小规范。所以一共6种规范(见下图)。 +HTML4.01里面规定了**普通**和**XHTML**两大种规范。HTML觉得自己有一些规定不严谨,比如,标签是否可以用大写字母呢?``所以,HTML就觉得,把一些规范严格的标准,又制定了一个XHTML1.0。在XHTML中的字母X,表示"严格的"。 +总结一下,HTML4.01一共有6种DTD。说白了,HTML的第一行语句一共有6种情况: ![](http://img.smyhvae.com/20170629_1600.png) - - - - - 下面对上图中的三种小规范进行解释: - **strict**:表示"严格的",这种模式里面的要求更为严格。这种严格体现在哪里?有一些标签不能使用。 @@ -391,16 +349,39 @@ HTML4.01里面有两大种规范,每大种规范里面又各有3种小规范 - **Frameset**:表示"框架",在框架的页面使用。 在sublime输入的html:xt,x表示XHTML,t表示transitional。 -HTML5中极大的简化了DTD,也就是说HTML5中就没有XHTML了(W3C自己打脸了): + +在HTML5中极大的简化了DTD,也就是说HTML5中就没有XHTML了(W3C自己打脸了): ``` ``` +### 2、头标签 +#### html5 的比较完整的骨架: +```html + + + + + + + + + + Document + + + + + +``` -### 2、头标签 +面试题: + +- 问:网页的head标签里面,表示的是页面的配置,有什么配置? +- 答:字符集、关键词、页面描述、页面标题、IE适配、视口、iPhone小图标等等。 头标签都放在头部分之间。包括:``、`<base>`、`<meta>`、`<link>` @@ -410,26 +391,8 @@ HTML5中极大的简化了DTD,也就是说HTML5中就没有XHTML了(W3C自 - `<body>`:用于定义HTML文档所要显示的内容,也称为主体标签。我们所写的代码必须放在此标签內。 - `<link>`:定义文档与外部资源的关系。 +**meta 标签**: - -我们打开EditPlus软件,新建一个html文件,自动生成的代码如下: - -```html -<!doctype html> -<html lang="en"> - <head> - <meta charset="UTF-8"> - <meta name="Generator" content="EditPlus®"> - <meta name="Author" content=""> - <meta name="Keywords" content=""> - <meta name="Description" content=""> - <title>Document - - - - - -``` 上面的``标签都不用记,但是另外还有一个``标签是需要记住的: ```html @@ -437,12 +400,9 @@ HTML5中极大的简化了DTD,也就是说HTML5中就没有XHTML了(W3C自 ``` 上面这个标签的意思是说,3秒之后,自动跳转到百度页面。 -我们接下来对各个头标签进行介绍。 +常见的几种 meta 标签如下: - -#### (1)字符集 charset - -我们发现,在头标签中,有下面这种标签: +(1)字符集 charset: ```html @@ -450,39 +410,36 @@ HTML5中极大的简化了DTD,也就是说HTML5中就没有XHTML了(W3C自 字符集用meta标签中的`charset`定义,meta表示"元"。"元"配置,就是表示基本的配置项目。 - -charset就是charactor set(即"字符集"),这里采用的是。这个meta不用背,用sublime生成就行。 +charset就是charactor set(即"字符集")。 浏览器就是通过meta来看网页是什么字符集的。比如你保存的时候,meta写的和声明的不匹配,那么浏览器就是乱码。 -#### (2)定义"关键词" - -举例如下: +(2)视口 viewport: ```html - + ``` -这些关键词,就是告诉搜索引擎,这个网页是干嘛的,能够提高搜索命中率。让别人能够找到你,搜索到你。 - +`width=device-width` :表示视口宽度等于屏幕宽度。 -#### (3)定义"页面描述" +viewport 这个知识点,初学者还比较难理解,以后学 Web 移动端的时候会用到。 -meta除了可以设置字符集,还可以设置关键字和页面描述。 +(2)定义"关键词": - -我们把含有`meta`标签的这一行代码抽象一下: +举例如下: ```html - + ``` -name即"名字",content即"内容"。 +这些关键词,就是告诉搜索引擎,这个网页是干嘛的,能够提高搜索命中率。让别人能够找到你,搜索到你。 +(3)定义"页面描述": -只要设置Description页面描述,那么百度搜索结果,就能够显示这些语句,这个技术叫做**SEO**(search engine optimization,搜索引擎优化)。 +meta除了可以设置字符集,还可以设置关键字和页面描述。 +只要设置Description页面描述,那么百度搜索结果,就能够显示这些语句,这个技术叫做**SEO**(search engine optimization,搜索引擎优化)。 设置页面描述的举例: @@ -495,43 +452,22 @@ name即"名字",content即"内容"。 ![](http://img.smyhvae.com/20170629_1743.png) -#### (4)title标签 +**title 标签**: + +用于设置网页标题: ```html - 网页的标题 + 网页的标题 ``` - title也是有助于SEO搜索引擎优化的。 - -#### html的完整骨架: - -综上所述,html的比较完整的骨架是这样: +**base标签**: ```html - - - - - - - Document - - - - - + ``` - -面试题: - -- 问:网页的head标签里面,表示的是页面的配置,有什么配置? -- 答:字符集、关键词、页面描述、页面标题。(今后我们还能看见一些其他的配置:IE适配、视口、iPhone小图标等等) - - - - +base 标签用于指定基础的路径。指定之后,所有的 a 链接都是以这个路径为基准。 ### 3、``标签的属性 @@ -552,10 +488,8 @@ title也是有助于SEO搜索引擎优化的。 ![](http://img.smyhvae.com/2015-10-02-cnblogs_html_05.gif) - 接下来,我们讲一下``里的各种标签的属性。 - ## 一、排版标签 ### 注释标签 @@ -564,8 +498,6 @@ title也是有助于SEO搜索引擎优化的。 ``` - - ### 段落标签`

` ```html @@ -581,7 +513,6 @@ title也是有助于SEO搜索引擎优化的。
- 段落,是英语paragraph"段落"缩写。 HTML标签是分等级的,HTML将所有的标签分为两种: @@ -591,10 +522,8 @@ HTML标签是分等级的,HTML将所有的标签分为两种: - **容器级标签**:div、h系列、li、dt、dd。容器级标签里可以放置任何东西。 - 从学习p的第一天开始,就要死死记住:**p标签是一个文本级标签,p里面只能放文字、图片、表单元素**。其他的一律不能放。 - 错误写法:(尝试把 h 放到 p 里) ```html @@ -606,16 +535,12 @@ HTML标签是分等级的,HTML将所有的标签分为两种: 网页效果如下: - ![](http://img.smyhvae.com/20170630_1102.png) 上图显示,浏览器不允许你这么做,我们使用Chrome的F12审查元素发现,浏览器自己把p封闭掉了,不让你去包裹h1。 PS:Chrome浏览器是世界上HTML5支持最好的浏览器。提供了非常好的开发工具,非常适合我们开发人员使用。审查元素功能的快捷键是F12。 - - - ### 块级标签 `

`和`` > div和span是非常重要的标签,div的语义是division"分割"; span的语义就是span"范围、跨度"。 @@ -643,7 +568,6 @@ div标签是一个**容器级**标签,里面什么都能放,甚至可以放d span也是表达"小区域、小跨度"的标签,但是是一个**文本级**的标签。 就是说,span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。 - span里面是放置小元素的,div里面放置大东西的。举例如下: span举例: @@ -677,10 +601,6 @@ div举例: 所以,我们亲切的称呼这种模式叫做"**div+css**"。**div标签负责布局,负责结构,负责分块。css负责样式**。 - - - - ### 换行标签`
`(已废弃) 当你打算结束一行,而又不想开始一个新段落时,`
`标签就派上用场了。无论你将它置于何处,`
`标签都会产生一个强制的换行。 @@ -742,8 +662,6 @@ This
is a para
graph with line breaks 好吧,其实这个标签也用的比较少。 - - ## 二、字体标签 ### 标题 @@ -753,7 +671,6 @@ This
is a para
graph with line breaks ![Paste_Image.png](http://img.smyhvae.com/2015-10-01-cnblogs_html_09.png) - ### 字体标签``(已废弃) 属性: @@ -820,7 +737,6 @@ http://img.smyhvae.com/2015-10-01-cnblogs_html_13.png) |2|平方2(上标2)|`²`| |3|立方3(上标3)|`³`| - ### 一些小标签/小标记 - ``:下划线标记 @@ -833,18 +749,14 @@ http://img.smyhvae.com/2015-10-01-cnblogs_html_13.png) ![Paste_Image.png](http://img.smyhvae.com/2015-10-01-cnblogs_html_15.png) - - 上面的这几个标签,常用于做一些小装饰、小图标。比如: 20180118_2340.png 这张图中,我们通过查看京东网站的代码发现,箭头处的小图标都是用的标签``。 - div的主要目的是用来布局,而小装饰却可以用来 - ### 粗体标签``或``(已废弃) 效果: @@ -864,8 +776,6 @@ O2 53 ![Paste_Image.png](http://img.smyhvae.com/2015-10-01-cnblogs_html_16.png) - - ## 三、超链接 超链接有三种形式: @@ -879,7 +789,6 @@ a是英语`anchor`"锚"的意思,就好像这个页面往另一个页面 href是英语`hypertext reference`超文本地址的缩写。读作"喝瑞夫",不要读作"喝夫"。 - 效果: ![Paste_Image.png](http://img.smyhvae.com/2015-10-01-cnblogs_html_17.png) @@ -890,11 +799,6 @@ href是英语`hypertext reference`超文本地址的缩写。读作"喝瑞夫 点我点我 ``` - - - - - **2、锚链接**: 指给超链接起一个名字,作用是**在本页面或者其他页面的的不同位置进行跳转**。比如说,在网页底部有一个向上箭头,点击箭头后回到顶部,这个就是利用到了锚链接。 首先我们要创建一个**锚点**,也就是说,使用`name`属性或者`id`属性给那个特定的位置起个名字。效果如下: @@ -934,7 +838,6 @@ href是英语`hypertext reference`超文本地址的缩写。读作"喝瑞夫 - `title`属性举例: ```html @@ -954,7 +857,6 @@ href是英语`hypertext reference`超文本地址的缩写。读作"喝瑞夫 blank就是"空白"的意思,就表示新建一个空白窗口。为啥有一个_ ,就是规定,没啥好解释的。 也就是说,如果不写`target="_blank"`那么就是在相同的标签页打开,如果写了`target="_blank"`,就是在新的空白标签页中打开。 - #### 备注1:分清楚img和a标签的各自的属性 区别如下: @@ -963,8 +865,6 @@ blank就是"空白"的意思,就表示新建一个空白窗口。为啥有 ``` - - #### 备注2:a是一个文本级的标签 比如一个段落中的所有文字都能够被点击,那么应该是p包裹a: @@ -987,7 +887,6 @@ blank就是"空白"的意思,就表示新建一个空白窗口。为啥有 a的语义要小于p,a就是可以当做文本来处理,所以p里面相当于放的就是纯文字。 - ## 四、图片标签 img: 代表的就是一张图片。是单边标记。 @@ -1026,7 +925,6 @@ img是自封闭标签,也称为单标签。 img 是image"图片"的简写,src 是英语source"资源"的缩写。 - 相对路径不会出现这种情况: ```html @@ -1035,8 +933,6 @@ aaa/../bbb/1.jpg `../`要么不写,要么就写在开头。 - - 举例2: ```html @@ -1047,7 +943,6 @@ aaa/../bbb/1.jpg ![Paste_Image.png](http://img.smyhvae.com/20151001_19.jpg) - 相对路径的面试题。现有如下文件层级图: ![](http://img.smyhvae.com/20170630_1133.png) @@ -1064,7 +959,6 @@ aaa/../bbb/1.jpg ``` - #### 2、写法二:**绝对路径** 绝对路径包括以下两种: @@ -1110,11 +1004,8 @@ aaa/../bbb/1.jpg - 绝对不允许使用file://开头的东西,这个是完全错误的! - - ### img标签的其他属性 - - `width`:宽度 - `height`:高度 - `Align`:指图片的水平对齐方式,属性值可以是:left、center、right @@ -1123,7 +1014,7 @@ aaa/../bbb/1.jpg - `Hspace`:指图片左右的边距 - `Vspace`:指图片上下的边距 - - `Alt`:当图片显示不出来的时候,代替图片显示的内容。alt是英语 alternate "替代"的意思。(有的浏览器不支持) + - `alt`:当图片不可用(无法显示)的时候,代替图片显示的内容。alt是英语 alternate "替代"的意思,代表替换资源。(有的浏览器不支持) 举例: ```html @@ -1133,12 +1024,13 @@ aaa/../bbb/1.jpg ![Paste_Image.png](http://img.smyhvae.com/2015-10-01-cnblogs_html_20.png) -`Alt`属性效果演示: +`Alt`属性效果演示:(当图片 src 不可用的时候,显示文字。这样做,至少能让用户知道,这个图片大概是什么内容) ![Paste_Image.png](http://img.smyhvae.com/2015-10-01-cnblogs_html_21.png) - 图片的`align`属性:**图片和周围文字的相对位置**。属性取值可以是:bottom(默认)、center、top、left、right。 我们来分别看一下这`align`属性的这几个属性值的区别。 + 1、`align=""`,图片和文字低端对齐。即默认情况下的显示效果: ![](http://img.smyhvae.com/2015-10-02-cnblogs_html_19.png) @@ -1163,8 +1055,6 @@ aaa/../bbb/1.jpg (1)如果要想保证图片等比例缩放,请只设置width和height中其中一个。 (2)如果想实现图文混排的效果,请使用align属性,取值为left或right。 -
- ### 热点问题 指的是对图片的**局部区域**加超链接。 @@ -1205,11 +1095,7 @@ aaa/../bbb/1.jpg ![3.gif](http://img.smyhvae.com/3.gif) -最后,送上妹子的近照一张。楼主已经仁至义尽了。 - -![](http://img.smyhvae.com/2015-10-01-cnblogs_html_20150219214912_11994.jp) - -PS:美女图就不放在 GitHub 上了,这么多 star,放了也不合适。去我的[博客园](https://www.cnblogs.com/qianguyihao/p/4850684.html)看吧~ +最后,送上妹子的近照一张。楼主已经仁至义尽了:http://img.smyhvae.com/2015-10-01-cnblogs_html_20150219214912_11994.jpg 怎么?还没看够?且看下文:[HTML标签----图文详解(二)](http://www.cnblogs.com/smyhvae/p/4852863.html) @@ -1223,6 +1109,3 @@ PS:美女图就不放在 GitHub 上了,这么多 star,放了也不合适 - - - diff --git "a/01-html/02-html346円240円207円347円255円276円345円233円276円346円226円207円350円257円246円350円247円243円357円274円210円344円272円214円357円274円211円.md" "b/01-html/02-html346円240円207円347円255円276円345円233円276円346円226円207円350円257円246円350円247円243円357円274円210円344円272円214円357円274円211円.md" index b642298c..60e9b81f 100644 --- "a/01-html/02-html346円240円207円347円255円276円345円233円276円346円226円207円350円257円246円350円247円243円357円274円210円344円272円214円357円274円211円.md" +++ "b/01-html/02-html346円240円207円347円255円276円345円233円276円346円226円207円350円257円246円350円247円243円357円274円210円344円272円214円357円274円211円.md" @@ -14,7 +14,6 @@ - 滚动字幕标签:`` - ## 列表标签 列表标签分为三种。 @@ -46,7 +45,6 @@ - 我们这里再次强调,ul的作用,并不是给文字增加小圆点的,而是增加无序列表的"语义"的。 - **属性:** - `type="属性值"`。属性值可以选: `disc`(实心原点,默认),`square`(实心方点),`circle`(空心圆)。 @@ -58,10 +56,9 @@ ![](http://img.smyhvae.com/2015-10-02-cnblogs_html_03.png) -注意:项目符号可以是图片,但是通过CSS设置
  • 标记的背景图片来实现(CSS中讲)。 +注意:项目符号可以是图片,需要通过CSS设置`
  • `标记的背景图片来实现(CSS中讲)。 -当然了,列表之间是可以**嵌套**的。我们来举个例子: -代码: +当然了,列表之间是可以**嵌套**的。我们来举个例子。代码: ```html
      @@ -87,13 +84,19 @@ ![](http://img.smyhvae.com/2015-10-01-cnblogs_html_40.png) -#### ul标签实际应用场景 +**css 属性**: + +```css +list-style-position: inside /* 给 ul 设置这个属性后,将小圆点包含在 li 元素的内部 */ +``` + +#### ul标签实际应用场景: -场景1 —— 导航条: +场景1、导航条: ![](http://img.smyhvae.com/20170704_1717.png) -场景2 —— li里面放置的内容可能很多: +场景2、li 里面放置的内容可能很多: ![](http://img.smyhvae.com/20170704_1719.png) @@ -167,7 +170,6 @@ ol这个东西用的不多,如果想表达顺序,大家一般也用ul。举
    ``` - ### 3、定义列表`
    ` > 定义列表的作用非常大。 @@ -211,8 +213,6 @@ ol这个东西用的不多,如果想表达顺序,大家一般也用ul。举 备注:dd是描述dt的。 - - 定义列表用法非常灵活,可以一个dt配很多dd: ```html @@ -285,7 +285,6 @@ ol这个东西用的不多,如果想表达顺序,大家一般也用ul。举 dt、dd都是容器级标签,想放什么都可以。所以,现在就应该更加清晰的知道:用什么标签,不是根据样子来决定,而是语义(语义本质上是结构)。 - ## 表格标签 表格标签用``表示。 @@ -295,41 +294,41 @@ dt、dd都是容器级标签,想放什么都可以。所以,现在就应该 例如,一行的单元格: ```html - -
    - - - - -
    - + +
    + + + + +
    + ``` 上面的表格中没有加文字,所以在生成的网页中什么都看不到。 例如,3行4列的单元格: ```html - -
    - 生命壹号 - 23 - 男 - 黄冈 -
    - -
    - 许嵩 - 29 - 男 - 安徽 -
    - -
    - 邓紫棋 - 23 - 女 - 香港 -
    - - + +
    + 生命壹号 + 23 + 男 + 黄冈 +
    + +
    + 许嵩 + 29 + 男 + 安徽 +
    + +
    + 邓紫棋 + 23 + 女 + 香港 +
    + + ``` 效果: @@ -361,40 +360,46 @@ dt、dd都是容器级标签,想放什么都可以。所以,现在就应该 ![](http://img.smyhvae.com/2015-10-02-cnblogs_html_11.png) -备注:表格中很细表格边线的制作: -CSS的写法: -```html +备注:表格中很细表格边线的制作,CSS的写法: + +```css style="border-collapse:collapse;" ``` + ### `
    `:行 -一个表格就是一行一行组成的嘛。 + +一个表格就是一行一行组成的。 + **属性:** - - `dir`:公有属性,设置这一行单元格内容的排列方式。可以取值:`ltr`:从左到右(left to right,默认),`rtl`:从右到左(right to left) + + - `dir`:公有属性,设置这一行单元格内容的排列方式。可以取值: + - `ltr`:从左到右(left to right,默认) + - `rtl`:从右到左(right to left) - `bgcolor`:设置这一行的单元格的背景色。 注:没有background属性,即:无法设置这一行的背景图片,如果非要设置,可以用css实现。 - `height`:一行的高度 - `align="center"`:一行的内容水平居中显示,取值:left、center、right - `valign="center"`:一行的内容垂直居中,取值:top、middle、bottom - -
    ### ` `:单元格 + **属性:** - - `align`:内容的横向对齐方式。属性值可以填:left right center。 -如果想让每个单元格的内容都居中,这个属性太麻烦了,以后用css来解决。 + + - `align`:内容的横向对齐方式。属性值可以填:left right center。如果想让每个单元格的内容都居中,这个属性太麻烦了,以后用css来解决。 - `valign`:内容的纵向对齐方式。属性值可以填:top middle bottom - `width`:绝对值或者相对值(%) - `height`:单元格的高度 - `bgcolor`:设置这个单元格的背景色。 - `background`:设置这个单元格的背景图片。 -
    ### 单元格的合并 -如果要将两个单元格合并,那肯定就要删掉一个单元格。 + 单元格的属性: - - `colspan`:横向合并。例如`colspan="2"`表示当前单元格在水平方向上要占据两个单元格的位置。 - - `rowspan`:纵向合并。例如`rowspan="2"`表示当前单元格在垂直方向上要占据两个单元格的位置。 + +- `colspan`:横向合并。例如`colspan="2"`表示当前单元格在水平方向上要占据两个单元格的位置。 +- `rowspan`:纵向合并。例如`rowspan="2"`表示当前单元格在垂直方向上要占据两个单元格的位置。 + 效果举例:(横向合并) ![](http://img.smyhvae.com/2015-10-02-cnblogs_html_13.png) @@ -404,7 +409,8 @@ style="border-collapse:collapse;" ![](http://img.smyhvae.com/2015-10-02-cnblogs_html_15.png) ### ``:加粗的单元格。相当于` ` + `` - - 属性同` `标签。 + +- 属性同` `标签。
    ### ``:表格的标题。使用时和`tr`标签并列 @@ -414,9 +420,11 @@ style="border-collapse:collapse;" ![](http://img.smyhvae.com/2015-10-02-cnblogs_html_16.png) ### 表格的``标签、``标签、``标签 + 这三个标签有与没有的区别: - - 1、如果写了,那么这三个部分的**代码顺序可以任意**,浏览器显示的时候还是按照thead、tbody、tfoot的顺序依次来显示内容。如果不写thead、tbody、tfoot,那么浏览器解析并显示表格内容的时候是从按照代码的从上到下的顺序来显示。 - - 2、当表格非常大内容非常多的时候,如果用thead、tbody、tfoot标签的话,那么**数据可以边获取边显示**。如果不写,则必须等表格的内容全部从服务器获取完成才能显示出来。 + +- 1、如果写了,那么这三个部分的**代码顺序可以任意**,浏览器显示的时候还是按照thead、tbody、tfoot的顺序依次来显示内容。如果不写thead、tbody、tfoot,那么浏览器解析并显示表格内容的时候是从按照代码的从上到下的顺序来显示。 +- 2、当表格非常大内容非常多的时候,如果用thead、tbody、tfoot标签的话,那么**数据可以边获取边显示**。如果不写,则必须等表格的内容全部从服务器获取完成才能显示出来。 举例: @@ -468,16 +476,23 @@ style="border-collapse:collapse;" > - 框架的集合用``表示,然后在``集合里放入一个一个的框架`[フレーム]` ### ``:框架的集合 -一个框架的集合可以包含多个框架或框架的集合。 -**属性:** - - `rows`:水平分割,将框架分为上下部分。写法有两种: + +一个框架的集合可以包含多个框架或框架的集合。**属性:** + +- `rows`:水平分割,将框架分为上下部分。写法有两种: + 1、绝对值写法:`rows="200,*"` 其中`*`代表剩余的。这里其实包含了两个框架:上面的框架占200个像素,下面的框架占剩下的部分。 + 2、相对值写法:`rows="30%,*"` 其中`*`代表剩余的。这里其实包含了两个框架:上面的框架占30%,下面的框架占70%。 + 注:如果你想将框架分成很多行,在属性值里用逗号隔开就行了。 - - `cols`:垂直分割,将框架分为左右部分。写法有两种: +- `cols`:垂直分割,将框架分为左右部分。写法有两种: + 1、绝对值写法:`cols="200,*"` 其中`*`代表剩余的。这里其实包含了两个框架:左边的框架占200个像素,右边的框架占剩下的部分。 + 2、相对值写法:`cols="30%,*"` 其中`*`代表剩余的。这里其实包含了两个框架:左边的框架占30%,右边的框架占70%。 + 注:如果你想将框架分成很多列,在属性值里用逗号隔开就行了。 效果: @@ -489,22 +504,29 @@ style="border-collapse:collapse;" ![](http://img.smyhvae.com/2015-10-02-cnblogs_html_27.png) ### `[フレーム]`:框架 + 一个框架显示一个页面。 + **属性:** - - `scrolling="no"`:是否需要滚动条。默认值是true。 - - `noresize`:不可以改变框架大小。默认情况下,单个框架的边界是可以拖动的,这样的话,框架大小就不固定了。如果用了这个属性值,框架大小将固定。 + +- `scrolling="no"`:是否需要滚动条。默认值是true。 +- `noresize`:不可以改变框架大小。默认情况下,单个框架的边界是可以拖动的,这样的话,框架大小就不固定了。如果用了这个属性值,框架大小将固定。 举例: + ```html [フレーム] ``` - - `bordercolor="#00FF00"`:给框架的边框定义颜色。这个属性在框架集合``中同样适用。 +- `bordercolor="#00FF00"`:给框架的边框定义颜色。这个属性在框架集合``中同样适用。 颜色这个属性在IE浏览器中生效,但是在google浏览器中无效,不知道为啥。 - - `frameborder="0"`或`frameborder="1"`:隐藏或显示边框(框架线)。 - - `name`:给框架起一个名字。 +- `frameborder="0"`或`frameborder="1"`:隐藏或显示边框(框架线)。 + +- `name`:给框架起一个名字。 + 利用`name`这个属性,我们可以在框架里进行超链。 + 举例: ![](http://img.smyhvae.com/2015-10-02-cnblogs_html_28.png) @@ -514,12 +536,14 @@ style="border-collapse:collapse;" ![](http://img.smyhvae.com/2015-10-02-cnblogs_html_gif3.gif) - ## 内嵌框架 内嵌框架用`