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默认是\,其他系统是/
注释
自己通过黑马课程并通过自己整合其他资料总结的笔记,希望能帮助大家。