HTML标签第1天

最新推荐文章于 2022-04-19 09:04:13 发布
最新推荐文章于 2022-04-19 09:04:13 发布
阅读量215 收藏
点赞数
文章标签： html 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31290787/article/details/122417492
版权

HTML标签第1天

标题标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题标签</title>
</head>

<body>
    <h1>h1标签</h1>
    <h1>h1标签</h1>
    <h2>h2标签</h2>
    <h3>h3标签</h3>
    <h4>h4标签</h4>
    <h5>h5标签</h5>
    <h6>h6标签</h6>
    <!-- h标签嵌套h标签 -->
    <h3> h3
        <h4>h4</h4>
    </h3>
    <!--
     解析成：
     <h3>h3</h3>
     <h4>h4</h4> 
     报大错别套了
    -->
    <!-- h标签嵌套p标签 -->
    <h4>h4
        <p>p</p>
    </h4>
    <!--
     解析成：
    <h4>h4
        <p>p</p>
    </h4>
    -->
    <!-- h标签嵌套块级元素 -->
    <h3> h3
        <div>
            div
        </div>
    </h3>
    <!--
     解析成：
     <h3> h3
        <div>
            div
        </div>
    </h3>
    -->
    <!-- 都可以正常解析看似没什么问题，但是不建议 -->


</body>

</html>

在这里插入图片描述

headline
h1~h6作为标题使用，重要性递减。
属于块级元素,有上下外边距，但是不能嵌套其他的的块级元素(都这么说，我嵌套着也没啥问题，可能是可以嵌套但是 			    	  		 			  	     
不建议)
h1标签只能使用一次(可以使用多次但是不利于搜索引擎优化 )

段落标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>段落标签</title>
</head>
<p>段落标签</p>
<p>段落标签</p>
<!-- p标签嵌套p标签 -->
<p>p
    <p>p
        <p>p</p>
    </p>
</p>
<!-- 
    解析成：
    <p>p</p>
    <p>p</p>
    <p>p</p>
    <p></p>
    <p></p>
-->
<!-- p标签嵌套h标签 -->
<p>p
    <h5>h5</h5>
</p>
<!-- 
    解析成：
    <p>p</p>
    <h5>h5</h5>
    <p></p> -->
<!-- p标签嵌套块级元素 -->
<p>p
    <div>div</div>
</p>
<!--
     解析成：
     <p>p</p>
     <div>div</div>
     <p></p> 
    -->



<body>

</body>

</html>

在这里插入图片描述

paragraph
块级元素，有上下外边距，不能嵌套块级元素

水平线标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平线标签</title>
</head>

<body>
    <hr>
    <hr>
    <hr>
</body>

</html>

在这里插入图片描述

horizontal rule
创建一条水平线，可以在视觉上将文档分隔成各个部分。
块级元素,有上下外边距，边框

换行标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>换行标签</title>
</head>

<body>
    <!-- 不使用br -->
    <span>第一行</span>
    <span>第二行</span>
    <span>第三行</span>
    <!-- 使用br -->
    <span>第一行</span>
    <br>
    <span>第二行</span>
    <br>
    <span>第三行</span>
    <br>
</body>

</html>

在这里插入图片描述

break
强制换行显示
行内元素

div和span

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>div和span</title>

</head>

<body>
    <div>div</div>
    <div>div</div>
    <span>span</span>
    <span>span</span>
    <!-- span嵌套div -->
    <span>span
        <div>div</div>
    </span>
    <!-- 硬嵌套没什么错误但是不合理 -->
</body>

</html>

在这里插入图片描述

division 
span
div和span没有语义，主要用来布局
div是块级元素 span是行内元素
常见的块级元素：<div>、<h1>~<h6>、<p>、<ul>、<ol>、<li>...
常见的行内元素:<span>、<a>、<b>、<strong>、<i>、<em>、...
常见的行内款元素：<img>、<imput>、<td>...
块级元素特点:
1、独占一行。
2、可以设置宽度、高度、内外边距。
3、默认宽度是容器的100%。
4、是一个容器，可以放其他的块级、行内、行内块元素(p、h、标签除外)。
行内元素特点：
1、一行可以显示多个行内元素。
2、设置高度、宽度无效,内外边距上下无效，左右有效。
3、默认宽度就是本身内容的宽度。
4、行内元素只能容纳文本和其他的行内元素
行内块元素特点:
1、一行可以显示多个行内、行内块元素，但是之间会有空白缝隙
2、默认宽度就是本身内容的宽度
3、可以设置宽度、高度、内外边距

文本格式化标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本格式化标签</title>
</head>

