diff --git "a/\351\273\204\346\265\251\345\206\211/\344\275\234\344\270\232/0911.html" "b/\351\273\204\346\265\251\345\206\211/\344\275\234\344\270\232/0911.html" new file mode 100644 index 0000000000000000000000000000000000000000..4cbe065df5057e03eb5e77bee68343d48afe79f4 --- /dev/null +++ "b/\351\273\204\346\265\251\345\206\211/\344\275\234\344\270\232/0911.html" @@ -0,0 +1,18 @@ + + + + + + Document + + + +
+

永不止步

+

生命壹号

+
+
+ + \ No newline at end of file diff --git "a/\351\273\204\346\265\251\345\206\211/\344\275\234\344\270\232/bg-img.jpg" "b/\351\273\204\346\265\251\345\206\211/\344\275\234\344\270\232/bg-img.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..2f04d26b80ebe49d8787da9d37857bf1e6d60a49 Binary files /dev/null and "b/\351\273\204\346\265\251\345\206\211/\344\275\234\344\270\232/bg-img.jpg" differ diff --git "a/\351\273\204\346\265\251\345\206\211/\344\275\234\344\270\232/image.png" "b/\351\273\204\346\265\251\345\206\211/\344\275\234\344\270\232/image.png" new file mode 100644 index 0000000000000000000000000000000000000000..c16f7d29d485f83dfb5aeb4e5898bc3d1cc900af Binary files /dev/null and "b/\351\273\204\346\265\251\345\206\211/\344\275\234\344\270\232/image.png" differ diff --git "a/\351\273\204\346\265\251\345\206\211/\344\275\234\344\270\232/\345\206\205\346\240\270\345\222\214js\345\274\225\346\223\216.md" "b/\351\273\204\346\265\251\345\206\211/\344\275\234\344\270\232/\345\206\205\346\240\270\345\222\214js\345\274\225\346\223\216.md" new file mode 100644 index 0000000000000000000000000000000000000000..2a15057cd1a6a1d5b4cb712f9d965cebbba2ddd0 --- /dev/null +++ "b/\351\273\204\346\265\251\345\206\211/\344\275\234\344\270\232/\345\206\205\346\240\270\345\222\214js\345\274\225\346\223\216.md" @@ -0,0 +1,11 @@ +# 主流浏览器的浏览器内核和JavaScript引擎 + +| 浏览器名称 | 浏览器内核 | JavaScript引擎 | +|------------|------------|----------------| +| Google Chrome | Blink | V8 | +| Mozilla Firefox | Gecko | SpiderMonkey | +| Safari | WebKit | Nitro | +| Microsoft Edge | Blink (新版本) / EdgeHTML (旧版本) | V8 | +| Opera | Blink | V8 | + +![alt text](image.png) \ No newline at end of file diff --git "a/\351\273\204\346\265\251\345\206\211/\344\275\234\344\270\232/\345\233\276\347\211\207\345\261\205\344\270\255.html" "b/\351\273\204\346\265\251\345\206\211/\344\275\234\344\270\232/\345\233\276\347\211\207\345\261\205\344\270\255.html" new file mode 100644 index 0000000000000000000000000000000000000000..5451bb8a16d82d0fc9ecd64ed33ed4cbc18a3b25 --- /dev/null +++ "b/\351\273\204\346\265\251\345\206\211/\344\275\234\344\270\232/\345\233\276\347\211\207\345\261\205\344\270\255.html" @@ -0,0 +1,24 @@ + + + + + + Document + + + + + + \ No newline at end of file diff --git "a/\351\273\204\346\265\251\345\206\211/\344\275\234\344\270\232/\345\261\205\344\270\255\346\226\271\346\263\2250911\344\275\234\344\270\232.md" "b/\351\273\204\346\265\251\345\206\211/\344\275\234\344\270\232/\345\261\205\344\270\255\346\226\271\346\263\2250911\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..deee7a4da7b9ececf1f6eb7828f17a6ee37eab7e --- /dev/null +++ "b/\351\273\204\346\265\251\345\206\211/\344\275\234\344\270\232/\345\261\205\344\270\255\346\226\271\346\263\2250911\344\275\234\344\270\232.md" @@ -0,0 +1,64 @@ +### 更改水平线颜色 + +要更改水平线的颜色,你需要使用CSS的`border-color`属性。你可以直接在`
`标签内使用`style`属性来指定颜色,或者通过外部或内部样式表来定义。 + +**内联样式示例:** +```html +
+``` + +**外部或内部样式表示例:** +```css +hr { + border-color: blue; +} +``` + +### 更改水平线宽度 + +水平线的宽度可以通过CSS的`width`属性来设置。同样,你可以使用内联样式或样式表来实现。 + +**内联样式示例:** +```html +
+``` + +**外部或内部样式表示例:** +```css +hr { + width: 80%; +} +``` + +### 文字居中方式 + +在HTML中,居中文字通常是指在某个容器内居中显示文字,比如`
`、`

