diff --git "a/\345\272\267\345\273\272\346\242\205/20240904--git\346\265\201\347\250\213.md" "b/\345\272\267\345\273\272\346\242\205/20240904--git\346\265\201\347\250\213.md" new file mode 100644 index 0000000000000000000000000000000000000000..4bb9db13816e9973691b792cb8f0edeb72d80e1e Binary files /dev/null and "b/\345\272\267\345\273\272\346\242\205/20240904--git\346\265\201\347\250\213.md" differ diff --git "a/\345\272\267\345\273\272\346\242\205/20240909-- \346\265\217\350\247\210\345\231\250\345\274\225\346\223\216+\346\200\235\347\273\264\345\257\274\345\233\276.md" "b/\345\272\267\345\273\272\346\242\205/20240909-- \346\265\217\350\247\210\345\231\250\345\274\225\346\223\216+\346\200\235\347\273\264\345\257\274\345\233\276.md" new file mode 100644 index 0000000000000000000000000000000000000000..857a7441d60bdcb3e896423835b9d9be05d8a1d7 --- /dev/null +++ "b/\345\272\267\345\273\272\346\242\205/20240909-- \346\265\217\350\247\210\345\231\250\345\274\225\346\223\216+\346\200\235\347\273\264\345\257\274\345\233\276.md" @@ -0,0 +1,26 @@ +### 认识Web： +- Web:全球广域网，也称`万维网` +- 网页：网页是构成网站的基本元素 +- 浏览器：网页运行的平台，进行人与机交互 +--- +### Web标准： + + 结构标准HTML:进行整理与分类 + + 表现标准CSS:用于设置网页元素的版式等 + + 行为标准JS:定义网页的交互和行为 +--- +### Web前端的三层： + + HTML：超文本标记语言 + + CSS：层叠样式表 + + JS：从交互的角度描述页面的行为 + W3C组织：万维网联盟组织，指定统一的标准 + --- +### 浏览器的介绍： + - 浏览器是网页运行的平台 + --- +### 浏览器的组成： ++ **渲染引擎（浏览器内核）**：解析HTML和CSS；渲染引擎就是浏览器兼容性问题出现的根本问题 ++ JS引擎（JS解释器） + + + + diff --git "a/\345\272\267\345\273\272\346\242\205/20240911--\346\260\264\345\271\263\347\272\277\346\240\267\345\274\217\343\200\201\346\226\207\345\255\227\345\261\205\344\270\255+\345\210\235\345\247\213HTML+\346\216\222\347\211\210\346\240\207\347\255\276.md" "b/\345\272\267\345\273\272\346\242\205/20240911--\346\260\264\345\271\263\347\272\277\346\240\267\345\274\217\343\200\201\346\226\207\345\255\227\345\261\205\344\270\255+\345\210\235\345\247\213HTML+\346\216\222\347\211\210\346\240\207\347\255\276.md" new file mode 100644 index 0000000000000000000000000000000000000000..d950378f47997b1b8ca0f997f48514976f88c202 --- /dev/null +++ "b/\345\272\267\345\273\272\346\242\205/20240911--\346\260\264\345\271\263\347\272\277\346\240\267\345\274\217\343\200\201\346\226\207\345\255\227\345\261\205\344\270\255+\345\210\235\345\247\213HTML+\346\216\222\347\211\210\346\240\207\347\255\276.md" @@ -0,0 +1,129 @@ +# 作业：水平线样式、文字居中 +1. 代码如下： +```html + + + + + Document + + + + +

水平线样式

+ +
+ + +
+ + +

文字居中

+
我是一个女孩纸，一个爱哭爱闹的女孩纸。
+ + + + +``` +2. 效果图 +![](./图片/水平线样式、文字居中.png) + +# 笔记：HTML的概述 +## HTML的概念 +**HTML** 全称为 HyperText Markup Language，译为**超文本标记语言**。 + +HTML 不是一种编程语言，是一种描述性的**标记语言**。 + +**作用**：HTML是负责描述文档**语义**的语言。 + +# HTML的专有名词 + * 网页 + * 主页（首页） + * 标记：比如`

：开始标记

：结束标记` + * 元素: 比如`

