HTML5基础（一）个人笔记

最新推荐文章于 2024-11-17 21:28:21 发布

jredu1996

最新推荐文章于 2024-11-17 21:28:21 发布

阅读量381

点赞数 2

分类专栏： html5 新手文章标签： html5 新手

本文链接：https://blog.csdn.net/jredu1996/article/details/76064733

版权

新手同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

html5

13 篇文章 0 订阅

订阅专栏

HTML5常见标签

常用基本标签

html:标记文档的开始和结束。
title:标题设置。
head:html的头部代码。
body:html的核心代码。
meta:元数据标签。
img:图片的引入。
link:引用图标（icon）或者css(stylesheet)文件。

块级标签

独占一行，不允许其他元素和自己同行显示
1.标题标签 h1 h2 h3 h4 h5
2.分割线标签 hr
3.段落标签 p
4.换行标签 br
5.引用标签 blockquote
6.预格标签 pre
7.无序列表标签 ul
8.有序别表标签 ol
9.分区标签 div
具体用法如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块级标签</title>
</head>
<body>
<!--标题标签-->
<h1>杰瑞教育</h1>
<h2>杰瑞教育</h2>
<hr>
<h3>杰瑞教育</h3>
<h4>杰瑞教育</h4>
<h5>杰瑞教育</h5>
<h6>杰瑞教育</h6>
<!--段落标签-->
<!--1：在段落开始位置添加空格，不影响布局-->
<!--2：在段落的中间位置使用回车换行或者添加多个空格，默认显示为一个空格-->
<p>
    杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育
</p>

<!--换行标签-->
<p>
    杰瑞教育<br>
    杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育
</p>

<!--分割线标签-->
<hr>

<!--引用标签(有缩进两个空格效果)-->
<blockquote cite="www.baidu.com">
    谦虚使人进步！！--毛泽东
</blockquote>

<!--预格式标签 默认字体小-->

<pre>
    山东科技大学
        计算机学院
            计算机科学与技术</pre>
</body>
</html>

这里写图片描述

行级标签

不自己独占一行，按行显示
span：文本格式
img ：图片格式
a ：超链接
具体用法如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行级元素</title>
</head>
<body>
<!--span标签没有任何格式-->
<p>电脑，<span style="font-size: 40px;color: red">0</span>元起！！</p>
<!--src：指定图片路径，alt:当图片加载失败，显示提示信息-->
<img src="" alt=""width="200px"height="100px">
<!--a:1：页面跳转 href="地址"
      2：锚点连接
      3：功能链接--><!--target可以在新的页面打开(默认-self 空白页-blank)-->
<br>
<a href="https://www.baidu.com/"target="_blank">百度</a>
<a href="demo04.html">demo04</a>



</body>
</html>