HTML基本和标签

已于 2022-06-13 21:50:30 修改
阅读量123 收藏
点赞数
分类专栏： HTML 文章标签： HTML 元数据 块级标签 行级标签 超链接
于 2022-06-13 21:40:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67368271/article/details/125267430
版权

一、什么是HTML

Hyper Text Markup Language： 超文本标签语言

由标签组成

 

二、标签

单标签：<标签名> 或 <标签名 />

双标签：<标签名></标签名>

1.<meta>标签

  • 描述文档类型和字符编码    

<head>

               <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

</head>

  • 描述搜索关键字和描述

<head>

           <meta name= "keywords" content= "淘宝,网上购物,在线交易,交易市场" />

           <meta name= "description" content= "淘宝网-亚洲最大、最安全的网上交易平台，提供各类服饰、美容、家居、数码、……" />

</head>

2.块级标签：

显示为“块”状，前后隔一行

  • 标题标签

         <h1>一级标题</h1>                          

         <h2>二级标题</h2>  

         <h3>三级标题</h3>  

         <h4>四级标题</h4>  

         <h5>五级标题</h5>  

         <h6>六级标题</h6>

        ​​

  • 段落标签

        <p></p>

  • 水平线标签

        <hr />

  • 有序列表标签

        <ol>  

                 <li>列表项1</li>  

                  … …  

        </ol>

  • 无序列表标签

        <ul>  

                <li>列表项1</li>  

                 ……  

        </ul>

  • 标题列表标签

        <dl>  

                <dt>标题</dt>  

                 <dd>描述1</dd>  

        </dl>

  • 表格标签

        <table>  --表格

        <tr> --一行       

                <td>百度</td>      --一列（单元格）

                <td>新浪</td>  

        </tr> …… </dl>

        

  • 表单标签

        <form>--一般和 table使用

                 <table>    

                         <tr>        

                                <td>...</td>      

                                 <td>...</td>    

                        </tr>

                .....

                </table>

        </form>

  • 分区标签

        <div></div>

常用4种块状结构：

1、div-ul(ol)-li ：常用于分类导航或菜单等

2、div-dl-dt-dd ：常用于图文混编的场合

3、table-tr-td ：常用于图文布局或显示数据

4、form-table-tr-td：常用于布局表单  

3.行级标签：

按行逐一显示

  • 图像标签

        <img />

  • span 标签

        显示某行内的独特样式 ，前后自动换行       <p></p>

eg.   <p>商品价格:仅售<span style="color:red;font-size:70px;">10</span>元</p>

        

  • 换行标签

        <br />

标签里面可以有属性，属性一定在标签里！！

4.其他

  • 浮动标签

        <marquee></marquee>

使图片动起来

  • 超链接

        <a></a>

属性： href = "路径"

  • 空格

        &nbsp

三、基本规范

  1. 标签名和属性名称必须小写  
  2. HTML标签必须关闭
  3. 属性值必须用引号括起来
  4. 标签必须正确嵌套
  5. 必须添加文档类型声明
    1.  声明必须位于文档的最前面
    2. 三种级别：Strict（严格类型） 、Trasitional（过度类型）、 Frameset（框架类型）

