HTML笔记----3

芝奥小婷

已于 2024-08-25 21:22:38 修改

阅读量264

点赞数 5

文章标签：笔记 html

于 2024-07-20 09:19:13 首次发布

本文链接：https://blog.csdn.net/weixin_70903041/article/details/140560345

版权

HTML基本标签

标题标签

1.<h1>-<h6>定义标题标签；

2.标题标签属于块元素，即浏览器会自动在标题的前后添加空行；

3.<h1>定义最大的标题，<h6>定义最小的标题，逐级递减；

 <!-- 标题标签，用于设置一级到六级的标题 -->
<body>

   <h1>标题 1</h1>
   <h2>标题 2</h2>
   <h3>标题 3</h3>
   <h4>标题 4</h4>
   <h5>标题 5</h5>
   <h6>标题 6</h6>

</body>

段落标签

1.<p></p>标签定义段落；

2.用于将一段文字包裹起来，可以设置其他各种样式，

3.属于块级元素，是双标记标签

<body>
    <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p>
</body>

换行标签

<br>标签用来在不产生新段落的情况下实现换行，多用于写地址或诗歌。是一个自结束标签

<body>
    <h1>红豆<h1/>

    <p>
        红豆生南国，<br>
        春来发几支。<br>
        愿君多采撷，<br>
        此物最相思。<br>
    </p>
</body>

水平线标签

<hr>标签用于在HTML页面中创建水平线，用于分割内容。是一个自结束标签，也属于块级元素

<body>
	<p> 水平线：</p>
	<hr />
	<p>段落1</p>
	<hr />
	<p>段落2</p>
	<hr />
	<p>段落3</p>
</body>

图像标签

<img/>标签可以用来在网页中插入图片，实际上是将图片的链接插入到了网页中，也是一个自结束标签，该标签常用的属性有以下几条：

属性	作用
src	引用图片的路径
alt	如果因为某种原因导致图片看不到，用文本替代该指定图片。
width	图片的宽
height	图片的高

<body>
   <h2>引用网络上的一张图片</h2>

   <img src="https://img.tukuppt.com/ad_preview/00/04/15/5c98b99bce3ad.jpg" alt="黑板报" width="500px">

   <h2>引入本地上的一张图片</h2>
<!-- 路径有两种写法：相对路径和绝对路径
 相对路径： 相对的是当前文件所在的文件夹。 当前文件夹，当前文件夹的表达方式 ./（可以省略）
 绝对路径：一般指的就是项目的根或者是磁盘的盘符开始写。
 -->
   
   相对路径写法：<img src="./images/易烊千玺.jpg" alt="yyqx">

   绝对路径写法：<img src="D:\A实训资料\01-HTML&CSS\code\images\合照.jpg" alt="合照">
</body>

超链接标签

<a>标签是一个超链接标签，是一个双标记标签，内容体可以是文本也可以是图片，它的属性如下：

属性	描述
href	必需，目标链接的URL
rel	可选，规定当前文档和被链接文档的关系
title	可选，鼠标在超链接上显示的内容
target	可选，决定链接在浏览器中怎么打开 _blank：在新的标签页打开该链接； _self：在当前标签页打开链接

<h1>文字链接</h1>
    <a href="https://www.taobao.com">点我进入淘宝网站</a>
<h1>图片链接</h1>
    <a href="https://www.weibo.com/tfent?from=myfollow_group&is_all=1" title="TFBOYS组合的微博" target="_blank">
        <img src="./images/合照.jpg" alt="组合" width="300">
</a>
<h1>锚点链接：跳转到本页面的某一个位置</h1>
 <!-- 
    href的值，必须是#开头，  如果只有#表示跳转到当前页面的最顶端
                如果是#配合id值，则是跳转到id值所在位置
    -->
<a href="#c4">点我跳转到章节4</a>


    <h1> 章节1</h1>
    <p> 段落的内容</p>

    <h1> 章节2</h1>
    <p> 段落的内容</p>

    <h1> 章节3</h1>
    <p> 段落的内容</p>
        
    <h1 id="c4"> 章节4</h1>
    <p> 段落的内容</p>
        
    <h1> 章节5</h1>
    <p> 段落的内容</p>
        
    <a href="#">回到最顶端</a>

按钮标签

<button>标签是按钮标签，在该元素内部，可以放置文本或图像，是双标记标签。建议：添加type属性，指定属性值为button

<body>

  <button type="button" onclick="alert('橙海不会暗')">
        <img src="./images/合照.jpg" alt="合照">
    </button>

</body>

芝奥小婷

关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
HTML笔记----3

1.-定义标题标签；2.标题标签属于块元素，即浏览器会自动在标题的前后添加空行；3.定义最大的标题，定义最小的标题，逐级递减；
复制链接

扫一扫