<body>
    <b>加粗</b>
    <br>
    <strong>加粗，有强调效果</strong>
    <br>
    <i>斜体</i>
    <br>
    <em>斜体，有强调效果</em>
    <br>
    <s>加删除线</s>
    <br>
    <del>加删除线，有强调效果</del>
    <br>
    <u>加下划线</u>
    <br>
    <ins>加下划线，有强调效果</ins>
</body>

</html>

在这里插入图片描述

b-bold
i-italic
s-strike
u-underline
em-Emphasized text
del-delete
ins-insert
都是行内元素

图片标签


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <img src="https://www.w3school.com.cn/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香">
    <img src="https://www.w3school.com.cn/i/eg_tulip.jpeg" alt="上海鲜花港 - 郁金香">
</body>

</html>

在这里插入图片描述

img-image
src-source
alt-alter
alt：图像显示不出来时的代替文本
src:图像的路径 可以用相对路径或绝对路径
绝对路径：
指向另一个网站：src="https://www.w3school.com.cn/i/eg_tulip.jpg"。
完整盘符：D:\a\b\images\c.jpg。 
相对路径：
从文件所在位置出发，找到图片所在位置 
./目前所在的路径
../上一层路径
../../上两层路径
/下一层路径
行内块元素

链接标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>链接标签</title>
    <style>
        div {
            height: 1500PX;
        }
    </style>
</head>

<body>
    <a href="http://www.w3school.com.cn" target="_blank">W3School</a>
    <a href="#one">第一集</a>
    <div id="one">1</div>
</body>

</html>

在这里插入图片描述

a-anchor
点击第一集会跳到1的位置
href-Hypertext Reference
href:指定链接目标的url地址
target:指定链接页面的打开方式，默认是_self在当前页面打开 _blank在新窗口中打开
id名称一致，跳转到当前页面的指定位置
行内元素

base标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <base href="https://www.w3school.com.cn/i/" target="_blank" />
    <title>base标签</title>
</head>

<body>

    <img src="eg_tulip.jpg" alt="">
</body>

</html>

在这里插入图片描述

href:为页面上所有相对 URL 规定基准 URL：https://www.w3school.com.cn/i/ 
targer：可以设置整体链接的打开状态，target=_blank 把所有的链接都默认添加target=_blank 在新窗口打开

预格式化文本标签

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>预格式化文本标签</title>
</head>

<body>
   <pre>
       第一行
       
第二行
       第三行
    
   </pre>
</body>

</html>

在这里插入图片描述

