diff --git "a/\346\226\271\345\256\207\350\210\252/0918\346\227\245\344\271\213\345\211\215\347\232\204HTML\344\275\234\344\270\232/20240911\344\275\234\344\270\232\357\274\210HTML\350\247\204\350\214\203\357\274\214\346\216\222\347\211\210\357\274\211.html" "b/\346\226\271\345\256\207\350\210\252/0918\346\227\245\344\271\213\345\211\215\347\232\204HTML\344\275\234\344\270\232/20240911\344\275\234\344\270\232\357\274\210HTML\350\247\204\350\214\203\357\274\214\346\216\222\347\211\210\357\274\211.html" new file mode 100644 index 0000000000000000000000000000000000000000..12e57cf9a968b1fa0111c18fbe780e3e5656a12c --- /dev/null +++ "b/\346\226\271\345\256\207\350\210\252/0918\346\227\245\344\271\213\345\211\215\347\232\204HTML\344\275\234\344\270\232/20240911\344\275\234\344\270\232\357\274\210HTML\350\247\204\350\214\203\357\274\214\346\216\222\347\211\210\357\274\211.html" @@ -0,0 +1,26 @@ + + + + + + Document + + + + + + + + +
这是居中的文字
+
+ + \ No newline at end of file diff --git "a/\346\226\271\345\256\207\350\210\252/0918\346\227\245\344\271\213\345\211\215\347\232\204HTML\344\275\234\344\270\232/20240913\344\275\234\344\270\232\357\274\210\345\210\227\350\241\250\357\274\214\346\240\207\347\255\276\357\274\211/20240913.html" "b/\346\226\271\345\256\207\350\210\252/0918\346\227\245\344\271\213\345\211\215\347\232\204HTML\344\275\234\344\270\232/20240913\344\275\234\344\270\232\357\274\210\345\210\227\350\241\250\357\274\214\346\240\207\347\255\276\357\274\211/20240913.html" new file mode 100644 index 0000000000000000000000000000000000000000..eac974fa9299921dea23bac6d760bf9b4eb71e0e --- /dev/null +++ "b/\346\226\271\345\256\207\350\210\252/0918\346\227\245\344\271\213\345\211\215\347\232\204HTML\344\275\234\344\270\232/20240913\344\275\234\344\270\232\357\274\210\345\210\227\350\241\250\357\274\214\346\240\207\347\255\276\357\274\211/20240913.html" @@ -0,0 +1,27 @@ + + + + + + Document + + + + 描述性文字 + + + \ No newline at end of file diff --git "a/\346\226\271\345\256\207\350\210\252/0918\346\227\245\344\271\213\345\211\215\347\232\204HTML\344\275\234\344\270\232/20240913\344\275\234\344\270\232\357\274\210\345\210\227\350\241\250\357\274\214\346\240\207\347\255\276\357\274\211/ecde9cdc8289416298d0a500928ee224.jpeg" "b/\346\226\271\345\256\207\350\210\252/0918\346\227\245\344\271\213\345\211\215\347\232\204HTML\344\275\234\344\270\232/20240913\344\275\234\344\270\232\357\274\210\345\210\227\350\241\250\357\274\214\346\240\207\347\255\276\357\274\211/ecde9cdc8289416298d0a500928ee224.jpeg" new file mode 100644 index 0000000000000000000000000000000000000000..2354b6b00e6b2c24b8f31376dd66c635163a723a Binary files /dev/null and "b/\346\226\271\345\256\207\350\210\252/0918\346\227\245\344\271\213\345\211\215\347\232\204HTML\344\275\234\344\270\232/20240913\344\275\234\344\270\232\357\274\210\345\210\227\350\241\250\357\274\214\346\240\207\347\255\276\357\274\211/ecde9cdc8289416298d0a500928ee224.jpeg" differ diff --git "a/\346\226\271\345\256\207\350\210\252/0918\346\227\245\344\271\213\345\211\215\347\232\204HTML\344\275\234\344\270\232/20240914\344\275\234\344\270\232\357\274\210\345\233\276\347\211\207\357\274\214\350\266\205\351\223\276\346\216\245\357\274\211.html" "b/\346\226\271\345\256\207\350\210\252/0918\346\227\245\344\271\213\345\211\215\347\232\204HTML\344\275\234\344\270\232/20240914\344\275\234\344\270\232\357\274\210\345\233\276\347\211\207\357\274\214\350\266\205\351\223\276\346\216\245\357\274\211.html" new file mode 100644 index 0000000000000000000000000000000000000000..5fb717eff5b6ca40507d547d98b8bd5e097043a8 --- /dev/null +++ "b/\346\226\271\345\256\207\350\210\252/0918\346\227\245\344\271\213\345\211\215\347\232\204HTML\344\275\234\344\270\232/20240914\344\275\234\344\270\232\357\274\210\345\233\276\347\211\207\357\274\214\350\266\205\351\223\276\346\216\245\357\274\211.html" @@ -0,0 +1,88 @@ + + + + + + Document + + + + + + + + +
+ + + + + +
+ + + \ No newline at end of file diff --git "a/\346\226\271\345\256\207\350\210\252/0918\346\227\245\344\271\213\345\211\215\347\232\204HTML\344\275\234\344\270\232/20240918\344\275\234\344\270\232\357\274\210\346\214\211\351\222\256\357\274\214\346\202\254\345\201\234\357\274\211.html" "b/\346\226\271\345\256\207\350\210\252/0918\346\227\245\344\271\213\345\211\215\347\232\204HTML\344\275\234\344\270\232/20240918\344\275\234\344\270\232\357\274\210\346\214\211\351\222\256\357\274\214\346\202\254\345\201\234\357\274\211.html" new file mode 100644 index 0000000000000000000000000000000000000000..a47b1e634e208d284fc43d01f705ef622ab8e57c --- /dev/null +++ "b/\346\226\271\345\256\207\350\210\252/0918\346\227\245\344\271\213\345\211\215\347\232\204HTML\344\275\234\344\270\232/20240918\344\275\234\344\270\232\357\274\210\346\214\211\351\222\256\357\274\214\346\202\254\345\201\234\357\274\211.html" @@ -0,0 +1,108 @@ + + + + + + Document + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
姓名年龄城市
张三28北京
李四30南京
赵五36天津
老六27长安
+ + + + + + + \ No newline at end of file diff --git "a/\346\226\271\345\256\207\350\210\252/20240904\344\275\234\344\270\232\357\274\210\345\261\205\344\270\255\357\274\214\346\260\264\345\271\263\357\274\211.md" "b/\346\226\271\345\256\207\350\210\252/20240904\344\275\234\344\270\232\357\274\210\345\261\205\344\270\255\357\274\214\346\260\264\345\271\263\357\274\211.md" new file mode 100644 index 0000000000000000000000000000000000000000..ad469c73dee826a9f16cc15caf1c55ed296e7744 --- /dev/null +++ "b/\346\226\271\345\256\207\350\210\252/20240904\344\275\234\344\270\232\357\274\210\345\261\205\344\270\255\357\274\214\346\260\264\345\271\263\357\274\211.md" @@ -0,0 +1,67 @@ +在HTML中，你可以使用`
`标签来创建水平线。要更改水平线的颜色、宽度以及将文字居中，通常需要结合CSS（层叠样式表）来实现。下面是如何操作的详细说明： + +### 更改水平线颜色 + +要更改水平线的颜色，你需要使用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布局技术。 + +以上是基本的水平线样式更改和文字居中方法。根据你的具体需求，可能需要调整或结合使用不同的CSS属性和选择器。 \ No newline at end of file diff --git "a/\346\226\271\345\256\207\350\210\252/20240904\347\254\224\350\256\260\357\274\210\345\261\205\344\270\255\357\274\214\346\260\264\345\271\263\357\274\211.md" "b/\346\226\271\345\256\207\350\210\252/20240904\347\254\224\350\256\260\357\274\210\345\261\205\344\270\255\357\274\214\346\260\264\345\271\263\357\274\211.md" new file mode 100644 index 0000000000000000000000000000000000000000..311ab129f764b10fc0d34247dc36a3776ef4ebbe --- /dev/null +++ "b/\346\226\271\345\256\207\350\210\252/20240904\347\254\224\350\256\260\357\274\210\345\261\205\344\270\255\357\274\214\346\260\264\345\271\263\357\274\211.md" @@ -0,0 +1,26 @@ + +## markdown语法普及 +1. #：一级标签 +2. ##：二级标签 +3. 英文的!【】（路径）：显示图片 +4. 英文的【】（网址）：显示超链接 +5. *单星号*：斜体 +6. **双星号**：粗体 +7. ***三星号***：粗斜体 +8. 大于号：引用 + +>你好啊！ + +9. 反引号:代码标签 `h1` +10. 三反引号：多行代码标签 +11. 三反引号＋js：多行代码高亮 +12. 1.＋空格：有序列表 +13. 加号 星号 减号：无序列表 +14. 表格 + +| 左对齐 | 居中 | 右对齐 | +| :- | :-: | -: | +| 单元格1 | 单元格2 | 单元格3 | +| 单元格4 | 单元格5 | 单元格6 | + + diff --git "a/\346\226\271\345\256\207\350\210\252/20240909\344\275\234\344\270\232\357\274\210\350\257\255\346\263\225\357\274\211.md" "b/\346\226\271\345\256\207\350\210\252/20240909\344\275\234\344\270\232\357\274\210\350\257\255\346\263\225\357\274\211.md" new file mode 100644 index 0000000000000000000000000000000000000000..952f3805700a38f996ec07b9c42a73ecfbb55972 --- /dev/null +++ "b/\346\226\271\345\256\207\350\210\252/20240909\344\275\234\344\270\232\357\274\210\350\257\255\346\263\225\357\274\211.md" @@ -0,0 +1,10 @@ +# 浏览器引擎 +| 浏览器 | 渲染引擎 | +| :-:|:-:| +| IE浏览器 | Trident | +| 世界之窗 | Trident | +| Opera | Blink | +| Safar | webkit | +| Firefox火狐浏览器| Gecko | +| Opera（7.0 - 9.60 版本） | Presto | +| Google Chrome | Blink | diff --git "a/\346\226\271\345\256\207\350\210\252/20240909\347\254\224\350\256\260\357\274\210\350\257\255\346\263\225\357\274\211.md" "b/\346\226\271\345\256\207\350\210\252/20240909\347\254\224\350\256\260\357\274\210\350\257\255\346\263\225\357\274\211.md" new file mode 100644 index 0000000000000000000000000000000000000000..84c9b3dce6aebc83e7c2a4434535368973b0ac4d --- /dev/null +++ "b/\346\226\271\345\256\207\350\210\252/20240909\347\254\224\350\256\260\357\274\210\350\257\255\346\263\225\357\274\211.md" @@ -0,0 +1,45 @@ +@ + * Web前端 + * HTML：超文本标记语言。从语义的角度描述页面的结构 + * css：层叠样式表。从审美的角度美化页面的样式。 + * JS：从交互的角度描述页面的行为 + * 浏览器 + * 是网页运行的平台 + * 常见的浏览器 + * 谷歌 Chrome + * Safari + * 火狐（Firefox） + * IE + * Edge + * Opera + * 组成 + * 渲染引擎（`浏览器内核`） + * 决定了浏览器如何显示网页的内容以及页面的格式信息 + * `渲染引擎是浏览器兼容性问题出现的根本原因` + * 作用：读取网页内容，计算网页的显示方式并显示在页面上 + * JS引擎 + * 用来解析网页中的JavaScript代码，对其处理后再运行 + * HTML + * 专有名词 + * 网页 ：由各种标记组成的一个页面就叫网页。 + * 主页(首页) : 一个网站的起始页面或者导航页面。 + * 标记： 也叫标签。每个标签都规定好了特殊的含义。如

