HTML基础（一）：常用标签1

最新推荐文章于 2022-08-11 19:56:51 发布
最新推荐文章于 2022-08-11 19:56:51 发布
阅读量182 收藏
点赞数
分类专栏： HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dingchao823/article/details/47976383
版权

练习1、基本框架

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test1</title>
</head>

<body>
</body>

</html>

练习2、使用link标签载入css文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css.css" />
<title>test1</title>
</head>

<body>
aaaaaa
</body>

</html>

效果：

image

练习3、meta标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="定义文档的关键字，方便搜索引擎检索" />
<meta name="description" content="描述标记，对文档的简要介绍。摘要，当检索时出现在出现在网页标题下方的描述" />
<meta http-equiv="refresh" content="1;URL=http://www.sina.com" /><!--1s之后跳转到新浪网 -->
<title>test1</title><!-- 网站标题，是必须的-->
</head>

<body>
aaaaaa
</body>

</html>
练习4、p标签，分行 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test1</title><!--网站标题，这是必须的-->
</head>

<body>
<p style="color:#00CC33;">
aaaaaa
</p>
<p style="color:#FF0000">
aaaaaa
</p>
</body>

</html>

效果：

image

练习5、br标记：回车标记(独立标记，没有开始和结束)

<p style="color:#00CC33;">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />aaaaaaaaaa
</p>
练习6、pre标记：原样显示代码中的内容 
<body>
<p style="color:#00CC33;">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />aaaaaaaaaa
</p>
<pre
aaaaaavvvvvv
     vvvvvvvvvvvvv
           vvvvvvvvvvvvvvvv
           </pre>
</body>

效果：

image

练习7、h标签：标题栏标记。

<body>
 <h1 style="font-size:12px;">h1</h1>
 <h2>h2</h2>
 <h3>h3</h3>
 <h4>h4</h4>
 <h5>h5</h5>
 <h6>h6</h6>
</body>

效果：

image

练习8、b标签：加粗。

<body>
<b>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</b>
</body>

练习9、i：倾斜标记   u：下划线  s：删除线文字  

练习10、&nbsp：实体空格标记。

解释：如果我们在源码中写入

<body>
中        国
</body>

而他只会在页面中显示一个空格，如果想让他显示多个空格：

<body>
中&nbsp;&nbsp;&nbsp;国
</body>

练习11、实体标记有很多，例如版权符号，商标等。

image

练习12、a标签：超链接

<body>
<a href="www.sina.com">新浪网</a>
<a href="mailto:1142254897@qq.com">发邮件</a><!--自动调用本地邮件客户端发送邮件，windows mail等-->
</body>

练习13、div标签：块标签，可以对HTML页面进行规划

<body>
<div style="margin:0 auto; width:800px; color:#FF0000;">
    <div style="background-color:#009900;">top</div>
    <div style="width:400px; float:left; background-color:#330000;">left</div>
    <div style="background-color:#990000;">right</div>
</div> 
</body>

效果：

image

练习14、ul：无序列表 ol：有序列表 li：列表（子项）

<body>
<ul>
    <li>新浪网</li>
    <li>www.sina.com.cn</li>
</ul> 
</body>

效果

image

<body>
<ol>
    <li>新浪网</li>
    <li>www.sina.com.cn</li>
</ol> 
</body>

效果：

image

