目录
一.大前端
1.前端能做什么
| APP、小程序、游戏、网站、微信公众号、H5… |
2.WEB与Internet
| Internet：全球性计算机互联网，俗称：因特网、国际互联网… 互联网有很多的应用，网站见得最多的应用 —— WEB |
3.浏览器
百度/夸克/UC/360/QQ…
谷歌/火狐/edge/Safari/欧朋
4.编辑器
记事本/Editplus/vscode/hbuilder/Dreamweaver/sublime…
二.HTML入门
1.前端开发涉及到的三个语言
| HTML: 负责网页的基本内容结构 CSS: 负责网页美化 JS: 负责网页的行为/交互效果 |
2.HTML概述
HTML : 超文本标记语言，可以简单理解就是一个网页
HTML语言，标记也称为标签，运行在浏览器
<b> -> <标记名称>
超文本：文本、图片、视频、声音、超链接…
3.HTML特点
以.html或者.htm为后缀名
浏览器会解析执行html文件多中的代码(从上往下，从左往右)
三.HTML语法规范
1.语法基础
标签格式：用尖括号来包裹
<标签名称>
分类：
(1)双标签形式
<标签名称>内容部分</标签名称>
(2)单标签形式
既是开始，又是结束
<标签名称> 或者 <标签名称 />
HTML5以后推荐使用第1种
2.文档类型声明
| <!DOCTYPE html> 写在第1行，声明当前HTML版本为HTML5，浏览器就会按照这个规范来解析 |
3.网页结构
| <html> 是网页的根标签，一个网页只有一个根标签 <head></head> 网页的头部，定义网页的配置信息 <body></body> 网页的主体，展示内容 </html> |
| head之间可以放的内容 <title>设置网页的标题</title> <meta charset="utf-8"> 设置网页的编码，防止出现乱码 |
4.注释
不被浏览器解析运行的代码
格式 <!-- 这里边就是注释的内容 -->
用于增强代码的可读性，解释代码
| 快捷键 ctrl + / 添加/取消注释 |
四.HTML标签
1.文本样式标签
| b 加粗 i 倾斜 u 下划线 s 删除线 HTML提供了一组有语义的标签 strong 加粗 em 倾斜 ins 下划线 del 删除 说明：如果有文字的话，通常选择后边有语义的标签。 |
2.换行标签
| <br> 或者 <br /> 单标签形式 |
3.标题标签
| <hn></hn> h1 ~ h6 单独占一行，文字h1最大，h6最小，有加粗效果，上下方向有边距 |
4.段落标签
| <p>段落内容</p> 单独占一行，上下方向有边距 |
5.水平线标签
| <hr> 或者 <hr/> 单标签 会在页面中出现一条独占一行的分割线 |
6.图片标签
常见的图片格式：jpg/jpeg、png、gif
| <img> 单标签 属性： src=”图片资源的路径” width=”图片的宽度，单位是像素(px)或者百分比” height=”图片的高度，单位是像素(px)或者百分比” alt=”图片加载失败时显示的文字” 如果只是设置宽度或者高度，另一个方向会等比例缩放。 如果宽度和高度同时设置，可能会出现比例失真 |
练习：将图片banner1.jpg插入到网页中，设置宽度为800，高度为自适应。
7.路径(URL)
| (1)相对路径：相对于当前的html 兄弟资源：直接写资源名称 兄弟资源的儿子：先找兄弟再找儿子 兄弟/儿子 找父亲：../ |
| (2)绝对路径 是一个完整的路径，使用网络资源的时候，就会使用绝对路径 https://n.sinaimg.cn/default/crawl/48/w550h298/20220801/01b4-49b8d133ce3457eadcba26190d8e214b.png 优点：节省本服务器的存储空间 缺点：资源不稳定，一旦远程服务器删除图片资源，本地服务器也就无法访问 |
<!-- 兄弟资源 -->
<img src="1.png">
<!-- 兄弟资源的儿子 -->
<img src="img/xin.jpg">
<!-- 兄弟资源的儿子的儿子 -->
<img src="img/head/xin2.jpg">8.标签的属性
| <标签名称 属性名=”属性值” 属性名=”属性值”></标签名称> (1)属性必须放在开始的标签中 (2)多个属性之间用空格分隔开，顺序不分先后 (3)属性名和属性值之间用等号隔开，属性值要放入到引号中 |
| HTML中通用的属性 title=”鼠标悬停在标签上显示的文字” |
9.超链接
| <a href=””>链接的文字</a> href=”设置要跳转的页面路径” target=”” _self 在自身页面打开链接 —— 默认的 _blank 在新的页面打开链接 |
HTML单词
http://www.codece.com/archives/277
7740
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
