html的基础标签

最新推荐文章于 2024-09-27 20:28:31 发布

困了吃慕斯

最新推荐文章于 2024-09-27 20:28:31 发布

阅读量34

点赞数

分类专栏：前端的薄弱基础文章标签： html5

本文链接：https://blog.csdn.net/zwb0303/article/details/132025335

版权

前端的薄弱基础专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了HTML的基本结构，包括<!DOCTYPEhtml>，html，head和body标签。详细讲解了标题、图片（img标签）、链接（a标签）、滚动字幕（marquee标签）、div标签以及块级、行级和行内块级标签的使用方法。

摘要由CSDN通过智能技术生成

html的基本格式

<!DOCTYPE html>
<html><!--结构最外层-->
<head><!--结构头部-->
<!--存放编码方式，标题，logo等-->
<!--编码方式一般是utf-8-->
<meta charset="UTF-8">
</head>
<body><!--结构身体部-->
<!--网页内容的代码书写位置-->
</body>
</html>

基础标签

head中


标题	title
logo	link

body中


加粗	b；strong
倾斜	i；em
标题	h1~h6
段落	p
换行	br
分隔线	hr
上标	sup
下标	sub
删除线	del
下划线	ins
高亮	mark
缩写	addr
文本	span
音频	audio
视频	video

图片标签

img
< img src=“” alt=“” width=“” height=“”>
scr：图片的路径位置
alt：图片加载不出来或者没有该图片时显示其中的内容
width：宽
height：高

<img src="../img/1.png" width="400px" width="200px" height="200px" alt="图片正在加载中">

链接

a
< a href=“” target=“”>< /a>
target：_new,_blank 新页面打开；_self(默认) 当前页面打开
href：网址链接

<a href="https://www.baidu.com/" target="_blank">百度一下</a><br>

提示框
< a href=“”>< /a>
href中写一个js的代码做一个提示框

<a href="javascript:alert('这是一个提示框')">提示框</a>

锚点
< a id=“”>< /a>
< a href=“#”>< /a>
id起一个名字作为后面返回的位置
href引用之前起的id返回到引用id的位置

<a id="top">顶部</a>
<a href="#top">返回顶部</a>

滚动字幕

滚动字幕；
< marquee behavior=“” direction=“” οnmοusemοve=“” οnmοuseοut=“” scrollamount=“” scrolldelay=“”></ marquee>
behavior:滚动方式；scroll：连续滚动；slide：滚动一次；alternate：来回滚动
direction：滚动方向 left：左；right：右，上下滚动需要添加：line-height
οnmοusemοve=“stop()” 鼠标放上去字幕停止；
οnmοuseοut=“start() 鼠标离开继续运行；鼠标两个是一起使用
scrollamount=”“速度，默认6，scrolldelay=”"时间，默认0单位毫秒；速度与时间一起使用

<marquee behavior="" direction="left" onmousemove="stop()" onmouseout="start()" scrollamount="20px" scrolldelay="10">xiaozhao</marquee>

div标签

div：定义 HTML 文档中的一个分隔区块或者一个区域部分。

<div style="height: 200px;width: 200px; background-color: blue;" ></div>

标签的区别

块级标签
- 会自动换行，可以设置宽高
- display:inline;
- 有p,div,h1~h6
行级标签
- 不会自动换行，不能设置宽高，它的宽高是自身大小
- display:block;
- 有span,b,i,mark…
行内块标签
- 不会自动换行，能设置宽高
- display:inline-block
- 有img,video,audio…

使用标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="../img/1.ico">
    <!--标题-->
    <title>demo01</title>
</head>
<body>
    <!--一个叫top的锚点-->
    <a id="top"></a>
    <!--加粗-->
    <b>小赵</b>
    <!--水平线  属性：color：颜色；size：大小；width：宽度；align：left左，right右；-->
    <hr color="red" size="100px" width="100px" >
    <!--滚动字幕； οnmοusemοve="stop()" 鼠标放上去字幕停止； οnmοuseοut="start() 鼠标离开继续运行；scrollamount="20px"速度，鼠标两个是一起使用，scrolldelay="10"时间，速度与时间一起使用-->
    <marquee behavior="" direction="left" onmousemove="stop()" onmouseout="start()" scrollamount="20px" scrolldelay="10">xiaozhao</marquee>
    <!--倾斜-->
    <i>倾斜</i>
    <!--一级到六级标题-->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题最高一级最低六级从大到小1~6</h6>
    <!--段落p；br换行-->
    <p>段落</p>
    <!--sub下标，sup上标-->
    2<sup>x</sup>+1 <sub>n</sub><br>
    <!--del删除线，mark高亮只有黄色的-->
    <del><mark>xiaozhao</mark></del><br>
    <!--下划线-->
    <ins>xiaozhao</ins><br>
    <!--缩写-->
    <addr title="这是我的缩写">bobo</addr><br>
    <!--文本-->
    <span>哦net我three</span><br>
    <!--图片 src：图片的路径，width：宽，height：高，alt：图片加载不出来显示其中的东西-->
    <img src="../img/1.png" width="400px" height="200px" alt="图片正在加载中"><br>
    <!--链接-->
    <a href="https://www.baidu.com/" target="_blank">百度一下</a><br>
    <!--提示框-->
    <a href="javascript:alert('这是一个提示框')">提示框</a><br>
    <!--使用html做链接-->
    <a href="deme02.html" display="inline">另一个网站</a><br>
    <!--一个返回top的锚点-->
    <a href="#top">返回顶部</a><br>
    <!--音频-->
    <audio src="../img/寻水的鱼 许飞.mp3" controls></audio>
    <!--视频-->
    <video src="../img/薛之谦 - 彩券.mp4" controls></video>
    <!--div-->
    <div style="height: 200px;width: 200px; background-color: blue;" ></div>
</body>
</html>