心情一天一变
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
20.2 HTML 常用标签
07-28
在“20.2 HTML 常用标签”这个主题中，我们将深入探讨一些HTML中不可或缺的核心标签，这些标签对于创建功能性且结构清晰的网页至关重要。 1. **文档类型声明（<!DOCTYPE html>）**：这是每个HTML文档的开头，用于...
HTML常用标签代码
05-07
在本资源中，我们看到的"HTML常用标签代码"显然是一个帮助初学者或开发者学习和练习HTML标签的资料。下面将详细介绍一些常见的HTML标签及其用法。 1. `<html>`: 这是每个HTML文档的根元素，包含整个网页的代码。...
php截取逗号之前的字符
别在熬夜了！
01-18 4908
前置： $foo = 'aaaaaa,vvvvvv,ccccc,dddd'; if(($index = strstr($foo,',') !== false): 答案1：用正则-》 $Regex = '#([^,]+)#is'; preg_match($Regex,$foo,$result); echo $result[1]; //输出结果：aaaaaa 答案2：用分割字符串-》 $foo =
mysql 常用函数总结-字符函数
若疆~赤云
02-13 304
一、常见字符函数 1、计算字符长度，与编码有关 length() 示例：select length('1111') 2、拼接字符串 concat(可变参数) 示例：concat('a','b','c') 注：有null字段时，结果为null 3、字母大写 示例：upper('aaa') 4、字母小写 示例：lower('AAA') 5、检索字符串 instr(xx,x...
各种常用类1
Nisa_CC的博客
06-14 350
一、String类 1）public String(byte[] bytes) 把字节数组转成字符串 输出结果如右侧所示。 2）public String(byte[],int offset,int length) 把字节数组的一部分转成字符串 3）public String(char[] value) 把字符数组转成字
php截取字符串中，第一个字符前或后面所有的内容
weixin_30274627的博客
09-12 1268
php 截取字符串中第一个 \ 之前的字符串 以斜杠为例查找斜杠第一次出现的位置（在字符串中为第几位）$num=strpos($str, '/');截取字符串第一个字符前面所有的内容echo substr($str,0,strpos($str, '/')) php 截取字符串中最后一个一个 \之前的字符串 　　$newa = substr($str,0,strrpos($str,'\'));...
【HTML基础-1】HTML标签简介及常用标签
m0_64378913的博客
03-24 4207
目录1 HTML概述1.1 什么是HTML1.2 HTML的语法规则2 HTML标签简介2.1 HTML标签2.2 HTML元素2.3 HTML实例3 HTML常用标签3.1 标题标签3.2 段落标签3.3 换行标签3.4 < hr/ >水平线3.5 span标签和div标签3.6 文字段落缩进标签3.7 文字特殊样式3.8 超链接标签3.9 图片标签3.10 注释及特殊字符标签3.11 建立列表3.11.1 建立无序列表3.11.2 建立有序列表3.1
Vue基础知识总结 3：vue常用标签
热门推荐
学Java，找哪吒
07-19 2万+
一、计算属性 1、合并两个字符串 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app">{{fullName}}</div> <script src="../js/vue.js">&.
HTML5常用基础标签
weixin_53414403的博客
05-11 3414
HTML5中的标签众多，有时新手刚入门前端很容易步入误区，即想要一把抓掌握所有的知识，其实全部掌握效果不尽人意，相反会让我们学习受挫，效率低下，因此“片面”的学习有助于我们提高学习效率等，对于一些不常用的标签或者知识即查即用。因此都是有哪些常用的基础HTML5标签呢？快来看看吧！ 1.首先是一些重要的文本标签，辟如<div>、<span>、<p>、<h1-h6>、<br>、<hr>、<pre>等等 以下是依据官方解释以及
前端基础---HTML常用标签
luckyboy!的博客
08-11 3554
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考提示：这里对文章进行总结：例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。...............
HTML5常用基础标签.docx
02-08
下面将详细介绍 HTML5 的基本结构和一些常用的基础标签。 一、HTML 的基本结构 HTML 的基本结构主要由以下几部分组成： * `<!DOCTYPE html>`：文档类型声明，表明该文档是 HTML5 文档。 * `<html>`：root 元素，...
HTML中的常用标签
09-18
### HTML中的常用标签知识点详解 #### 一、文档基本结构 ... 1. **`<html>`标签**：定义整个HTML文档的根元素。 2. **`<head>`标签**：包含了关于文档的...希望这些内容能够帮助初学者更好地理解和掌握HTML基础知识。
web前端基础知识——HTML常用标签篇
01-08
二、HTML常用标签的学习： head标签 头标签 title标签 显示在网页的选项卡区域 body标签 显示网页的所有内容 meta标签 信息标签 charset=utf-8 meta 标签在head里面 标注当前网页的编码格式 utf-8
005 - 马科维茨投资组合理论实现
08-10
python基于tushare实现马科维茨投资组合理论实现
基于ASP的学生信息档案管理系统毕业论文及源码.rar
08-10
资源包主要包含以下内容： ASP项目源码：每个资源包中都包含完整的ASP项目源码，这些源码采用了经典的ASP技术开发，结构清晰、注释详细，帮助用户轻松理解整个项目的逻辑和实现方式。通过这些源码，用户可以学习到ASP的基本语法、服务器端脚本编写方法、数据库操作、用户权限管理等关键技术。 数据库设计文件：为了方便用户更好地理解系统的后台逻辑，每个项目中都附带了完整的数据库设计文件。这些文件通常包括数据库结构图、数据表设计文档，以及示例数据SQL脚本。用户可以通过这些文件快速搭建项目所需的数据库环境，并了解各个数据表之间的关系和作用。 详细的开发文档：每个资源包都附有详细的开发文档，文档内容包括项目背景介绍、功能模块说明、系统流程图、用户界面设计以及关键代码解析等。这些文档为用户提供了深入的学习材料，使得即便是从零开始的开发者也能逐步掌握项目开发的全过程。 项目演示与使用指南：为帮助用户更好地理解和使用这些ASP项目，每个资源包中都包含项目的演示文件和使用指南。演示文件通常以视频或图文形式展示项目的主要功能和操作流程，使用指南则详细说明了如何配置开发环境、部署项目以及常见问题的解决方法。 毕业设计参考：对于正在准备毕业设计的学生来说，这些资源包是绝佳的参考材料。每个项目不仅功能完善、结构清晰，还符合常见的毕业设计要求和标准。通过这些项目，学生可以学习到如何从零开始构建一个完整的Web系统，并积累丰富的项目经验。
[毕业设计]VB与Access共筑文档安全管理与分享平台(源代码+论文+答辩PPT).zip
最新发布
08-10
[毕业设计]VB与Access共筑文档安全管理与分享平台(源代码+论文+答辩PPT)
毕业设计，基于ASP+SqlServer开发的高校工资管理系统，内含完整源代码，数据库，毕业论文
08-10
毕业设计，基于ASP+SqlServer开发的高校工资管理系统，内含完整源代码，数据库，毕业论文 随着网络应用技术的飞速发展，基于网络的应用系统给人们带来了诸多便利。建立高校工资管理系统是为了适应现代化校园管理的需要，方便管理职工工资情况和职工个人信息；同时也方便职工可以上网查询自己的工资信息，还有利于提高办公效率，改善办公质量，规范高校职工工资的常规管理工作。 高校工资管理系统的开发是基于B/S结构，采用ASP编程技术及SQL Server数据库进行开发。本文首先对网站开发环境和运行平台、数据库、ASP编程技术做了简要的介绍，并对工资管理系统的设计进行了详细的需求分析；然后给出了高校工资管理系统的设计方案及系统的具体实现，实现了高校工资管理系统的构建，主要包括系统工资管理模块、职工信息查询模块和系统信息管理及维护模块；最后，通过测试与分析，说明该系统运行稳定、可靠，具有一定的实用价值。 关键词：工资管理系统；信息查询；信息管理；信息维护；网络数据库
HTML前端基础：常用标签详解
一、HTML常用标签 1. 标题标签：`<h1>` 到 `<h6>` 用于定义文档的六级标题，`<h1>` 是最重要的标题，`<h6>` 是最不重要的标题。 2. 段落标签：`<p>` 用于创建一个段落，是文本内容的基本组织单位。 3. 文本标签：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值