pre-preformatted
保留空格和换行符 
文本会呈现为等宽字体。
块级元素，有上下外边距
大一学弟_
关注
标准HTML代码框架解析
weixin_47311182的博客
08-14 6207
HTML代码是网页的基础，任何Web编程框架或其它高级Web语言终将在浏览器中被解释为HTML基础代码。因此了解HTML基础代码结构及其原理是非常有必要的。
HTML5系列 01 基础介绍
weixin_43422005的博客
07-13 109
基础介绍 HTML全称为htyper text markup language，即超文本标记语言。 超文本：即超出了纯文字文本的范畴，它可以包含图片、链接、音乐等非文字元素 标记语言：由标签构成的语言，特点是学习简单上手容易 它最早诞生于1990年，由物理学家蒂姆·伯纳斯-李所创建，在1989年的时候蒂姆·伯纳斯-李就曾在一份备忘录中提出一个基于互联网的超文本系统这样的概念，并且在1990年规定出了HTML并在同年写出了浏览器与软件： 版本 年份 HTML 1991 HTML+ 19
html基础学习2
m0_53507591的博客
08-18 418
1.路径的使用。 绝对路径 绝对路径可直接复制当前文档/图片 的所在路径地址——如下 工作中不推荐使用，自己的地址与数据库的地址不相同 相对路径 同级找同级，可直接输入文件名称（包含后缀名） 上级找下级，目标文件的文件夹的名称/目标文件的名称 如下 下级找上级，（其中，一个../代表跳出一级）例如 拓展——a标签实现下载功能 将所要下载的文件进行压缩，压缩完成后保存 而后直接使用当前文件的路径地址 如下 2.标签的使用 sup-上标签 ——sub-下标签——如下图
HTML中的lang属性,meta中的charset、name、content、http-quiv
Zhangguohao666的博客
03-28 3457
1.HTML中lang属性； 2. meta中的charset、name、content、http-quiv属性
html-内联框架(8)
啦啦啦=_=的博客
03-14 145
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
前端学习第一天html部分标签的学习
最新发布
07-31
学习前端的记录
第一天html结构、标签使用.zip
10-09
在“第一天html结构、标签使用.zip”这个压缩包中，我们可以期待学习到关于HTML的基本概念，以及如何使用各种HTML标签来构建一个标准的网页。 HTML文档通常由三部分组成：头部（Head），主体（Body），和声明...
C#正则过滤HTML标签并保留指定标签的方法
08-30
第一个方法是 FilterHtmlTag，其目的是过滤掉不需要的HTML标签，而保留如图片、段落和换行标签等特定标签。具体步骤如下： 1. 使用正则表达式<[^>]*>来匹配任意的HTML标签。 2. 通过Regex.Replace方法替换掉匹配到的...
前端小白第一天。01常用的标签.html
07-20
01常用的标签.html
第1关：创建第一个 HTML 标签
weixin_45784564的博客
05-21 2267
任务描述 本关任务：创建你的第一个标签<h1></h1>，文本内容为welcome to Educoder。 实现的效果如下： 编程要求 请仔细阅读右侧代码，结合相关知识，在 Begin-End 区域内进行代码补充，完成第一个标签<h1></h1>，文本内容为welcome to Educoder的创建。 测试说明 平台会对你的代码进行运行测试，如果实际输出结果与预期结果相同，则通关；反之，则 GameOver。 赶快试一下吧！！！ 源码 <!DOCT
h1~h6标签和p标签的使用
qq_53987671的博客
08-03 1290
1-h1~h6标签 它有从h1~h6六个标签，它的效果展示如下： 由图可以很明显看出，在显示效果上，h1~ h6标题的字体大小是逐渐变小的，另外对于搜索引擎来说，h1~h6的重要性也是逐渐变低的。其中h1的重要性仅次于title，搜索引擎检索完title会立即查看h1中的内容。 h1标签非常重要，它会影响到页面在搜索引擎中的排名，一个页面最好只写一个h1标签， 一般的页面中，我们只使用h1 h2 h3，其他的基本不用 。 自带的cs...
HTML新特性，新增的语义化标签
阿牛哥的博客
12-12 401
HTML新增的语义化标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l
前端开发之html篇
setsunadoudou的博客
09-06 170
一、什么是html? 　　1.我们说socket网络编程的时候，提到过一个cs模型，就是客户端—服务端模型，前端开发也是基于网络编程，但是这时就应该是bs模型了，是浏览器与服务端的通信。 　　我们可以...
js 收银元小程序
weixin_30594001的博客
08-21 298
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js考试</title></head><script type="text/javascript">// 1.编写一个程序，计算增加后的工资。要求基本工资大于等于100...
HTML入门
qq_64067728的博客
04-19 110
首先下载vscode准备好环境点击此处 HTML:hyper test markup language/超文本标记语言 超文本：就是页面可以包含图片、音乐、视频、链接等非文本 html骨架标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&.
Java网络 1.7 h 和 p 标签
我是小白呀的博客
01-05 4282
h 和 p 标签h 标签p 标签审查元素功能 h 标签 h 是英文标题 Heading 的缩写. <h1>到 <h6>都是标签: -<h1></h1>: 一级标题 -<h2></h2>: 二级标题 -… -<h6></h6>: 六级标题 h 标签没有嵌套关系的. 由于 h3 跟着一个 h2. 所以, 我们自己就知道了这个 h3 是 h2 子标题. h 是容器级的标签. 理论上里面可以放置 p 等其他标签. 在语义
HTML基础知识5-文档声明标签，lang属性用法以及字符集
qq_45353963的博客
11-19 1362
HTML最基本的标签莫过于文档声明标签 <!DOCTYPE> 标签 这个声明标签的作用就是告诉我们的浏览器使用哪种HTML版本来显示网页 完整结构如以下代码所示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&
HTML中的骨架标签（这里有一个叹号）DOCTYPE，＜html lang=“en“＞，＜meta charset=“UTF-8“＞
weixin_61197471的博客
01-23 2238
看注释 <!DOCTYPE html> <!-- !DOCTYPE为文件声明， 告诉浏览器网页的HTML版本 --> <html lang="en"> <!-- lang为英文language，en表示English，此外告诉浏览器网页版本 若为en浏览器常会提示将网页翻译成中文，建议设置为简体中文zh-CN --> <head> <meta charset="UTF-8"> <!-- 标识字符编码格式，.
HTML编码问题导致的乱码
Alex
09-01 1399
今天一个学弟问了一个问题，它写的HTML代码打开显示的是乱码。 然后就给我发来了代码。 就一个HTML文件和一个文件夹，打开一看，很简单的代码。 <!DOCTYPE html> <html lang=""> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
HTML入门：第一天学习总结
"html学习笔记第一天总结.pdf" 在深入学习HTML之前，我们首先需要理解网页的基本概念。网页是网站的一部分，是展示特定内容的集合，这些内容可以包括文字、图片、链接、声音和视频等。一个网页通常以HTML（超文本...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值