小公司使用的网站开发蜂鸟摄影网
HTML详解连载（1）
- HTML
- 定义
- HTML 超文本标记语言
- 标签语法
- 注意
- 拓展
- HTML基本骨架
- 解释
- VS Code 快速生成骨架：
- 标签的关系
- 父子关系（嵌套关系）
- 兄弟关系（并列关系）
- 代码格式
- 注释
- 标题标签
- 标签名:h1-h6(双标签)
- 经验：
- 段落标签
- 标签名：p(双标签)
- 显示特点：独占一行、段落之间存在间隙
- 换行和水平线标签
- 文本格式化标签
- 作用：
- 图像标签-基本使用
- 强调
- 图像标签-属性
- 属性名=“属性值”
- 路径
- 路径分类：
- 相对路径
- 强调
- 绝对路径
- 注释
HTML
定义
Hyper TextMarkup Language。
HTML 超文本标记语言
超文本是链接
标记也叫标签，带尖括号的文本
标签语法
<strong> 需要加粗的文字 </strong>
<strong>--开始标签
</strong>--结束标签
注意
标签成对出现，中间包裹内容
<>里面放英文字母(标签名)
结束标签比开始标签多/
拓展
双标签：成对出现的标签
单标签：只有开始标签，没有结束标签
<br>:换行
<hr>:水平线
HTML基本骨架
<html><head><title>网页标题</title> </head><body>网页主体内容</body></html>
解释
html:整个网页
head:网页头部，用来存放给浏览器看的信息，例如CSS
title:网页标题
body:网页主体，用来存放给用户看的信息，例如图片，文字
VS Code 快速生成骨架：
在HTML文件(.html)中，!(英文)配合Enter/Tab
标签的关系
作用：明确标签的书写位置，让代码格式更整齐
父子关系（嵌套关系）
<html><head></head></html>
兄弟关系（并列关系）
<head></head>
<body></body>
代码格式
父子关系：子集标签换行且缩进
兄弟关系：兄弟标签换行要对齐
注释
注释中...是注释内容快捷键: Ctrl + /
标题标签
一般用在新闻标题、文章标题、网页区域名称、产品名称等等。
标签名:h1-h6(双标签)
显示特点：文字加粗、字号逐渐减小、独占一行（换行）
经验：
h1标签再一个网页中只能用一次，用来放新闻标题或者网页的logo
h2-h6没有使用的限制
段落标签
一般用在新闻段落，文章段落，产品描述信息等。
标签名：p(双标签)
显示特点：独占一行、段落之间存在间隙
换行和水平线标签
换行<br>(单标签)水平线<hr>(单标签)
文本格式化标签
作用：
为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删 除线等
效果 标签名1 标签名2加粗 strong b倾斜 em i下划线 ins u删除线 del s
strong em ins del标签自带强调含义（语义）。
图像标签-基本使用
作用：在网页中插入图片
<img src=”图片的URL”>
强调
src用于指定图像的位置和名称，是的必须属性。
图像标签-属性
| 属性 | 作用 | 说明 |
|---|---|---|
| alt | 替换文本 | 图片无法显示的时候显示文字，可以不影响图片浏览 |
| title | 提示文本 | 鼠标悬停再图片上的时候显示的文字 |
| width | 图片的宽度 | 值为数字，没有单位 默认等比缩放 |
| height | 图片的高度 | 值为数字，没有单位 |
属性名=“属性值”
属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序
路径
路径值得是查找文件是，从起点到终点经历的路线。
路径分类：
相对路径
从当前文件位置出发查找目标文件
强调
/表示进入莫格文件夹里面
.表示当前文件所在文件夹
…表示当前文件的上一个文件夹
绝对路径
从盘符出发查找目标文件
Windows默认是\，其他系统是/
注释
自己通过黑马课程并通过自己整合其他资料总结的笔记，希望能帮助大家。