`等标签内的文本。以下是几种常见的居中方式: + +1. **水平居中文本:** + - 使用`text-align: center;`在块级元素内居中文本。 + ```css + .center-text { + text-align: center; + } + ``` + 然后在HTML中使用这个类: + ```html +

这段文本将会居中显示。
+ ``` + +2. **水平居中块级元素:** + - 通过设置`margin`属性为`0 auto`,可以实现块级元素的水平居中。 + ```css + .center-block { + width: 50%; /* 或者其他宽度 */ + margin: 0 auto; + } + ``` + ```html +
这个块级元素将会居中显示。
+ ``` + +3. **垂直居中(需要额外的CSS技巧):** + - 对于单行文本,可以使用`line-height`属性与容器高度相同来实现垂直居中。 + - 对于多行文本或复杂布局,可能需要使用Flexbox或Grid布局技术。 + diff --git "a/\351\273\204\346\265\251\345\206\211/\347\254\224\350\256\260/0904\347\254\224\350\256\260.md" "b/\351\273\204\346\265\251\345\206\211/\347\254\224\350\256\260/0904\347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..56eaff2db790de83b6669bdcd6bf3428de003231 --- /dev/null +++ "b/\351\273\204\346\265\251\345\206\211/\347\254\224\350\256\260/0904\347\254\224\350\256\260.md" @@ -0,0 +1,29 @@ +# markdown语法 + +一级标题:#,二级标题:## + +引用网址:[想显示的内容](链接) + +斜体:*字符*,粗体:**字符**,粗斜体:***字符*** + +引用:>引用内容 + +加深:`字符` + +``` +一段代码或任意内容 +可突出显示 +``` +```js +console.log('字符') +``` +有序列表:1.2.3.4. + +无序列表:+ - * + +| 左对齐 | 居中 | 右对齐 | +| :- | :-: | -: | +| 单元格1 | 单元格2 | 单元格3 | +| 单元格4 | 单元格5 | 单元格6 | + + diff --git "a/\351\273\204\346\265\251\345\206\211/\347\254\224\350\256\260/0909\347\254\224\350\256\260.md" "b/\351\273\204\346\265\251\345\206\211/\347\254\224\350\256\260/0909\347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..f1c3505f211a6674e6ab764510670cf3e5513552 --- /dev/null +++ "b/\351\273\204\346\265\251\345\206\211/\347\254\224\350\256\260/0909\347\254\224\350\256\260.md" @@ -0,0 +1,40 @@ +# 浏览器的组成 +浏览器分成两部分: + +1. 渲染引擎(即:浏览器内核) + +2. JS 引擎 + + 1. 渲染引擎(浏览器内核) +浏览器所采用的「渲染引擎」也称之为「浏览器内核」,用来解析 HTML与CSS。渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。 + +渲染引擎是浏览器兼容性问题出现的根本原因。 + +渲染引擎的英文叫做 Rendering Engine。通俗来说,它的作用就是:读取网页内容,计算网页的显示方式并显示在页面上。 + +常见浏览器的内核如下: + +浏览器 内核 +chrome Blink +欧鹏 Blink +360安全浏览器 Blink +360极速浏览器 Blink +Safari Webkit +Firefox 火狐 Gecko +IE Trident + + +# JS 引擎 +也称为 JS 解释器。 用来解析网页中的JavaScript代码,对其处理后再运行。 + +浏览器本身并不会执行JS代码,而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行代码时会逐行解释每一句源码(转换为机器语言),然后由计算机去执行。所以 JavaScript 语言归为脚本语言,会逐行解释执行。 + +# HTML的概念 +HTML 全称为 HyperText Markup Language,译为超文本标记语言。 +HTML 不是一种编程语言,是一种描述性的标记语言。 +作用:HTML是负责描述文档语义的语言。 +HTML 格式的文件是一个纯本文文件(就是用txt文件改名而成),用一些标签来描述语义,这些标签在浏览器页面上是无法直观看到的,所以称之为“超文本标记语言”。 +接下来,我们需要学习 HTML 中的很多“标签对儿”,这些“标签对儿”能够给文本不同的语义。 + + + diff --git "a/\351\273\204\346\265\251\345\206\211/\347\254\224\350\256\260/0911\347\254\224\350\256\260.md" "b/\351\273\204\346\265\251\345\206\211/\347\254\224\350\256\260/0911\347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..6bee208c115c54e09c963fef358e75ac6ece1e34 --- /dev/null +++ "b/\351\273\204\346\265\251\345\206\211/\347\254\224\350\256\260/0911\347\254\224\350\256\260.md" @@ -0,0 +1,124 @@ +## HTML结构详解 + +HTML标签通常是成对出现的(**双边标记**),比如 `
` 和 `
`;也有少部分单标签(**单边标记**),如:`
`、`
`. + +属性与标记之间、各属性之间需要以空格隔开。属性值以双引号括起来。 + + +#### html骨架标签分类 + +| 标签名 | 定义 | 说明 | +| ---------------- | :----: | :----------------------------- | +| `` | HTML标签 | 页面中最大的标签,我们成为根标签 | +| `` | 文档的头部 | 注意在head标签中我们必须要设置的标签是title | +| `` | 文档的标题 | 让页面拥有一个属于自己的网页标题 | +| `` | 文档的主体 | 元素包含文档的所有内容,页面内容 基本都是放到body里面的 | + +### 文档声明头 + +任何一个标准的HTML页面,第一行一定是一个以``开头的语句。这一行,就是文档声明头,即 DocType Declaration,简称DTD。 + +**DTD可告知浏览器文档使用哪种 HTML 或 XHTML 规范**。 + + +(1)字符集 charset: + +```html + +``` +ss +字符集用meta标签中的`charset`定义,charset就是character set(即“字符集”),即**网页的编码方式**。 + +**字符集**(Character set)是多个字符的集合。计算机要准确的处理各种字符集文字,需要进行字符编码,以便计算机能够识别和存储各种文字。 + +上面这行代码非常关键, 是必须要写的代码,否则可能导致乱码。比如你保存的时候,meta写的和声明的不匹配,那么浏览器就是乱码。 + +utf-8是目前最常用的字符集编码方式,常用的字符集编码方式还有gbk和gb2312等。关于“编码方式”,我们在下一段会详细介绍。 + +(2)视口 viewport: + +```html + +``` + +`width=device-width` :表示视口宽度等于屏幕宽度。 + +viewport 这个知识点,初学者还比较难理解,以后学 Web 移动端的时候会用到。 + +(3)定义“关键词”: + +举例如下: + +```html + +``` + +这些关键词,就是告诉搜索引擎,这个网页是干嘛的,能够提高搜索命中率。让别人能够找到你,搜索到你。 + +(4)定义“页面描述”: + +meta除了可以设置字符集,还可以设置关键字和页面描述。 + +只要设置Description页面描述,那么百度搜索结果,就能够显示这些语句,这个技术叫做**SEO**(search engine optimization,搜索引擎优化)。 + +设置页面描述的举例: + +```html + +``` + + + +### ``标签 + +``标签的属性有: + + - `bgcolor`:设置整个网页的背景颜色。 + - `background`:设置整个网页的背景图片。 + - `text`:设置网页中的文本颜色。 + - `leftmargin`:网页的左边距。IE浏览器默认是8个像素。 + - `topmargin`:网页的上边距。 + - `rightmargin`:网页的右边距。 + - `bottommargin`:网页的下边距。 + + +## 计算机编码介绍 + +计算机,不能直接存储文字,存储的是编码。 + +计算机只能处理二进制的数据,其它数据,比如:0-9、a-z、A-Z,这些字符,我们可以定义一套规则来表示。假如:A用110表示,B用111表示等。 + +**GBK:** +对GB2312进行了扩展,用来显示罕见的、古汉语的汉字。现在已经收录了2.1万左右。并提供了1890个汉字码位。K的含义就是“扩展”。 + +**Unicode编码(统一编码):** +用4个字节(32位二进制)来表示一个字符,想法不错,但效率太低。例如,字母A用ASCII表示的话一个字节就够,可用Unicode编码的话,得用4个字节表示,造成了空间的极大浪费。A的Unicode编码是0000 0000 0000 0000 0000 0000 0100 0000 + +**UTF-8(Unicode Transform Format)编码:** +根据字符的不同,选择其编码的长度。比如:一个字符A用1个字节表示,一个汉字用2个字节表示。 + +毫无疑问,开发中,都用**UTF-8**编码吧,准没错。 + +**重点1:避免乱码** + +我们用meta标签声明的当前这个html文档的字库,一定要和保存的文件编码类型一样,否则乱码(重点)。 + + +**重点2:UTF-8和gb2312的比较** + +保存大小:UTF-8(更臃肿、加载更慢) > gb2312 (更小巧,加载更快) + +总结: +- UTF-8:字多,有各种国家的语言,但是保存尺寸大,文件臃肿; +- gb2312:字少,只用中文和少数外语和符号,但是尺寸小,文件小巧。 + + +## HTML的规范 + +- HTML不区分大小写,但HTML的标签名、类名、标签属性、大部分属性值建议统一用小写。 +- HTML页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符,比如dos系统) + + + + + diff --git "a/\351\273\204\346\265\251\345\206\211/\347\254\224\350\256\260/0913\347\254\224\350\256\260.md" "b/\351\273\204\346\265\251\345\206\211/\347\254\224\350\256\260/0913\347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..6e4c7613f99e5beef2db4b39311cf302eef8a246 --- /dev/null +++ "b/\351\273\204\346\265\251\345\206\211/\347\254\224\350\256\260/0913\347\254\224\350\256\260.md" @@ -0,0 +1,75 @@ +## 字体标签 +字体标签: ``、 ``、 `` 、`` 、`` + +超链接 `` +### 特殊字符(转义字符) + +- ` `:空格 (non-breaking spacing,不断打空格) +- `<`:小于号`<`(less than) +- `>`:大于号`>`(greater than) +- `&`:符号`&` +- `"`:双引号 +- `'`:单引号 +- `©`:版权`©` +- `™`:商标`™` +- `绐`:文字`绐`。其实,`#32464`是汉字`绐`的unicode编码。 + + +| 特殊字符 | 描述 |字符的代码 | +|:-------------|:-------------|:-----| +||空格符|` `| +|<|小于号|`<`| +|> |大于号|`>`| +|&|和号|`&`| +|¥|人民币|`¥`| +|©|版权|`©`| +|®|注册商标|`®`| +|°|摄氏度|`°`| +|±|正负号|`±`| +|×|乘号|`×`| +|÷|除号|`÷`| +|²|平方2(上标2)|`²`| +|³|立方3(上标3)|`³`| + +### 下划线、中划线、斜体 + +- ``:下划线标记 + +- ``或``:中划线标记(删除线) + +- ``或``:斜体标记 + +### 字体标签`` + +属性: + +- `color="红色"`或`color="#ff00cc"`或`color="new rgb(0,0,255)"`:设置字体颜色。 + 设置方式:单词 \ #ff00cc \ rgb(0,0,255) + +- `size`:设置字体大小。 取值范围只能是:1至7。取值时,如果取值大于7那就按照7来算,如果取值小于1那就按照1来算。如果想要更大的字体,那就只能通过css样式来解决。 + +- `face="微软雅黑"`:设置字体类型。 + +### 上标`` 下标`` + +上小标这两个标签容易混淆,怎么记呢?这样记:`b`的意思是`bottom:底部` +举例: +```html +O2 53 +``` + +### 超链接的属性 + +- `href`:目标URL +- `title`:悬停文本。 +- `name`:主要用于设置一个锚点的名称。 +- `target`:告诉浏览器用什么方式来打开目标页面。`target`属性有以下几个值: + - `_self`:在同一个网页中显示(默认值) + - `_blank`:**在新的窗口中打开**。 + - `_parent`:在父窗口中显示 + - `_top`:在顶级窗口中显示 + + + + +