称为开始标记 ，

称为结束标记， + * 元素：比如

内容

称为元素，也叫dom元素，也叫节点. + * 属性：给每一个标签所做的辅助信息。 + * XHTML：符合XML语法标准的HTML。 + * DHTML：dynamic，动态的。javascript + css + html合起来的页面就是一个 DHTML。 + * HTTP：超文本传输协议。用来规定客户端浏览器和服务端交互时数据的一个格式。SMTP：邮件传输协议，FTP：文件传输协议。 + * 页面骨架 + * + * + * + * + * + * Document + * + * + * + * + + +@endmindmap \ No newline at end of file diff --git "a/\346\226\271\345\256\207\350\210\252/20240911\347\254\224\350\256\260\357\274\210HTML\350\247\204\350\214\203\357\274\214\346\216\222\347\211\210\357\274\211.md" "b/\346\226\271\345\256\207\350\210\252/20240911\347\254\224\350\256\260\357\274\210HTML\350\247\204\350\214\203\357\274\214\346\216\222\347\211\210\357\274\211.md" new file mode 100644 index 0000000000000000000000000000000000000000..ea0c7fe9c6081a79e6e4e6333dfc153846543f07 --- /dev/null +++ "b/\346\226\271\345\256\207\350\210\252/20240911\347\254\224\350\256\260\357\274\210HTML\350\247\204\350\214\203\357\274\214\346\216\222\347\211\210\357\274\211.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/\346\226\271\345\256\207\350\210\252/20240913\347\254\224\350\256\260\357\274\210\345\210\227\350\241\250\357\274\214\346\240\207\347\255\276\357\274\211.md" "b/\346\226\271\345\256\207\350\210\252/20240913\347\254\224\350\256\260\357\274\210\345\210\227\350\241\250\357\274\214\346\240\207\347\255\276\357\274\211.md" new file mode 100644 index 0000000000000000000000000000000000000000..aa1c3dd4783f921118ac6628401ced0b9ba1faa6 --- /dev/null +++ "b/\346\226\271\345\256\207\350\210\252/20240913\347\254\224\350\256\260\357\274\210\345\210\227\350\241\250\357\274\214\346\240\207\347\255\276\357\274\211.md" @@ -0,0 +1,93 @@ + +字体标签： ``、 ``、 `` 、`` 、`` + +超链接 `` + +## 字体标签 + +### 特殊字符（转义字符） + +- ` `：空格 （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 +``` + +### 锚链接 + +**锚链接**：给超链接起一个名字，作用是**在本页面或者其他页面的的不同位置进行跳转**。比如说，在网页底部有一个向上箭头，点击箭头后回到顶部，这个就可以利用锚链接。 + +首先我们要创建一个**锚点**，也就是说，使用`name`属性或者`id`属性给那个特定的位置起个名字。效果如下： + +![Paste_Image.png](http://img.smyhvae.com/2015-10-01-cnblogs_html_18.png) + + + + +### 超链接的属性 + +- `href`：目标URL +- `title`：悬停文本。 +- `name`：主要用于设置一个锚点的名称。 +- `target`：告诉浏览器用什么方式来打开目标页面。`target`属性有以下几个值： + - `_self`：在同一个网页中显示（默认值） + - `_blank`：**在新的窗口中打开**。 + - `_parent`：在父窗口中显示 + - `_top`：在顶级窗口中显示 + + + + + diff --git "a/\346\226\271\345\256\207\350\210\252/20240914\347\254\224\350\256\260\357\274\210\345\233\276\347\211\207\357\274\214\350\266\205\351\223\276\346\216\245\357\274\211.md" "b/\346\226\271\345\256\207\350\210\252/20240914\347\254\224\350\256\260\357\274\210\345\233\276\347\211\207\357\274\214\350\266\205\351\223\276\346\216\245\357\274\211.md" new file mode 100644 index 0000000000000000000000000000000000000000..672965914f7768a1e944d4b59d4435de204bd395 --- /dev/null +++ "b/\346\226\271\345\256\207\350\210\252/20240914\347\254\224\350\256\260\357\274\210\345\233\276\347\211\207\357\274\214\350\266\205\351\223\276\346\216\245\357\274\211.md" @@ -0,0 +1,102 @@ +# 标签 +- 列表标签：`
    `、`
      `、`
      ` +- 表格标签：`` +- 框架标签及内嵌框架`