首页 > 其他分享 >初识HTML

初识HTML

时间:2022-09-28 22:00:11浏览次数:75  
标签:便签 浏览器 标签 初识 HTML 文档 网页

HTML简介

1.什么是HTML

​ HTML的全称为[超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字、图形、动画、声音、表格、链接等等!

2.HTML中的标签

2.1HTML中标签的分类

  • 按照闭合特征

    1.单标签:由一个标签< />组成,比如换行便签 <br>,水平线便签<hr>

    2.双标签:由开始标签 <>和结束标签"< />"组成,例如文字段落标签

  • 按照标签格式分类

    • 行内块元素:
      (1). 不自动换行
      (2). 能够识别宽高
      (3). 默认排列方式为从左到右
    • 块标签:
      (1). 独占一行
      (2). 继承父级属性
      (3). 可以设置宽高
        比如:div、p、ul、li、ol等
    • 行标签:
      (1). 只占他本身部分
      (2). 继承父级属性
      (3). 不能设置宽高
        比如:i、input、label、select、span等

2.2常见的标签

3.第一个网页编写

​ 首先我们打开创建一个文本文档test.txt,在文档中输入

image-20220928162631032
可以看出,我们使用的标签html中包含一个head标签以及body标签,任何的html里面都包含着两个标签,是网页的标题标签。而<h1>则是标题标签,<p>是段落标签。这些常用的便签下面会有详细的介绍!接下来把文件保存,后缀改成html,如下图<img src="https://gitee.com/StarwithLing/blog-pirture/raw/master/img/image-20220928163646100.png" alt="image-20220928163646100" loading="lazy"></p> <p>文档就变成了浏览器的图标,这里推荐使用google浏览器,然后打开这个文件!</p> <p><img src="https://gitee.com/StarwithLing/blog-pirture/raw/master/img/image-20220928163812014.png" alt="image-20220928163812014" loading="lazy"></p> <p>可以看出我们所编写的程序就运行出来了,当然,我们在学习的过程中不可能只去使用记事本去编写网页,在接下来会使用一些主流的网页开发工具,Vscode,HBuilderX等!</p> <h3 id="4标签中的属性">4.标签中的属性</h3> <p>​ 在常见的标签中,我们可以对标签添加一些属性,来是标签达到我们想要实现的预期,例如给标签添加一个名称,标签中的内容实现左对齐,居中或者更改便签中的背景,颜色等等!后面会有介绍!</p> <pre><code><标签 属性="" 属性=""> 标签中的属性书写方式 </code></pre> <h3 id="5关于声明文档">5.关于声明文档</h3> <pre><code class="language-html"><!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。 <!DOCTYPE> 声明不是一个 HTML 标签;它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。 在 HTML 4.01 中,<!DOCTYPE> 声明需引用 DTD (文档类型声明),因为 HTML 4.01 是基于 SGML (Standard Generalized Markup Language 标准通用标记语言)。DTD 指定了标记语言的规则,确保了浏览器能够正确的渲染内容。 HTML5 不是基于 SGML,因此不要求引用 DTD。 </code></pre>

标签:便签,浏览器,标签,初识,HTML,文档,网页
From: https://www.cnblogs.com/lingstar/p/16739718.html

相关文章

  • FormData将HTML表单转换为formData表单对象
    FormData对象的作用模拟HTML表单,相当于将HTML表单映射成表单对象,自动将表单对象中的数据拼接成请求参数的格式。异步上传二进制文件FormData对象的使用<!DOCTYPEht......
  • 【开发小技巧】09—如何使用HTML和CSS将文字环绕在图片上?
    英文| https://www.geeksforgeeks.org/how-to-wrap-the-text-around-an-image-using-html-and-css/?ref=rp翻译|web前端开发(ID:web_qdkf)对于任何类型的网站,在文字周围包......
  • HTML&CSS-盒模型运用居中方式合集
    方法:定位,外边距,内边距,层级,边框;一个元素;两个元素;三个元素.<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatibl......
  • 1.Html
    ......
  • 狂神说HTML
    狂神说HTML什么是HTMLHyperTextMarkupLanguage(超文本标记语言)超文本包括文字、图片、音频、视频、动画等。HTML5优势:世界知名浏览器厂商对HTML5的支持、市场的需......
  • HTML——简介-入门
    W3C标准:网页主要由三部分组成结构:HTML表现:CSS行为:JavaScript HTML快速入门  1、新建文本文件,后缀改为.html  2、编写HTML结构标签(不区分大小写)     ......
  • 前端三件套 HTML+CSS+JS基础知识内容笔记
    HTML基础目录HTML基础HTML5标签doctype标签html标签head标签meta标签title标签body标签文本和超链接标签标题标签段落标签换行标签水平标签强调标签图片标签与超链接标签......
  • HTML怎么设置图片大小
    html插入图片有两种方式:一种是通过<img>标签插入的正常的图片,另一种是通过css样式插入的背景图片1、首先你是通过第二种方式插入的是背景图片,直接用width和height只能控制......
  • 02.HTML基础
    概述编译器HTML,实际上也是一个文本文件,专业的编辑器有NotePad++,能做到代码补全,错误提示注释HTML版本HTML4、HTML5只要在最上方有这行代码,网页就会用HTML5的形式来......
  • 【GUI视频教程】GUI综合实战视频教程第1期:综合UI项目规划以及AppWizard和ThreadX GUIX
    视频教程汇总帖:https://www.armbbs.cn/forum.php?mod=viewthread&tid=110519之前一直打算录制GUI视频教程,但是没有想好该如何录制,经过这段时间的考虑和网友的建议,准备做......