Html基础标签

Html基础标签

从今天开始决定系统地重新学习一下前端开发知识,此博客用来记录我的前端开发学习之路

html标签分类

  • 双标签:成对出现,结束标签使用关闭符“/”,这类标签中间需要内容,表现形式为<标签名>比如
  • 单标签:不需要包含内容,表现形式为<标签名 />,如

标签关系

父子关系

即包含关系,子标签写在父标签的内部,使用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标签是一个单标签。

标签属性
属性 属性值 描述
scr url 图像的路径
alt 文本 当图片不能显示时的替换文本
title 文本 当鼠标放在上面的时候显示的文本
width 像素px 图片的宽度
height 像素px 图片的高度

一般高度和宽度只设置一下,图片会等比例缩放。
采用键值对形式,key=“value”。

链接标签

标签属性

属性 描述
href 链接的地址
target 打开的方式,值_self为默认,替换打开,值_blank在新窗口打开。

当链接没写好时,可以使用“#”代替。
文本或图片

路径

相对路径

名称 符号
同一级
上一级 ../
下一级 /

相对路径是只相对于现在的代码文件找目标文件,这里所说的上一级、下一级其实是图片相对代码文件的位置。

绝对路径

  • 在电脑中的绝对路径,这里使用反斜杠\,不提倡使用。
  • 网络中的绝对地址。

锚点定位

<标签名 id="自定义id">定位的位置用id标记。
被链接的文本或图片

base标签

设置所有链接打开方式,标签写在之间。
或者

特殊符号

名称 符号
空格  
大于号> >
小于号< <

你可能感兴趣的:(html)