html基础(常用标签)

176 阅读2分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第3天,点击查看活动详情

基本结构标签

<html>
    <head>
        <title></title>
    </head>
    <body>
        内容部分
    </body>
</html>

基本框架为根标签、头部、标题、主体

此框架为html基本框架,html中大部分都是双标签,单标签只有个别。

常用标签

标题标签
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
     ·····
<h6>六级标签</h6>

标题标签共有六种

加标题文字加粗

字号变大

逐渐递减

一个标题独占一行

段落和换行标签
<p></p>
<br_/>

文本在一个段落中根据窗口的大小自动换行

段落与段落之间保有空隙

换行标签<br_/>为单标签,在要换行的文字后添加进行换行

文本格式化标签
<strong></strong><b></b>   加粗
<em></em><i></i>           倾斜
<del></del><s></s>         删除
<ins></ins><u></u>         下划线

前者预语气强于后者,从上到下依次为加粗、倾斜、删除、下划线

div和span标签
<div></div>
<span></span>

div标签一次只能放一个,大盒子,独占一行

span标签一行可以放多个,小盒子

图像标签
<img src="图像文件的路径和文件名"/>    基本框架

图像标签是单标签

src是的必须属性,指定图像文件的路径和文件名

除了src外,图像标签还有其他种类,分别为

alt 替换文本,图像不能显示的文字

title 提示文本,鼠标放上现实的文字

width 设置宽度,设置宽度后,长度会按照等比例变化

height 设置高度

border 设置边框粗细

属性放在标签内

路径

1、相对路径

(1)同一级,直接写文件名

(2)下一级,文件夹名/文件名,例如

(3)上一级,

2、绝对路径

(1)网页图片地址

(2)图片在带电脑的位置

超链接标签

从一个网页链接到另一个页面

1、语法格式

<a href="跳转目标"  target="弹出方式">文本、图像</a>  
属性:

href:(必须属性)用于指定链接目标的url地址

target: self 默认值 ,blank 在新窗口打开

链接分类

1、外部链接

<a href="http://www.baidu.com">百度</a>

2、外部链接

<a href="index.html">首页</a>

3、空链接

<a href="#">首页</a>

4、下载链接

href中加入一个文件的安装包或者压缩包

5、网页元素链接

可在文本,图像,表格,视频等加入超链接

6、锚点链接

<a href="#two">第二集</a>
<h3 id="two">第二集介绍</h3>

由第二集跳转至第二集介绍

注释
<!--注释语句-->
注释语句

快捷键:ctrl+/

特殊字符

" " 空格符 &nbsp

"<" 小于号 &lt

">" 大于号 &gt