首页 > 其他分享 >简单了解HTML

简单了解HTML

时间:2024-04-21 11:34:42浏览次数:19  
标签:段落 HTML 标签 元素 了解 简单 声明 属性

HTML

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>菜鸟教程</title>
 <\head>
 <body>
     
 <h1>我的第一个标题</h1>
 <p1>我的第一个段落</p1>
 ​
 </body>
 <\html>    
  • <!DOCTYPE html> 声明为 HTML5 文档

  • <html> 元素是 HTML 页面的根元素

  • <head> 元素包含了文档的元(meta)数据,如 <meta charset="utf-8"> 定义网页编码格式为 utf-8

  • <title> 元素描述了文档的标题

  • <body> 元素包含了可见的页面内容

  • <h1> 元素定义一个大标题

  • <p> 元素定义一个段落

HTML标签

  • HTML 标签是由尖括号包围的关键词,比如 <html>

  • HTML 标签通常是成对出现的,比如 和

  • 标签对中的第一个标签是开始标签,第二个标签是结束标签

  • 开始和结束标签也被称为开放标签闭合标签

HTML网页结构

image-20240402141305145

<!DOCTYPE> 声明

  • ​ 声明有助于浏览器中正确显示网页。 ​
  • 网络上有很多不同的文件,如果能够正确声明HTML的版本,浏览器就能正确显示网页内容。

  • doctype 声明是不区分大小写的

image-20240402141641816

中文编码

目前在大部分浏览器中,直接输出中文会出现中文乱码的情况,这时候我们就需要在头部将字符声明为 UTF-8 或 GBK

HTML基础

HTML标题
 <p>   </p>
HTML链接
 <a>  href= "https://www.runoob.com"</a>
HTML 图像
 <img  src="/images/logo.png" width="258" height="39" />

注意: 图像的名称和尺寸是以属性的形式提供的。

HTML 元素

image-20240402150539452

HTML 元素语法
  • HTML 元素以开始标签起始

  • HTML 元素以结束标签终止

  • 元素的内容是开始标签与结束标签之间的内容

  • 某些 HTML 元素具有空内容(empty content)

  • 空元素在开始标签中进行关闭(以开始标签的结束而结束)

  • 大多数 HTML 元素可拥有属性

嵌套的 HTML 元素

大多数 HTML 元素可以嵌套(HTML 元素可以包含其他 HTML 元素)。

HTML 文档由相互嵌套的 HTML 元素构成。

HTML 空元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

就是没有关闭标签的空元素( 标签定义换行)。

在开始标签中添加斜杠,比如 ,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。

HTML 属性

  • HTML 元素可以设置属性

  • 属性可以在元素中添加附加信息

  • 属性一般描述于开始标签

  • 属性总是以名称/值对的形式出现,比如:name="value"

HTML 属性参考手册

image-20240402151159335

HTML 水平线


标签在 HTML 页面中创建水平线。 ​

hr 元素可用于分隔内容。

 <p>这是一个段落。</p>
 <hr>
 <p>这是一个段落。</p>
 <hr>
 <p>这是一个段落。</p>

HTML 注释

 <!-- 这是一个注释 -->
HTML 折行
 <p>这个<br>段落<br>演示了分行的效果</p>
 

标签:段落,HTML,标签,元素,了解,简单,声明,属性
From: https://www.cnblogs.com/liudan050501/p/18148716

相关文章

  • dbt docs block 简单说明
    dbtdocsblock是一个jinja2bblock的扩展,以下是一个简单的说明参考使用定义{%docstable_events%} Thistablecontainsclickstreameventsfromthemarketingwebsite. TheeventsinthistablearerecordedbySnowplowandpipedintothewa......
  • dbt doc 函数内部处理简单说明
    dbt提供了一个方便的doc函数,可以方便的使用类似ref模式进行docsblock定义的引用引用参考处理示例version:2models:-name:eventsdescription:'{{doc("table_events")}}'columns:-name:event_iddescription:......
  • 简单的数学题 题解
    题意:解方程\[a^x\equivx\pmodm\]数据范围:\(a<m\le10^9\)Solution首先\(a^x\equiva^{x\bmod\varphi(m)+\varphi(m)}\pmodm\)我们设\(\text{solve}(\&x,y,m)\)表示解决\[a^{x\bmod\varphi(m)+y}\equivx\pmodm\]原题即\(\text{solve}(\&x,......
  • 解析几何简单计算
    设点设线例题1题目已知椭圆方程\(\dfrac{x^2}{4}+y^2=1\),设直线\(l\),不经过点\(P(0,1)\)且与椭圆相交于\(A,B\)两点,若直线\(PA\)与直线\(PB\)的斜率和为\(-1\),证明:直线\(l\)过定点。题解由直线\(l\)不过点\(P(0,1)\)可设直线\(l\)方程:\(mx+n(y-1)=1\)......
  • 使用Docker部署一个简单的web项目
    使用Docker部署一个简单的web项目开发流程在本地开发一个有静态文件服务的web服务程序web服务监听ip+port为0.0.0.0:3000在服务器上使用Dockerfile构建镜像使用构建出的镜像运行容器配置Nginx将端口代理到web服务的3000端口在本地开发一个有静态文件服......
  • http://ccl.pku.edu.cn:8080/ccl_corpus/CCLCorpus_Readme.html
    北京大学CCL语料库简介语料库网址: http://ccl.pku.edu.cn:8080/ccl_corpusCCL语料库及其检索系统为纯学术非盈利性的。不得将CCL语料库检索系统及其产生的检索结果用于任何商业目的。CCL不承担由此产生的一切后果。CCL语料库仅供语言研究参考之用。语料本身的正确性需要您自......
  • CCLCorpus_Readme.html
    CCL语料库检索系统使用说明2024-01-01目 录1普通查询     1.1操作符     1.2基本项     1.3简单项     1.4复杂项     1.5过滤项     1.6子句     1.7查询表达式2高级查询3批量查询4模式查询......
  • 深入了解PBKDF2:密码学中的关键推导函数
    title:深入了解PBKDF2:密码学中的关键推导函数date:2024/4/2020:37:35updated:2024/4/2020:37:35tags:密码学对称加密哈希函数KDFPBKDF2安全密钥派生第一章:密码学基础对称加密和哈希函数对称加密:对称加密是一种加密技术,使用相同的密钥进行加密和解密。常见......
  • 如何创建响应式HTML电子邮件模板
    在这个适合初学者的指南中,你将学习如何创建一个响应式电子邮件模板。你将跟随逐步说明以及代码片段设计一个在任何设备上都看起来很棒的电子邮件模板。这个项目非常适合渴望掌握电子邮件设计基础的新手!(本文视频讲解:java567.com)步骤1:设置基本结构要构建一个电子邮件模板,你可以......
  • 利用Android Studio简单编译一个可执行文件
     目的:初学ndk,想利用AndroidStudio编一个能直接在Android上运行的可执行程序1、创建NativeC++项目  这样会在代码目录下生成,cpp文件夹和Java文件夹  2、修改cmake文件生成可执行文件3、构建项目生成就会在buildcxx目录下生成文件,通过adb上传到手机运行 ......