HTML入门笔记1

7,404 阅读3分钟

HTML入门笔记1

这是我的HTML内容学习笔记

HTML谁发明的

李爵士,Tim Berners-Lee

他是万维网的发明者,南安普顿大学与麻省理工学院教授。1990年12月25日罗伯特·卡里奥在CERN和他一起成功通过Internet实现了HTTP代理与服务器的第一次通讯。万维网联盟(W3C)是伯纳斯·李为关注万维网发展而创办的组织,并担任万维网联盟的主席。他也是万维网基金会的创办人。伯纳斯-李还是麻省理工学院计算机科学及人工智能实验室创办主席及高级研究员。同时,伯纳斯-李是网页科学研究倡议会的总监。最后,他是麻省理工学院集体智能中心咨询委员会成员。

HTML起手式

打开Vscode新建.html文件,使用!+tab键会自动生成:

<!DOCTYPE html> <!--文档类型-->
<html lang="en"><!--html标签,en英语,zh-CN表示中文,根据不同情况进行修改-->
<head>
    <meta charset="UTF-8"><!--文件字符编码-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--告诉ie使用最新内核-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"><!--禁用缩放 兼容手机-->
    <title>Document</title><!--标题-->
</head>
<body>
    
</body>
</html>

注意小圆点表示代码未保存,要常按ctrl+s

常用的表章节的标签

  • 表示文章/书的层级
  1. 标题 (h1~h6):分别是一级标题到六级标题
  2. 章节(section):标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分
  3. 段落(p):标记一个段落,也被称为HTML段落元素,该元素通常表现为一整块与相邻文本分离的文本,或以垂直的空白隔离或以首行缩进。
  4. 头部(header):标签用于定义文档的头部,它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
  5. 脚步(footer):页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。 您可以在一个文档中使用多个 元素。
  6. 主要内容(main):元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容,比如侧栏、导航栏、版权信息、站点标志或搜索表单。
  7. 旁支内容(aside):标签定义其所处内容之外的内容。
  8. 划分(div):标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联,如果用 id 或 class 来标记
    ,那么该标签的作用会变得更加有效。

常用的全局属性

属性作用
class类名列表
contenteditable可以让所有元素可编辑
hidden隐藏,比display:block优先级高,不过可以在CSS中挽回
id唯一标识
style样式
tabindex被tab访问的优先级,0表示最后访问,-1表示不可被访问
title标题(被隐藏的大段文字)

常用的内容标签

  • ol+li:有序列表
<ol>
 <li>篮球</li>
 <li>足球</li>
 <li>羽毛球</li>
</ol>
  • ul+li:无序列表
<ul>
 <li>篮球</li>
 <li>足球</li>
 <li>羽毛球</li>
</ul>
  • dl+dt+dd:描述性列表
<dl>
  <dt>关注我们</dt>
  <dd>新浪微博</dd>
  <dd>官方微信</dd>
  <dd>抖音</dd>
</dl>
  • pre:文本中的空白符
    <h1> <pre> 这是我       写的博客</pre></h1>
    
  • hr:水平割线
<h1>This is header 1</h1>
<hr />
<p>This is some text</p>
  • br:换行
  • a:链接
   <a href="http://www.jirengu.com">饥人谷</a>
  • em:把文本定义为强调的内容。

  • strong:把文本定义为语气更强的强调的内容。

  • code:代码中的字母等宽

  • quote:内联引用

  • blockquote:块级引用