内容

` + * 属性：给每一个标签所做的辅助信息。 + * XHTML + * DHTML + * HTTP + + ## HTML结构详解 + +HTML标签通常是成对出现的（**双边标记**）， +比如 `
` 和 `
`；也有少部分单标签（**单边标记**），如：`
`、`
`和``等。 + +#### html骨架标签分类 + +| 标签名 | 定义 | 说明 | +| ----------------- | :--------: | :------------------------------------------------------ | +| `` | HTML标签 | 页面中最大的标签，我们成为根标签 | +| `` | 文档的头部 | 注意在head标签中我们必须要设置的标签是title | +| `` | 文档的标题 | 让页面拥有一个属于自己的网页标题 | +| `` | 文档的主体 | 元素包含文档的所有内容，页面内容 基本都是放到body里面的 | + +## HTML的规范 + +* HTML不区分大小写，但HTML的标签名、类名、标签属性、大部分属性值建议统一用小写。 +* HTML页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符，比如dos系统) + + + + + +# 排版标签 + +- `

` + +- `

` + +- `

` + +- `
` + +- `
` + +- `` + +- `
` + +## HTML注释 +`ctrl + /` + +## 段落标签`

` + +## `align`属性，属性值可以是：left、center、right + +![](./捕获.PNG) + +* HTML标签是分等级的，HTML将所有的标签分为两种： + +- **文本级标签**：p、span、a、b、i、u、em。文本级标签里只能放**文字、图片、表单元素**。（a标签里不能放a和input） + +- **容器级标签**：div、h系列、li、dt、dd。容器级标签里可以放置任何东西。 + +## 水平线标签`

