看自己用HTML文档，将自己曾经写的文章片段显示成一个网页的感觉好神奇
- 网站：指在因特网上根据一定的规则，使用HTML等在制作的展示特定内容相关的网页集合。
- 网页：网页是构成网站的基本元素，通常由文字、图片、声音、视频、链接等元素组成。通常见到的网页由.htm或.html后缀结尾的文件，因此将其俗称为HTML文件。
- HTML：（HyperText Markup Language）超文本标记语言，是用来描述网页的一种语言。HTML不是编程语言，而是一种标记语言（markup language），标记语言是一套标记标签（markup tag）。
- 网页的形成：前端人员开发代码——浏览器显示代码（解析、渲染）——生成Web页面。
- 浏览器是网页运行的平台。
- 常用浏览器：IE、火狐、谷歌、Safari、Opera。
- 浏览器内核（渲染引擎）：负责对网页语法的解释并渲染（显示）网页。
-
浏览器 内核
IE Trident 火狐 Gecko Safari Webkit 谷歌 Blink Opera Blink
- web标准：有W3C组织和其他标准化组织制定的一系列标准集合。
- web标准的构成：结构（对网页元素整理分类，HTML）、表现（设置网页元素外，CSS）、行为（指网页模型的定义和交互的编写，JavaScript）
- HTML语法规范：
- 所有的标签都在<>里。例如：<html>
- HTML标签通常成对出现。例如：<html> </html>
- 有些特殊标签必须是单个标签。例如：<br />
- 标签关系：包含和并列
- 基本结构标签：
- 网页开发工具：Dreamweaver、Sublime、Webstorm、Hbuilder、VScode
- VScode：文件新建（Ctrl+N）——文件保存（Crl+S）——生成html骨架（!）——编写保存——预览（右键 open in default browser）
- <!DOCTYPE html>：文档类型声明标签，告诉浏览器当前使用html5版本来显示网页。
- <!DOCTYPE>声明在文档最前面，在<html>标签之前。
- <!DOCTYPE>不是HTML标签，它就是文档类型声明标签。
- <html lang="zh-CN">：用来定义当前文档显示的语言。
- en定义显示的为英语，zh-CN显示是中文网页。
- 字符集（Character set）是多个字符的集合。以便计算机能识别和存储各种文字。
- <meta charset="UTF-8">，UTF-8是万国码
- 标题标签<h1></h1>-------<h6></h6>
- 段落标签 <p></p>
- 换行标签<br />
- 课堂案例：文本格式化标签的运用
- 加粗：<strong></strong> 或者 <b></b>
- 倾斜：<em></em> 或者 <i></i>
- 删除线：<del></del> 或者 <s></s>
- 下划线：<ins></ins> 或者 <u></u>
- 无语义标签：
- <div></div> 分割，分区。自己独占一行，是一个超大的盒子。
- <span></span> 跨度，跨距。一行可以放多个，是一个小盒子。
图像标签和路径（重点）
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本，图像不能显示时的文字说明 |
| title | 文本 | 提示文本，鼠标放在图像上，显示的文字 |
| width | 像素 | 设置图像宽度 |
| height | 像素 | 设置图像高度 |
| border | 像素 | 设置图像边框粗细 |
- <img src="图像URL" /> 图像标签，src是<img>标签的必须属性，它用于指定图像文件的路径和文件名。
- <img src="图像URL 1" alt="我是胖胖" />
- <img src="图像URL" title="我是胖胖"/>
- <img src="图像URL" width="我是胖胖"/>
- <img src="图像URL" height="我是胖胖"/>
- <img src="图像URL" border="我是胖胖"/>
- 图像标签可以有多个属性，必须写在标签名的后面。
- 属性之间不分顺序，属性和属性之间必须以空格分开。
- 属性采取键值对的格式，即key="value"的格式，属性="属性值"。
- 路径铺垫知识
- 目录文件夹和根目录：实际工作，文件不能乱放，需要集中在一个文件夹中管理。
- 目录文件夹：普通文件夹，里面存放了我们做页面需要的相关素材，比如html文件，图片等。
- 根目录：打开目标文件夹的第一层就是根目录。
上面web是目录文件夹，images是根目录。
- VS code打开目录文件夹，或者将目录文件夹直接用鼠标拖进工作区，方便后续管理文件。
- 路径（相对路径和绝对路径）
- 相对路径：以引用文件所在位置为参考，而建立的目录路径。简单说，图片相对于HTML页面的位置。
-
相对路径分类 符号 说明 同一级路径 图像文件位于HTML文件同一级 如 <img src="baidu.gif" /> 下一级路径 / 图像文件位于HTML文件同一级 如 <img src="images/baidu.gif" /> 上一级路径 _/ 图像文件位于HTML文件同一级 如 <img src="../baidu.gif" />
- 绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
- 电脑磁盘绝对路径 ，实际开发不常用
- 网络图片地址
- 超链接标签（重点）
- 链接的语法格式：<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
| 属性 | 作用 |
|---|---|
| href | 用于指定链接目标的URL地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能。 |
| target | 用于指定链接页面的打开方式。其中_self为默认值，_blank为在新窗口中打开方式。 |
- 链接分类
- 外部链接，<a href="http://www.baidu.com">百度</a>（target 打开窗口的方式 默认的值是_self 当前窗口打开页面 _blank 新窗口打开页面）
- 内部链接，<a href="index.html">首页</a>
- 空链接：<a href="#">首页</a>
- 下载链接：href里面地址是一个文件或压缩包，会下载这个文件。
- 网页元素链接：图片文字音频视频
- 锚点链接：点链接可以快速定位到页面的某个位置。
- 在链接文本的href属性中，设置属性值#名字的形式，如<a href="#two">第二章</a>
- 在目标位置标签里添加一个ID属性=刚才的名字，如<h3 id="two">第二章详情</h3>
- HTML的注释标签：<!-- 开头，--> 结束 ，实际开发快捷键 Ctrl＋/ 可快速注释。注释里面的内容是给程序员看的，代码不执行不显示到页面里的。良好的注释可以帮助想起代码怎么用
- 特殊字符 & ；
- 空格，一个 一个空格
- < 小于号
- > 大于号
- &； 和号
- ¥； 人民币
- ©； 版权
- ®； 注册商标
- °； 摄氏度
- ±； 正负号
- ×； 乘号
- ÷；除号
- ²；平方2
- ³；立方3
- 综合案例运用
826
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
