• 欢迎访问极客公园网站,WordPress信息,WordPress教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入极客公园 QQ群
  • Git主题现已支持滚动公告栏功能,兼容其他浏览器,看到的就是咯,在后台最新消息那里用li标签添加即可。
  • 最新版Git主题已支持说说碎语功能,可像添加文章一样直接添加说说,新建说说页面即可,最后重新保存固定连接,演示地址
  • 百度口碑求点赞啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊http://koubei.baidu.com/s/gitcafe.net
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏极客公园吧

HTML常用标签【2019-5-7】

前端学习 laoking 6个月前 (05-07) 469次浏览 已收录 0个评论

1、排版标签

(1)、标题标签 <h1></h1>

  • h 即 head 的简写
  • 有<h1>、<h2>、<h3>、<h4>、<h5>、<h6> 6种,从左到右字号依次变小。
  • 基本格式<h1></h1>
  • 像<h7>这种错误的标签在展示时不起作用

(2)、段落标签<p></p>

  • p 即 paragraph 的简写
  • 基本格式<p>段落内容</p>
  • 段落中的文本内容超出浏览器宽度之后会执行自动换行

(3)、水平线标签<hr />

  • hr 即 horizontal 的缩写
  • 其作用是在页面中插入一条水平线
  • 基本格式<hr />
  • 这是一个自闭合标签。(普通标签成对出现;自闭合标签不需要包裹内容,自己就执行了开始和结束的操作)

(4)、容器标签 <div></div> 和 <span></span>

  • div 即 division 的缩写,分割、区分的意思
  • span 即 span ,跨度、范围的意思
  • 这俩本质上是一个容器,类似于 Android 中的ViewGroup
  • 基本格式<div>这是div标签中的内容</div> <span>这是span标签中的内容</span>

3、标签的属性

  • 基本格式:<标签名 属性1=”属性值1“ 属性2=”属性值2“></标签名>
  • 标签可以拥有多个属性
  • 属性必须写在开始标签中,位于标签名后面
  • 属性之间不区分顺序
  • 标签名与属性、属性与属性之间使用空格隔开
  • 任何属性都有默认值,省略该属性表示使用默认值

4、图像标签 <img />

  • img 即 image 的缩写
  • 基本格式<img src="图片URI/URL" />
  • <img />常用属性如下:

HTML常用标签【2019-5-7】

5、超链接标签

(1)、超链接标签<a></a>

  • anchor 的缩写
  • 基本格式 <a href="跳转目标url" target="目标窗口的弹出方式">超链接文本或图像</a>
    • href 即 HyperText Reference , 指定要跳转的URL地址
    • target , 指定目标窗口的打开方式。取值为 self / blank , self 为默认值,blank 表示新窗口打开

注意:

  • 外链需要添加 http:// 或 https:// 前缀
  • 内部链接 直接链接内部页面名称即可,如 <a href="index.html">首页</a>
  • 如果当时没有确定链接目标时,可以为 href 赋值 为 “#” ,即 href="#",表示一个空连接
  • 各种网页元素,如 文本、图像、表格、音频、视频等都可以作为超链接的载体

(2)、锚点

  • 通过创建锚点,可以快速定位到目标内容区域
  • 创建锚点分为两步
    • 为目标内容(即锚点)创建id 并赋值
    • 将超链接文本与锚点的id 关联,<a href="#id名称"> 超链接文本 </a>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="#createAnchor">点击跳转到锚点位置</a>
    <br/>
    通过创建锚点,
    可以快速定位到目标内容区域

    <!--加这一堆br是为了增加页面高度,不然显示不出锚点效果-->
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>

    <h3 id="createAnchor">创建锚点分为两步</h3>
    <hr/>
        为目标内容(即锚点)创建id 并赋值
    <br/>
        将超链接文本与锚点的id 关联,&lt;a href="#id名称"&gt; 超链接文本 &lt;/a&gt;
</body>
</html>

6、<base> 标签

  • <base> 标签可以限定同一页面内所有 超链接 的打开方式。<base target="_blank">
  • 设置 <base> 之后依旧可以为某个单独的超链接设置打开方式。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>base 标签</title>

    <!--指定页面中所有超链接的默认打开方式为 blank -->
    <base target="_blank">
</head>
<body>
    <a href="https://www.jianshu.com/u/414acf7abc2b" >CnPeng简书</a>
    <br/>

    <!--虽然 head 中设置了base,但此处依旧可以单独指定打开方式为 self,实现重载-->
    <a href="https://blog.csdn.net/north1989" target="_self">CnPeng CSDN</a>

    <br/>
    <a href="aTag.html">内部链接--再打开一个aTag.html</a>
    <br/>
    <a href="#">空的超链接</a>

</body>
</html>

7、转义字符

HTML常用标签【2019-5-7】

8、注释标签

  • 格式为 < !-- 注释内容 -- >

9、路径

(1)、相对路径

  • 图像文件和HTML文件位于同一文件夹中,只需要输入图像文件的名称即可,<img src="logo.gif"/>
  • 图像文件位于Html文件的下一级文件夹,输入文件夹名和文件名,二者之间用“/” 隔开,<img src="image/logo.gif"/>
  • 图像文件位于HTML文件的上一级,在文件名之前加 ” ../ “, 上两级则使用 ” ../../ “,依次类推。<img src="../image/logo.gif"/>

(2)、绝对路径

  • 本地绝对路径: D:\web\img\logo.gif
  • 网络绝对路径:https://upload-images.jianshu.io/upload_images/2551993-7b4cba4929e08d7c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700

10、列表标签

(1)、无序列表 <ul>

  • 所谓无序列表就是以小圆点或者小方块作为行首标志的列表
  • 无序列表的各项之间是并列的,没有顺序级别的区分
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无序列表 ul</title>
</head>
<body>
    <ul>
        <li>无序列表1</li>
        <li>无序列表2</li>
        <li>无序列表3</li>
        <li>无序列表4</li>
    </ul>

</body>
</html>

注意:

  • <ul></ul> 之间只能嵌套 <li></li>,不允许嵌套其他标签
  • <li></li> 之间相当于一个容器,可以嵌套任意标签

(2)、有序列表 <ol></ol>

  • 内部也是嵌套<li></li>
  • 默认以 1、2、3…作为行首排序标志
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>有序列表ol</title>
</head>
<body>
    <ol >
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
        <li>有序列表4</li>
    </ol>
</body>
</html>

(3)、自定义列表 <dl></dl>

  • <dl></dl>为外层标签、<dt></dt>为内层标签、<dt> 下还可以嵌套 <dd></dd>
  • 自定义列表项前不具有任何项目符号,既没有小圆点也没有1234
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义列表</title>
</head>
<body>
    <dl>
        <dt>自定义列表项1</dt>
            <dd>自定义列表项1 的内容解释1</dd>
            <dd>自定义列表项1 的内容解释2</dd>
        <dt>自定义列表项2</dt>
            <dd>自定义列表项2 的内容解释1</dd>
            <dd>自定义列表项2 的内容解释2</dd>
    </dl>
</body>
</html>

极客公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:HTML常用标签【2019-5-7】
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址