` + +## 换行标签`
` + +## `
`和``标签 +### div和span的介绍 + +- **div标签**：可以把标签中的内容分割为独立的区块。必须单独占据一行。 + +- **span标签**：和div的作用一致，但不换行。 + +## 内容居中标签`
` + +## 预定义（预格式化）标签`
`
\ No newline at end of file
diff --git "a/\345\272\267\345\273\272\346\242\205/20240913--\345\260\206\345\233\276\347\211\207\346\260\264\345\271\263\347\253\226\347\233\264\346\226\271\345\220\221\345\261\205\344\270\255+\345\255\227\344\275\223\346\240\207\347\255\276\343\200\201\350\266\205\351\223\276\346\216\245\343\200\201\345\233\276\347\211\207\346\240\207\347\255\276.md" "b/\345\272\267\345\273\272\346\242\205/20240913--\345\260\206\345\233\276\347\211\207\346\260\264\345\271\263\347\253\226\347\233\264\346\226\271\345\220\221\345\261\205\344\270\255+\345\255\227\344\275\223\346\240\207\347\255\276\343\200\201\350\266\205\351\223\276\346\216\245\343\200\201\345\233\276\347\211\207\346\240\207\347\255\276.md"
new file mode 100644
index 0000000000000000000000000000000000000000..a2261822283928735f9e021b21d934a2e6a1fc82
--- /dev/null
+++ "b/\345\272\267\345\273\272\346\242\205/20240913--\345\260\206\345\233\276\347\211\207\346\260\264\345\271\263\347\253\226\347\233\264\346\226\271\345\220\221\345\261\205\344\270\255+\345\255\227\344\275\223\346\240\207\347\255\276\343\200\201\350\266\205\351\223\276\346\216\245\343\200\201\345\233\276\347\211\207\346\240\207\347\255\276.md"
@@ -0,0 +1,139 @@
+# 作业(图片居中)
+
+1. 代码如下：
+```html
+
+
+    
+    
+    Document
+    
+
+
+    
+
+
+```
+
+2. 效果图：
+![](./图片/将图片水平竖直方向居中.png)
+
+# 笔记
+
+## 字体标签
+### 特殊字符（转义字符）
+- ` ` ：空格
+- `<`; :小于号<
+- `>`：大于号`>`
+- `&`：符号`&`
+- `"`：双引号
+- `'`：单引号
+- `©`：版权`©`
+- `™`：商标`™`
+- `绐`：文字`绐`。其实，`#32464`是汉字`绐`的unicode编码。
+
+### 下划线、中划线、斜体
+- ``:下划线标记
+- ``或``:中划线标记（删除线）
+- ``或``：斜体标记
+
+### 上标 ``   下标 ``
+ 
+### 超链接
+1. 外部链接：连接到外部文件
+```例如：
+点击进入另外一个文件
+```
+
+2. 邮件链接
+  - 代码举例：
+  ```
+  点击进入另外一个文件
+  ```
+
+### 超链接的属性
+
+- `href`：目标URL
+- `title`：悬停文本。
+- `name`：主要用于设置一个锚点的名称。
+- `target`：告诉浏览器用什么方式来打开目标页面。
+- `target`属性有以下几个值：
+  - `_self`：在同一个网页中显示（默认值）
+  - `_blank`：**在新的窗口中打开**。
+  - `_parent`：在父窗口中显示
+  - `_top`：在顶级窗口中显示
+
+`title`属性举例：
+```
+  情侣照
+  ```
+  ![](./捕获.PNG)
+
+  `img`和`a`标签的属性-->`a`是一个文本级的标签
+ ```
+  
+  
+
+  `a`的语义要小于`p`，`a`就是可以当做文本来处理，所以`p`里面相当于放的就是纯文字。
+```
+
+## img 标签
+```
+
+```
+#### 能插入的图片类型
+
+- 能够插入的图片类型是：jpg(jpeg)、gif、png、bmp等。
+
+- 不能往网页中插入的图片格式是：psd、ai等。
+
+### img标签的`src`属性
+
+这里涉及到图片的一个属性：
+
+- `src`属性：指图片的路径
+在写**图片的路径**时，有两种写法：相对路径、绝对路径
+
+### img标签的其他属性
+
+#### width、height 属性
+
+- `width`：图像的宽度。
+
+- `height`：图像的高度。
+#### Alt 属性
+
+- `alt`：当图片不可用（无法显示）的时候，代替图片显示的内容。alt是英语 alternate “替代”的意思，代表替换资源。
+
+#### title 属性
+
+- `title`：**提示性文本**。鼠标悬停时出现的文本。
+
+#### align 属性
+
+- 图片的`align`属性：**图片和周围文字的相对位置**。属性取值可以是：bottom（默认）、center、top、left、right。
\ No newline at end of file
diff --git "a/\345\272\267\345\273\272\346\242\205/20240914--\350\213\271\346\236\234\345\256\230\347\275\221\345\257\274\350\210\252\346\235\241+\345\233\276\346\226\207\350\257\246\350\247\243.md" "b/\345\272\267\345\273\272\346\242\205/20240914--\350\213\271\346\236\234\345\256\230\347\275\221\345\257\274\350\210\252\346\235\241+\345\233\276\346\226\207\350\257\246\350\247\243.md"
new file mode 100644
index 0000000000000000000000000000000000000000..421333ff31c906f33266a0def03cec30a3daa3e4
--- /dev/null
+++ "b/\345\272\267\345\273\272\346\242\205/20240914--\350\213\271\346\236\234\345\256\230\347\275\221\345\257\274\350\210\252\346\235\241+\345\233\276\346\226\207\350\257\246\350\247\243.md"
@@ -0,0 +1,159 @@
+# 作业
+1. 代码如下
+```html
+
+
+
+    
+    
+    Document
+    
+
+
+   

+    

+        
+        
+        
+    
+    

+    

+        
    
+            
+            
  • 商店
    • 
+            
  • Mac
    • 
+            
  • iPad
    • 
+            
  • iPhone
    • 
+            
  • Watch
    • 
+            
  • Vision
    • 
+            
  • Airpods
    • 
+            
  • 家居
    • 
+            
  • 娱乐
    • 
+            
  • 配件
    • 
+            
  • 技术支持
    • 
+            
+        

+    

+    

+        
+        
+        
+    
+    

+    

+        
+        
+        
+    
+    

+   

+
+
+```
+
+2. 效果图
+![](./图片/苹果官网导航条.png)
+
+# 笔记：图文详解
+## 主要内容：
+
+- 列表标签`
    `、`
      `、`
      `
+- 表格标签``
+- 框架标签机内嵌框架`