html基础篇 01 基础标签

最新推荐文章于 2023-03-06 21:30:00 发布

LeyoBiang

最新推荐文章于 2023-03-06 21:30:00 发布

阅读量68

点赞数

分类专栏：前端文章标签： html html5 web

本文链接：https://blog.csdn.net/qilie_32/article/details/109910827

版权

前端专栏收录该内容

32 篇文章 0 订阅

订阅专栏

html基础篇 01 基础标签

<!DOCTYPE html>
<!-- "DOCTYPE" 文档类型声明标签 (告诉浏览器这个页面采取html5版本来显示页面)-->
<html lang="zh_CN">
<!-- "lang" 语言种类-->
<head>
    <meta charset="UTF-8">
    <!-- "charset" 字符集 默认UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题</title>
</head>
<body>
    <!-- 标题标签 <h1> - <h6>（重要） -->
    <h1>标题标签(h1)</h1>
    <h2 id="h2title">标题标签(h2)</h2>
    <h3>标题标签(h3)</h3>
    <h4>标题标签(h4)</h4>
    <h5>标题标签(h5)</h5>
    <h6>标题标签(h6)</h6>
    <br/><br/>
    <!-- 段落标签<p> -->
    <p>段落标签(p)</p>
    <p>段落标签(p)</p>
    <p>段落标签(p)</p>
    <p>段落标签(p)</p>
    <br/><br/>
    <!-- 换行标签(单)<br/> -->
    换行标签(br)<br/>
    换行标签(br)<br/>
    换行标签(br)<br/>
    换行标签(br)<br/>
    <br/><br/>
    <!-- 文本格式化标签<strong><b>、<em><i>、<del><s>、<ins><u> -->\
    <strong>加粗(推荐strong)</strong><b>加粗(b)</b><br/>
    <em>倾斜(推荐em)</em><i>倾斜(i)</i><br/>
    <del>删除线(推荐del)</del><s>删除线(s)</s><br/>
    <ins>下划线(推荐ins)</ins><u>下划线(u)</u><br/>
    <br/><br/>
    <!-- 
        div和span标签 <div><span>
        (没有语义)
    1. <div> 标签用来布局，但是现在一行只能放一个(独占一行)<div>。 大盒子
    2. <span> 标签用来布局，一行上可以多个 <span>。小盒子
        -->
    <div>div标签(div)</div>123
    <div>div标签(div)</div>123
    <span>span标签(span)</span>123
    <span>span标签(span)</span>123
    <br/><br/>
    <!--
        图片标签<img> 
    属性：
        src (必须属性) 图片路径
        alt 替换文本：当图片不能显示时的文字
        title 提示文本：鼠标放在图像上,显示的文字
        width 图像的宽度
        height 图像的高度
        border 图像的边框粗细    
    -->
    <img src="./images/原神图标.jpg" /><br/>
    <img src="啥也没有" alt="很遗憾没加载出来"/><br/>
    <img src="./images/原神图标.jpg" title="原神"/><br/>
    <img src="./images/原神图标.jpg" width="111" height="66"/><br/>
    <img src="./images/原神图标.jpg" border="12"/><br/>
    
    <!-- 
        相对路径  
        同一级路径 (./) 
        下一级路径 (/) 
        上一级路径 (../)
    -->
    <img src="./images/原神图标.jpg" /><br/>
    <img src="../01 格式/images/原神图标.jpg" /><br/>
    <!--绝对路径-->
    <img src="D:/前端文件/vscodeFile/01 格式/images/原神图标.jpg" /><br/>

    <!-- 
        链接标签<a> 
    1.href：用于指定链接目标的url地址
    2.target:用于指定链接页面的打开方式_self(默认值) _blank新窗口打开
    3.#：空链接     
    -->
    <a href="http:// www.baidu.com "> 百度(a)</a><br/>
    <a href="http:// www.baidu.com " target="_self"> 百度(a)</a><br/>
    <a href="http:// www.baidu.com " target="_blank"> 百度(a)</a><br/>
    <a href="01test.html" target="_blank"> 本页面(a)</a><br/>
    <a href="#" target="_blank"> 空链接 本页面(a)</a><br/>
    <a href="#h2title" > 跳转到h2(a)</a><br/>

    <!--特殊字符-->
    <img src="./images/特殊字符.png" /><br/>
    &nbsp;空格<br/>
    &lt;小于号<br/>
    &gt;大于号<br/>
</body>
</html>

效果在这里插入图片描述

LeyoBiang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html基础篇 01 基础标签

html基础篇 01 基础标签<!DOCTYPE html><html lang="zh_CN"><head> <meta charset="UTF-8">  <meta name="v
复制链接

扫一扫