Skip to content

C
Coding Tree

檀越@新空间 / Coding Tree

通知 2
Star 0
Fork 0
C
Coding Tree
提交 1ea0bfb1 编写于 作者: 彭世瑜's avatar 彭世瑜
浏览文件
操作

fix

上级 1d2e7178
隐藏空白更改
内联 并排
Showing with 428 addition and 74 deletion
blog/front-edn-learn.md → blog/front-edn-learn/basic.md
浏览文件 @ 1ea0bfb1
# 笔记：web 前端开发入门
# HTML 基本认知
<!-- <a href="/blog/demo/demo.html" target="_blank">demo</a> -->
[](demo/demo.html ':include :type=code')
[](demo/demo.html ':include height=95px')
## 资源
[2022 年前端学习路线图](https://www.bilibili.com/read/cv10431130)
[黑马程序员 web 前端开发入门教程，前端零基础 html5+css3+前端项目视频教程](https://www.bilibili.com/video/BV1Kg411T7t9)
[菜鸟教程-HTML 教程- (HTML5 标准)](https://www.runoob.com/html/html-tutorial.html)
## HTML 认知
1、常见 5 大浏览器
## 1、常见 5 大浏览器
- IE
- 火狐 FireFox
......@@ -24,7 +8,7 @@
- Safari
- 欧朋 Opera
2、渲染引擎
## 2、渲染引擎
| 浏览器 | 内核 |
| ------------ | ------- |
......@@ -33,7 +17,7 @@
| Safari | Webkit |
| Chrome/Opera | Blink |
3、Web 标准
## 3、Web 标准
保证不同浏览器打开页面显示效果一样
......@@ -43,11 +27,11 @@
| 表现 | CSS | 页面样式 |
| 行为 | JavaScript | 页面交互 |
4、HTML
## 4、HTML
Hyper Text Markup Language 超文本标记语言
5、hello world
## 5、hello world
需要设置显示`文件扩展名`
......@@ -63,7 +47,7 @@ index.html
<strong>hello world</strong>
</output>
6、HTML 骨架
## 6、HTML 骨架
```html
<html>
......@@ -80,7 +64,7 @@ index.html
- title 标题
- body 主体
7、开发工具
## 7、开发工具
- Visual Studio Code （首选）
- WebStorm
......@@ -88,7 +72,7 @@ index.html
- DreamWeaver
- HBuilder
8、VS Code 使用
## 8、VS Code 使用
快速生成 html 网页结构：
......@@ -100,7 +84,7 @@ index.html
- 浏览器打开：`Alt + B` / `option⌥ + B`
- ÏLive Server 打开：`[command⌘ + L, command⌘ + O]`
9、注释
## 9、注释
```html
<!-- 注释内容 -->
......@@ -109,12 +93,12 @@ index.html
- 浏览器中不显示注释内容
- 添加和取消注释快捷键：`command + /`
10、标签结构
## 10、标签结构
- 双标签 `<开始标签>内容</结束标签>`, 例如：`<strong>内容</strong>`
- 单标签 `<标签 />`, 例如：`<br>`
11、标签关系
## 11、标签关系
- 父子关系（嵌套关系）
......@@ -130,48 +114,3 @@ index.html
<head></head>
<body></body>
```
12、标题标签 Heading
`h1~h6`
```html
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
```
<output>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</output>
同时选中下一个相同字符：`command + D`
特点：
- 独占一行
- 文字加粗
- 文字变大，h1->h6 文字逐渐变小
13、段落标签 paragraph
```html
<p>内容</p>
```
<output>
<p>内容</p>
</output>
特点：
- 段落之间存在间隙
- 独占一行
blog/front-edn-learn/demo/table-1.html 0 → 100644
浏览文件 @ 1ea0bfb1
<table border="1">
<caption>
表格大标题
</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>Tom</td>
<td>23</td>
</tr>
<tr>
<td>Jack</td>
<td>24</td>
</tr>
</table>
\ No newline at end of file
blog/front-edn-learn/demo/table-2.html 0 → 100644
浏览文件 @ 1ea0bfb1
<table border="1">
<caption>
表格大标题
</caption>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tom</td>
<td>23</td>
</tr>
<tr>
<td>Jack</td>
<td>24</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>求和</td>
<td>57</td>
</tr>
</tfoot>
</table>
\ No newline at end of file
blog/front-edn-learn/demo/table-3.html 0 → 100644
浏览文件 @ 1ea0bfb1
<table border="1">
<caption>
表格大标题
</caption>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tom</td>
<td rowspan="2">23</td>
</tr>
<tr>
<td>Jack</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">求和: 57</td>
</tr>
</tfoot>
</table>
\ No newline at end of file
blog/front-edn-learn/element.md 0 → 100644
浏览文件 @ 1ea0bfb1
# 标签元素
## 1、标题标签 Heading
`h1~h6`
```html
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
```
<output>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</output>
同时选中下一个相同字符：`command + D`
特点：
- 独占一行
- 文字加粗
- 文字变大，h1->h6 文字逐渐变小
## 2、段落标签 Paragraph
```html
<p>内容</p>
```
<output>
<p>内容</p>
</output>
特点：
- 段落之间存在间隙
- 独占一行
## 3、排版标签
（1）换行符 Line Break
```html
第一行文本<br />第二行文本
```
<output>
第一行文本<br/>第二行文本
</output>
特点
- 单标签
- 让文字强制换行
（1）水平分割线 Horizontal Rule
```html
<hr />
```
<output>
<hr/>
</output>
## 4、文本格式化标签
推荐使用后者
- b/strong 加粗
- u/ins 下划线
- i/em 倾斜
- s/del 删除线
```html
<b>加粗</b>
<strong>加粗</strong>
<u>下划线</u>
<ins>下划线</ins>
<i>倾斜</i>
<em>倾斜</em>
<s>删除线</s>
<del>删除线</del>
```
<output>
<p>
<b>加粗</b>
<strong>加粗</strong>
</p>
<p>
<u>下划线</u>
<ins>下划线</ins>
</p>
<p>
<i>倾斜</i>
<em>倾斜</em>
</p>
<p>
<s>删除线</s>
<del>删除线</del>
</p>
</output>
## 5、媒体标签
（1）图片标签 Image
```html
<img
src="图片地址"
alt="替换文本"
title="提示文本"
width="宽度"
height="高度"
/>
```
标签属性：属性名=属性值
## 6、资源路径
（1）当前路径
```html
<img src="image.png" />
<!-- 推荐使用./ -->
<img src="./image.png" />
```
（2）下级路径
```html
<img src="./img/image.png" />
```
（3）上级路径
```html
<img src="../image.png" />
```
## 7、音频标签
```html
<audio
src="音频地址"
controls 显示播放控件
autoplay 自动播放（部分浏览器不支持）
loop 循环播放
</audio>
```
支持的格式 mp3 wav
## 8、视频标签
```html
<video src="视频地址"
controls 显示播放控件
autoplay 自动播放（谷歌浏览器需要配合muted静音播放）
muted 静音播放
loop 循环播放
</video>
```
支持的格式 mp4
## 9、链接标签 Anchor
```html
<a href="目标地址">文字内容</a>
<!-- eg: -->
<a href="https://www.baidu.com/">百度</a>
```
<output>
<a href="https://www.baidu.com/" target="_blank">百度</a>
</output>
属性：
- target: \_self 当前窗口打开（默认） / \_blank 新窗口打开
Tips: chrome 地址栏双击可以看到完整地址
网站的默认首页 index.html
## 10、列表
- 无序列表
- 有序列表
- 自定义列表
（1）无序列表 Unordered List
列表项 List Item
```html
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>桃子</li>
</ul>
```
<output>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>桃子</li>
</ul>
</output>
（2）有序列表 Ordered List
```html
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>桃子</li>
</ol>
```
<output>
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>桃子</li>
</ol>
</output>
（3）自定义列表 Description List
```html
<dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>香蕉</dd>
<dd>桃子</dd>
</dl>
```
<output>
<dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>香蕉</dd>
<dd>桃子</dd>
</dl>
</output>
标签含义
- dt Description Term
- dd Description Details
## 11、表格
（1）基本元素
标签含义
- tr Table Row
- th Table Header
- td Table Data
table 属性：
- border 边框宽度
- width 表格宽度
- height 表格高度
[](demo/table-1.html ':include :type=code')
[](demo/table-1.html ':include height=150')
（2）表格结构，可以省略
- thead 表格头部
- tbody 表格主体
- tfoot 表格底部
[](demo/table-2.html ':include :type=code')
[](demo/table-2.html ':include height=170')
（3）合并单元格
- 跨行合并（垂直）rowspan
- 跨列合并（水平）colspan
左上原则
- 上下合并，保留最上
- 左右合并，保留最左
> Tips: 不能跨结构合并
[](demo/table-3.html ':include :type=code')
[](demo/table-3.html ':include height=170')
blog/front-edn-learn/index.md 0 → 100644
浏览文件 @ 1ea0bfb1
# 笔记：web 前端开发入门
<!-- <a href="/blog/demo/demo.html" target="_blank">demo</a> -->
## 资源
[2022 年前端学习路线图](https://www.bilibili.com/read/cv10431130)
[黑马程序员 web 前端开发入门教程，前端零基础 html5+css3+前端项目视频教程](https://www.bilibili.com/video/BV1Kg411T7t9)
[菜鸟教程-HTML 教程- (HTML5 标准)](https://www.runoob.com/html/html-tutorial.html)
## 内容
1. [HTML基本认知](blog/front-edn-learn/basic.md)
2. [标签元素](blog/front-edn-learn/element.md)
blog/vue.md 0 → 100644
浏览文件 @ 1ea0bfb1
[](demo/demo.html ':include :type=code')
[](demo/demo.html ':include height=95px')
doc/html.md
浏览文件 @ 1ea0bfb1
# html
[笔记：web前端开发入门](blog/front-edn-learn.md)
[笔记：web前端开发入门](blog/front-edn-learn/index.md)
[HTML 快速参考](https://www.w3school.com.cn/html/html_quick.asp)
......
doc/vue.md
浏览文件 @ 1ea0bfb1
......@@ -4,3 +4,5 @@
<!-- Production -->
<script src="//cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
```
[vue.md](blog/vue.md)
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或