目录
一、资源类型
Web中的资源从生成方式的角度可以分为动态资源和静态资源
资源根据内容的格式不同，也可以看作不同的类型，常见的有
1.1 html 格式
Hyper Text Markup Language--超文本标记语言：Web应用中用于框架和内容（类比毛坯房）
1. 2 css 格式
Cascading Style Sheets--层叠样式表：Web应用中的显示布局和样式（类比房子的装修）
1.3 JavaScript 格式
运行在浏览器上的一门语言--JS脚本：Web应用中做逻辑处理（类比为房子中的人）
1.4 多媒体格式
1）图片：jpg|jpeg、png、gif、webp、bmp
2) 音频：aac、mp3
3) 视频：mp4|mpeg4、flv、mkv
5）纯文本格式：txt
6）结构化数据：json、xml
二、html 格式
2.1 超文本
Hyper Text Markup Language--超文本标记语言
比一般的文本能力更强，可以有超链接（hyper link）
2.2 标签
• HTML中的标签是有规定的，并不是任何标签都可以（最新的标准允许自定义标签）
块级标签和内联标签
• html中有些标签自带换行功能，称之为块级标签（block）
• 不带换行功能的标签，称之为内联标签（inline）
通常标签和单标签
• 通常标签： （开始标签）内容（闭合标签）
<h1> : 开始标签
</h1> : 闭合标签
• 单一标签：只有开始标签的称之为单标签
• 属性
标签中允许有属性（attributes）存在，放在开始标签内，基本格式为 key="value"
注意
• key=value中等号两边没有空格
• key不需要引号引起来
• value需要引号引起来，单引号，双引号都可以
例如
<html lang="zh-hans">
<meta charset="UTF-8">
<!--描述页面的字符编码方式. 没有这一行可能会导致中文乱码-->2.2.1 标题标签：h1-h6
块级标签，数字越大字体越小
有默认样式(之后可以通过css修改)
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>2.2.2 段落标签：p
块级标签
<p>这是一个段落</p>注意
• p 标签之间存在一个空隙
• 当前的 p 标签描述的段落, 前面还没有缩进
• 自动根据浏览器宽度来决定排版
• html 内容首尾处的换行, 空格均无效
• 在 html 中文字之间输入的多个空格只相当于一个空格
• html 中直接输入换行不会真的换行, 而是相当于一个空格
2.2.3 注释
<!--注释-->ctrl+/快速注释
2.2.4 换行标签：br
<br/>• br是break的缩写
• br是一个单标签
• <br/>是规范写法，不建议写成<br>
2.2.5 格式化标签
• 加粗: strong 标签 和 b 标签
• 倾斜: em 标签 和 i 标签
• 删除线: del 标签 和 s 标签
• 下划线: ins 标签 和 u 标签
<strong>strong 加粗</strong>
<b>b 加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>2.2.6 图片标签： img
单标签
<img src="图片资源的路径">
<img src="rose.jpg">img 标签的其他属性
• alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字.
• title: 提示文本. 鼠标放到图片上, 就会有提示.
• width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个等比例缩放. 否则会图片失衡.
• border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定.
<img src="rose.jpg" alt="鲜花" title="这是一朵鲜花" width="500px" height="800px"
border="5px">绝对路径和相对路径
绝对路径(absolute path): 从树的根节点出发，到达目标节点经过的路径表现一定是/开头
ex: /image/xx.jpg
相对路径(relative path): 从某个节点出发，到达目标节点经过的路径，表现为..开头
ex: ../../image/xx.jpg
绝对路径就相当于明确的地址
相对路径就当于在某地向某人问路，得到答案：往前走。。然后在。。。
2.2.7 超链接（锚点） <a>
通常标签，超链接的表现形式为在一个网页上点击某些资源可以跳转到另一个网页上
• href: 必须具备, 表示点击后会跳转到哪个页面.
• target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开.
<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com" target="_blank">百度</a>ps: 快捷键
h1{内容}+tab键 == <h1>内容</h1>
或者
h1+直接按tab键 == <h1></h1>
ctrl+R：刷新网页
ctrl+shift+i: 开发者工具
4203
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
