1、前期准备
1、语法规范
- 1、所有的标签都必须包含在开始标签 结束标签，里面都是成对出现的，但是有些标签是单标签，
，但是单标签非常的少
- 2、标签关系
- 包含关系
- 就是嵌套的关系(父子关系),html包含了head这个标签
- 并列关系
- 3、结构标签
- html标签是根标签
- head是头部标签，在head里面必须要设置就是title
- title就是网页标题，非常的重要
- body存放网页的所有内容
2、vscode插件
- auto rename tag自动修改标签
- Live server实时更新的
- 格式化代码2个√打开
- easy less编译less文件，html不能直接引用less，会将其自动编译成css文件来使用
3、快捷键
- 快速复制 shift+alt+下箭头
- 修改相同的标签，双击选中，ctrl+d
- 快速编辑,ctrl+alt+上下箭头
- 快速跳到某一行 ctrl+g
- 选择某一个区域块，shift+alt
4、标签的学习
- 理解标签是干什么的，标签的含义
- 在合适的地方给一个合理的标签，就可以使页面更加的清晰
2、body标签的相关的内容
1、标题标签
- head的缩写，在body里面写，标题的标签会变粗，独占一行
- 一共有6级标签，在标签里面填写内容
- <h1>我是一级标签</h1>
- <h2>我是二级标签</h2>
- <h3>我是三级标签</h3>
- <h4>我是四级标签</h4>
- 效果依次递减，字体的大小依次递减
- p标签用于定义段落，分段就是用,就分成了上下2段
- 段落和段落之间有较大的空隙
3、换行标签
- br />,遇到这个标签文本强制换行,在段落里面使用的话，就可以再起一行
- 是单标签，另起一行
- 换行与换行之间有较小的空隙
4、文本格式化标签
- 突出文字的重要性，粗体，斜体，下划线等效果
- 更加吸引
- 将文字放入到标签里面就能显示效果
- <strong></strong> 或者<b></b> 加粗
- <em></em> 或者 <i></i> 倾斜
- <del></del> 或者 <s></s> 删除线
- <ins><ins> 或者 <u></u>下划线
- div和span是没有语义的，用来存放内容的，图片，就是一个盒子，分割，分区
- 一行只能放一个div，是一个大的盒子，后面不能有其他的内容在这个一行里面显示
- span是跨度的，跨距的，横着显示，可以在一行里面显示多个span
6、图像标签和路径
- img标签来定义html页面的图像
- 是一个单的标签，img src="图像url" ,src是必须的属性，指定文件的路径和文件名，属性就是属于这个标签的特性
- 图片的存放的位置，需要在网页文件同一个文件夹里面才行
- 还有其他的属性
- alt 文本，替换的文本，图像不能显示的时候，用文本来替换
- title 提示文本，鼠标放在图像上面，提示文字
- width，设置图像的宽度，像素
- height 设置图像的高度。像素,一般的话，只修改一个属性即可
- border属性，给图像设置边框,15像素的边框，css后面还可以修改颜色
- 属性与属性之间没有顺序,使用空格来进行分割
- 键值对的格式,一个键，一个值
- 路径的理解
- 就是将一些的素材放在文件夹里面，然后网页文件来进行编写
- 绝对路径，就是完整的路径，电脑的位置
- 相对路径，就是不完整的路径，就是位于html不同位置来定义的
- 同一级路径，直接写上图像名就可以了
- 上一层路径的话，../上一级的目录/图像名
- 下一层路径的话，下一级的目录/图像名
7、超链接
- 格式
- 文本或图像
- href=链接目标的url地址
- target= 指定链接页面打开的方式，_self为默认值,当前的页面打开，_blank为在新的窗口中打卡的方式
内部链接，网站内部之间的链接，不需要http,内部之间的跳动
空链接 a href ="#"> 公司地址
下载链接，如果里面的地址是文件或者压缩包 .exe 或者.zip格式的
文字，视频，图片等都可以做成一个超链接，打开一个图片跳转到百度上面去
锚点链接，就是点击这个链接，直接就跳到当前的这个页面，，快速定位到页面中的某个位置,格式为 a href= "#名字" > 第二集 然后网页内容的话，就是 |
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