四、案例 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<!-- 标签页 命名 -->
		<title>one  (＾－＾)V</title>
	</head>
	
	<!-- 标签页 内容 -->
	<body style="background-image: url(../img/张万森.jpeg);"><!-- 设置 背景-->
		<!-- 浮动 标签 -->
		<marquee>
			<!-- 插入 图片 -->
			<img src = "../img/a.gif"/>
		</marquee>
		
		<hr /><!-- 水平线 -->
		 嗨嗨嗨，<br />这是超文本编辑语言！<!-- 换行 -->
		 <br />
		 <hr />
		 <!-- h1~h6 标题标签 -->
		 欢迎来到标题标签，总共只有六个诶，不要超出咯~
		 <h1> 一级标签</h1>
		 <h2>二级标签</h2>
		 <h3>三级标签</h3>
		 <h4>四级标签</h4>
		 <h5>五级标签</h5>
		 <h6>六级标签</h6>
		 
		 <hr />
		 <!-- 无序列表 -->
		 这是 无序列表
		 <ul>
			 <li> 默认无序符号，小黑点</li>
		 </ul>
		 <ul type="circle">
			 <li> 无序符号之 小圆圈，空心圈(circle)</li>
		 </ul>
		 <ul type="disc">
			 <li> 无序符合之 小黑点(disc)</li>
		 </ul>
		 <ul type = "square">
			 <li> 无序符号之 小矩形(square)</li>
		 </ul>
		 
		 <hr />
		 <!-- 有序列表 -->
		 这是有序列表
		 <ol type="1">阿拉伯数字
			 <li>1</li>
			 <li>2</li>
			 <li>3</li>
		 </ol>
		 <ol type="A">大写英文字母
			 <li>A</li>
			 <li>B</li>
			 <li>C</li>
		 </ol>
		 <ol = type="I">大写罗马数字
			 <li>I</li>
			 <li>II</li>
			 <li>III</li>
		 </ol>
		 <ol type="a">小写英文字母
			 <li>a</li>
			 <li>b</li>
			 <li>c</li>
		 </ol>
		 <ol type="i">小写罗马数字
			 <li>i</li>
			 <li>ii</li>
			 <li>iii</li>
		 </ol>
		 
		 <hr />
		 <!-- 标题列表 -->
		 这是标题列表
		 <dl>
			 <dt>标题吖</dt><!-- 标题 -->
			 <dd><!-- 标题内容 -->
				 刘畊宏女孩<br />
				 王心凌男孩
			 </dd>
		 </dl>
		 
		 <hr />
		 <!-- 超链接 -->
		 <h3>
			 <a href="one_tiao.html">hh</a>
		</h3>
		 
		 <hr />
		 接下来，请允许我再展示一首《咏鹅》
		 <h2>咏鹅</h2>
		  <!-- 空格 --><h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;骆宾王</h4>
		  <!--  --><p>鹅鹅鹅，</p>
		  <p>曲项向天歌。</p>
		  <p>白毛浮绿水，</p>
		  <p> 红掌拨清波。</p>
		 
	</body>
</html>

