Html基础标签
从今天开始决定系统地重新学习一下前端开发知识，此博客用来记录我的前端开发学习之路
html标签分类
- 双标签：成对出现，结束标签使用关闭符“/”，这类标签中间需要内容，表现形式为
<标签名></标签名>比如<html></html>。 - 单标签：不需要包含内容，表现形式为
<标签名 />，如<br />。
标签关系
父子关系
即包含关系，子标签写在父标签的内部，使用TAB键让格式看起来更清晰。
<head>
<title></title>
</head>兄弟关系
并列关系。标签需对齐。
<head>
</head>
<boby>
</boby>html常用排版标签
（1）标题标签
用于改变标题字体的大小。
<h1>标题文本</h1>
<h2>标题文本</h2>
<h3>标题文本</h3>
<h4>标题文本</h4>效果如下：
标题文本
标题文本
标题文本
标题文本
（2）段落标签
单词paragraph的缩写，用来分段使用。
<p>这是一个段落标签</p>（3）换行标签
单词break的缩写。
</br>（4）div和span标签
盒子标签，div是block属性，span是inline属性。
<div>这是一个div盒子</div><div>这是一个div盒子</div>
<span>这是一个span盒子</span><span>这是一个span盒子</span>效果图如下：
这是一个div盒子
这是一个div盒子
这是一个span盒子
这是一个span盒子
常用文本格式化标签
（1）字体加粗标签
<b>这是一个字体加粗标签</b>
<strong>这是一个字体加粗标签</strong>效果如下：
这是一个字体加粗标签
这是一个字体加粗标签
strong标签使用率更高，强调语义。
（2）字体倾斜标签
<em>这是一个倾斜加粗标签</em>
<i>这是一个倾斜加粗标签</i>效果如下：
这是一个倾斜加粗标签
这是一个倾斜加粗标签
em标签使用率更高。
（3）字体删除线标签
<s>这是一个字体删除线标签<s>
<del>这是一个字体删除线标签<del>效果如下：
这是一个字体删除线标签
这是一个字体删除线标签
del标签使用率更高。
（3）下划线标签
<u>这是一个下划线标签<u>
<ins>这是一个下划线标签<ins>效果如下：
这是一个下划线标签
这是一个下划线标签
ins标签使用率更高。
图像标签
img标签是一个单标签。
</img>标签属性
| 属性 | 属性值 | 描述 |
|---|---|---|
| scr | url | 图像的路径 |
| alt | 文本 | 当图片不能显示时的替换文本 |
| title | 文本 | 当鼠标放在上面的时候显示的文本 |
| width | 像素px | 图片的宽度 |
| height | 像素px | 图片的高度 |
一般高度和宽度只设置一下，图片会等比例缩放。
采用键值对形式，key=“value”。
链接标签
<a></a>标签属性
| 属性 | 描述 |
|---|---|
| href | 链接的地址 |
| target | 打开的方式，值_self为默认，替换打开，值_blank在新窗口打开。 |
当链接没写好时，可以使用“#”代替。
<a href="跳转的链接" target=“打开方式”>文本或图片</a>
路径
相对路径
| 名称 | 符号 |
|---|---|
| 同一级 | |
| 上一级 | ../ |
| 下一级 | / |
相对路径是只相对于现在的代码文件找目标文件，这里所说的上一级、下一级其实是图片相对代码文件的位置。
绝对路径
- 在电脑中的绝对路径，这里使用反斜杠
\，不提倡使用。 - 网络中的绝对地址。
锚点定位
<标签名 id="自定义id"></标签名>定位的位置用id标记。
<a href="#id">被链接的文本或图片</a>
base标签
设置所有链接打开方式，标签写在<head></head>之间。
<base target="_blank">或者<base target="_self">。
特殊符号
| 名称 | 符号 |
|---|---|
| 空格 | |
| 大于号> | > |
| 小于号< | < |
扫一扫
1182
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
