HTML标签

斌斌同学
374 阅读3分钟

HTML笔记

前言:

本篇文章会追根溯源的介绍一下HTML的发明者，以及常用的HTML标签，全局属性以及起手式.预计阅读时间10分钟。


HTML是谁发明的

李爵士帅照

HTML的首个公开描述出现于一个名为HTML Tags(是不是很简陋qwq)的文件中，由蒂姆·伯纳斯-李于1991年底提及。它描述18个元素，包括HTML初始的、相对简单的设计。除了超链接标签外，其他设计都深受CERN内部一个以标准通用标记语言（SGML）为基础的文件格式SGMLguid的影响。这些元素仍有11个存在于HTML 4中。

伯纳斯-李认为HTML是SGML的一个应用程序。1993年中期互联网工程任务组（IETF）发布首个HTML规范的提案：“超文本标记语言（HTML）”互联网草案，由伯纳斯-李与丹·康纳利撰写。其中包括一个SGML文档类型定义来定义语法。草案于6个月后过期，不过值得注意的是其对NCSA Mosaic浏览器嵌入在线图像的自定义标签的认可，这反映IETF把标准立足于成功原型的理念。同样，戴夫·拉格特在1993年末提出的与之竞争的互联网草案“HTML+（超文本标记格式）”建议规范已经实现的功能，如表格与填写表单。

----

HTML起手式

当我们在vscode中按住 shift+！会出现如下内容(除了注释以外2333)

<!-- 声名文档类型，告知浏览器以何种方式解析浏览器，以下是HTML5的声明类型，
这里用大写DOCtYPE 是用于区分标签，因为本质上它是一个指令-->

<!DOCTYPE html>

<!-- 所用的语言类型这里默认是英语，也可设置为 zh-CN -->
<html lang="en">

<head>
<!--charset用来指定网页的编码方式 字符编码UTF-8 防止乱码 -->
    <meta charset="UTF-8">

<!-- 调整视图窗口，页面缩放一比一还原比例 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- 网页的标题,会显示在标题栏,它对于网页在搜索排序的引擎有很大的影响 -->
    <title>Document</title>
</head>
<body>
    
</body>
</html>

标签说明:

  1. head   用于放置网页的数据,他的内容不会出现在网页上.只是为网页渲染提供额外的信息.

  2. html   一个网页只能有一个html标签,也称作根标签(root element）

  3. meta   用于设置网页的元数据,name属性表示元数据的名字,content为属性值

  4. body   容器标签,用于放置HTML主体内容,浏览器的内容都在body标签里面

  5. style   此外还可加入style标签,用于规定样式,他的标签位置与body同级.


常用HTML标签

表章节的标签

  1. h1~h6 定义标题 h1为最大,h2为最小
  2. section 章节标签,可以理解为section标签内部是一个独立部分
<h1>How to Fish</h1>
<section>
    <h2>Introduction</h2>
    <p>People have been catching fish for food since before recorded history…</p>
</section>

<section>
    <h2>Equipment</h2>
    <p>The first thing you’ll need is a fishing rod or pole that you find comfortable and is strong enough for the kind of fish you’re expecting to land…</p>
</section>
  1. article元素表示文档、页面、应用或网站中的独立结构
  2. main html的主要内容,主体部分
<header>Gecko facts</header>
<!-- 屏幕阅读器，如 JAWS，当与较旧版本的 Internet Explorer 一起使用时，需包括此 role 属性才能理解 <main> 元素的语义含义 -->
<main role="main">
    <p>Geckos are a group of usually small, usually nocturnal lizards. They are found on every continent except Australia.</p>
 
    <p>Many species of gecko have adhesive toe pads which enable them to climb walls and even windows.</p>
</main>
  1. aside 傍边的次要内容.

全局属性

  1. class 类名
  2. id 唯一的id值,不到万不得已不用id值,因为在html有两个相同的id不会报错. 小技巧:可以在js中直接调用(例如id为x):
<!-- js文件,id名称不能是关键或者保留字会造成效果不起效 -->
x.style.color = "red"
  1. tabindex 当按tab键停留在当前元素,接收的值为数字,当tabindex=0是最后一个访问到,当tabindex=-1 无法用tab键访问到.
  2. contenteditable 直接在页面上可以编辑! 可以亲自试一下!
<cite contenteditable="true">-- Write your own name here</cite>
  1. title 鼠标悬浮上去显示的当前内容.

常用的标签

  1. a标签,超链接,也可以用于跳转页面,它的英文单词是[anchor]
  2. strong和em,两者之间有语义上的差别,em是emphasize的缩写,它本身含义强调的是语气上的重读. 而strong强调的是,意义非常重要.
  3. pre 以等宽字体形式显现,可以保存空格和换行.默认情况下 打n个空格,只能保留一个空格显示.
   <pre>
        你          
        好     啊
   </pre>
avatar
文章
阅读
粉丝