youdabi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
01 HTML基本标签.ppt
07-23
Html的基础标签学习之后会使用HTML的基本结构创建网页，会使用文本相关标签，实现文字修饰和布局，会使用图像相关标签实现图文并茂的页面，会使用超链接相关标签实现页面间的跳转。
html&css的简单了解
m0_50496669的博客
09-07 1262
html&css html： 常用的标签： div、p、ul li、ol li、h1-h6、a、span、b、u、i、input（属性text、number、password、radio、checkbox、submit、reset）、form、select>option、textarea h5(新标签）：header、nav、footer、main、section、video、audio、input（color、range、week、date） 标签的分类： 单双标签：单标签没有与之对
HTML基本结构与基本标签
qq_44759710的博客
05-25 545
HTML 简介 HTML：Hyper Text Markup Language 超文本标签语言 HTML：网页的“源码” 浏览器：“解释和执行”HTML源码的工具 编辑工具：记事本、Notepad++、 EditPlus、HBuild HTML 文档的结构 HTML 标记的语法 HTML 标记的作用 标记内容在浏览器中的显示样式 例如： <font color="red">您好</font> HTML 标记的语法 一般形式： <标记> 文档内容 </标记>
HTML中哪些是块状元素，哪些是内联元素？
WebLogic
01-03 1万+
常见的块状元素与内联元素 块状元素 内联元素 address – 地址 blockquote – 块引用 center – 居中对齐 dir – 目录列表 div – 常用块级容易，也是CSS layout的主要标签 dl – 定义列表 fieldset – form控制组 form – 交互表单
HTML基本结构及常见块级元素、内联元素
weixin_47450039的博客
05-30 617
什么是HTML? HTML 指的是超文本标记语言: HyperText Markup Language，是用来描述网页的一种语言。使用标记标签 (markup tag)来描述网页。 HTML基本结构 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="
HTML元素和标签的区别
LiuYang_
06-14 2957
HTML元素和标签的区别 元素： HTML元素就是构成HTML文件的基本对象，HTML元素可以说是一个统称而已。HTML元素就是通过使用HTML标签进行定义的。例如： <a href=“http://www.chhua.com” id=>WEB开发笔记 ID为“web”的可以统称为一个大元素 a标签也可以称为一个小元素。 标签： 标签就是、、等被尖括号“<”和“>”包起来的对象，绝大部分的标签都是成对出现的，如、。当然还有少部分不是成对出现的，如、等。 标签就是用来标记H
01-HTML基本标签.md
02-05
html基本标签，什么是标签，标签的分类，标签的作用，常用标签，单双标签，标签属性，src路径... 有痕
HTML基本标签
07-30
HTML基本标签 HTML基本标签 HTML基本标签
HTML案例1关于标签的基本使用
最新发布
11-06
HTML，全称HyperText Markup Language，是用于创建网页的标准标记语言。...通过学习和实践这些基本标签，你可以开始构建自己的HTML页面，理解网页的构建块，并为更复杂的网页设计和开发打下坚实基础。
DIV+CSS样式学习笔记-四种常有的块状结构
爱吃肉的熊猫
07-19 1556
div-ul(ol)-li：常用于分类导航或菜单等 div-dl-dt-dd:常用于图文混编的场合 div-table-tr-td:用于规整数据显示 div-form-table-tr-td:常用于布局表单
HTML行内元素、块状元素、行内块状元素的区别
热门推荐
zhanglir333的博客
01-27 2万+
HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是，这三者是可以互相转换的，使用display属性能够将三者任意转换： 　　(1)display:inline;转换为行内元素 　　(2)display:block;转换为块状元素 　　(3)display:inline-block;转换为行内块状元素 1.行内元素 　　行内元素最常使用的就是s
编程html常用的块状标签,基本标签（块级标签和内联标签）
weixin_39598472的博客
06-22 779
超文本标记语言(Hypertext Markup Language, HTML)是一种用于创建网页的标记语言。本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。(兼容性问题)网页文件的扩展名：。html或。htmHTML是一种标记语言(markup language)，它不是一种编程语言。HTML使用标签来描述网页声明为...
HTML基础（三）：常用的块级元素
汝嫣兮的博客
04-10 7123
这一篇介绍块级元素，其中，详细介绍了标题元素hn、段落元素p、表格元素table、列表元素ul、滚动元素marquee、水平线元素hr、大区块元素div这几种常用的元素的使用。
html使用定义列表制作易趣商品列表页面,TP02 列表、表格、框架.ppt
weixin_39889481的博客
06-03 312
被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。 * 讲解要点： 表格就是将页面中的内容按照指定的格式罗列显示出来，目的是让页面美观，内容整齐 讲解要点： 讲解要点： 讲解要点： 讲解要点： 讲解要点： * 因此，在页面局部布局中，形成了4种常用的块状结构： (1)div-ul(ol)-li：常用于分类导航或菜单等场合； (2)div-dl-d...
HTML的块级元素（常用整理）
weixin_46726346的博客
08-04 9943
emmm，最近想整理复习一下前端的基础，最开始的HTML想了好久也没想好怎么写，最后也是决定以行块这样整理，再在后面补充吧。 说到HTML，什么是HTML呢？ 什么是 HTML？ HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) HTML 使用
html常见块状标记,HTML 常用块状标签有哪些?
weixin_35782250的博客
06-21 2918
HTML 常用块状标签有哪些?html 文档和 HTML 元素是通过 HTML 标签进行标记的, HTML 标签由开始标签和结束标签组成, 下面我们来看一下 HTML 中常用的块状标签.什么是块级标签? 我们可以通过一个简单的方式来判定, 那就是在网页上单击右键选择 "审查元素", 在审查元素当中显示为可折叠的就是块状标签.那么常见的块状标签有哪些呢?标题标签,,...... 以此类推, 其中, ...
分类和标签的用途和区别
小白成神路
04-22 8704
有很多朋友没有搞明白分类和标签的用途和区别，以及它们对SEO的作用，  我在这里详细讲解一下。    之前我们说对内链建设来说，网站应该是一个网状的结构，方便蜘蛛爬行。    但对分类和文章层次来说，网站应该是一个树状的结构：    首页  |  分类1  分类2 ... 分类N  |  文章1-1 文章1-2 ... 文章1-M   文章2-1 文章2-2 ..  文章N-
指标和标签
m0_61607827的博客
04-11 2125
指标 1.指标是说明总体综合数量特征的概念，所有指标能用数值来表示，一个完整的统计指标，一定要讲时间、地点、范围（百度）; 2.指标的评价较易量化，通常有一定的标准和尺度; 3.指标是生产性思维、拆解式思维，讲究的是化整为零，将事物分解开来进行多角度的描述，得到很多的指标; 4.指标最擅长的应用是监测、分析、评价和建模; 5.指标是业务管理导向的，需要提前规划，应用场景很多，战略目标、市场定位、业务监测、业绩考核、任务分解、数据分析、数据建模、BI应用等。 标签 1. 标签是对象的属性
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

youdabi

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值