程序员编写网页的工具——网页编辑器
记事本 notepad++ editplus Dreamweaver Eclipse MyEclipse IDEA
HBuilder VScode
以 .html 或者 .htm为后缀的
由浏览器解析执行(默认代码从上往下，同一行从左往右按顺序执行)
页面中可以嵌套JS脚本
写在html文件中的第1行
告诉浏览器，当前html是使用h5的语法编写的，请用h5的规范解析
不被浏览器解析运行的文本，增强代码的可读性，解释代码
格式
1）注释内部不能嵌套注释
2）在<>内部不能有注释
<hr> 或者 <hr/> 单标记标签
在页面上添加一条独占一行的分割线，即使后面有文本也会出现在下一行
属性：
align=“” 水平对齐的方式
color=“” 颜色
size=“” 分割线的粗细
width=“” 分割线的宽度
属性和值
属性：也称为特征，描述标签某一方面的特点
html定义了很多的属性和值，用来修改元素的样式和状态
写法:
<开始标签 属性名1=“属性值1” 属性名2=“属性值2”>
1）属性的声明必须在开始标记里
2）一个元素可能不只有一个属性，多个属性之间使用空格隔开
3）多个属性之间不区分先后顺序
4) 属性名与属性值之间使用等号连接
5）属性值要包裹在引号中
html通用属性:
title=“” 鼠标悬停在页面上显示的文本
id=“” 页面中元素的唯一标识符，在同一个页面中id值不能重复
class = “” CSS中引入类选择器
style =“” CSS中定义行内样式
8. 分区元素
分区元素用于为元素分组，常用于页面布局
1）块分区
div
独占一行，专门用于页面布局，是最简单的块级元素
2）行分区
span
处理同一行文本有不同样式的时候，不换行，是最简单的行内元素
1.图片
单标记标签
属性:
src=“图片资源的路径/url”
width=“图片的宽度 单位(% 或 px)”
height=“图片的高度 单位(% 或 px)”
alt = “资源加载失败时显示的替换文字”
使用图片的时候要注意图片本身的尺寸
如果设置的宽高不符合图片本身的宽高比，图片会变形——图片的失真
解决方案:宽或者高只写一个，另外一个自动适应
2. URL
uniform Resource Locator 统一资源定位符，俗称路径，用来标识网络中的任何资源
1）绝对路径
是一个完整的路径，要使用网络资源的时候，用绝对路径
https://cdn.tmooc.cn/bsfile//courseImg///5f791c0985cc4a67a5c4dca6627155b0.jpg
从最高级目录下开始的完整路径，无论当前路径是什么，使用绝对路径总能找到要连接的文件
优点：节省本服务器的本地存储空间
缺点: 资源不稳定，如果远程服务器删除资源，本地服务器就引用不到了
2) 相对路径 – 参照物其实就是当前的html
兄弟资源，直接写资源名称
兄弟资源的儿子，先找兄弟，使用/儿子
兄弟资源的儿子的儿子，先找兄弟，使用/儿子/儿子
父亲的兄弟，使用…/先找到父亲，直接写父亲兄弟的名称
3. 超链接
<a href=""></a>
属性：
href = “要跳转的页面路径”
target=“”
_self 默认值，在本页面打开新链接
_blank 在新的选项卡页面打开链接
超链接的其它表现形式：
<a href="javascript:fn()">调用JS脚本</a>
<script>
function fn(){
alert(666)
}
</script>
锚点
在页面上定义一个位置，叫做锚点
使用a标签，跳转到锚点，页面会直接在这个位置显示
定义锚点的方式:
H5定义锚点，使用元素的id值直接当做锚点名称，如
<h3 id="c3">第三章 龙宫借宝</h3>
跳转锚点的方式:
<a href="#锚点名称"></a>，如：<a href="#c3">快速跳转到第三章</a>
跳转到页面顶部:
<a href="#">快速跳转到页面顶部</a>
8 拓展