HTML入门笔记1

291 阅读5分钟

本文目录:

  • HTML 的历史
  • HTML 的起手式
  • 常用的章节标签(h1~h6、section、article、main、aside 、header、footer)
  • 拥有全局属性的标签有哪些
  • 常用的内容标签(a、strong、em、pre、code 、列表)

HTML的历史

1990年左右,Tim Berners-Lee(蒂姆·伯纳斯·李)发明了万维网(亦作“WWW”英文全称为“World Wide Web”),同时发明了HTML、HTTP和URL。李爵士写了第一个浏览器,写了第一个服务器,并且用自己的浏览器访问了自己的服务器。

HTML的起手式

用VS Code打开你的HTML文件,在第一行输入!再按tab键即可书写你的HTML文件

常用的章节标签

  • <h1>~<h6>标题(Heading)元素呈现了六个不同的级别的标题,数值越大级别最高

  • <section>元素表示一个包含在HTML文档中的独立部分,它没有更具体的语义元素来表示,一般来说会有包含一个标题

  • article元素表示文档、页面、应用或网站中的独立结构,其意在成为可独立分配的或可复用的结构,如在发布中,它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件,或者其他独立的内容项目。其中class定义了它的样式

  • main元素呈现了文档的 <body>或应用的主体部分。主体部分由与文档直接相关,或者扩展于文档的中心主题、应用的主要功能部分的内容组成。

  • aside元素表示一个和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框(call-out boxes)。

  • header元素用于展示介绍性内容,通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素,但也可能包含其他元素,比如 Logo、搜索框、作者名称,等等。

  • footer元素表示最近一个章节内容或者根节点(sectioning root )元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

拥有全局属性的标签有哪些

全局属性的意思是任何标签都可以这个属性,常用有以下这些

  • class

MDN解释: 一个以空格分隔的元素的类名(classes )列表,它允许 CSS 和 Javascript 通过类选择器 (class selectors) 或DOM方法( document.getElementsByClassName)来选择和访问特定的元素

人话:用来加样式,样式可以用.xxx写出

  • contenteditable

MDN解释:一个枚举属性(enumerated attribute),表示元素是否可被用户编辑。 如果可以,浏览器会调整元素的部件(widget)以允许编辑。

人话:让用户直接编辑页面上的文字,让任何一个元素可以被编辑

  • hidden

MDN解释:布尔属性表示该元素尚未或不再相关。例如,它可用于隐藏在登录过程完成之前无法使用的页面元素。浏览器不会呈现此类元素。不得使用此属性隐藏可合法显示的内容

人话:快速让一个东西看不见

  • id

MDN解释:定义唯一标识符(ID),该标识符在整个文档中必须是唯一的。 其目的是在链接(使用片段标识符),脚本或样式(使用CSS)时标识元素

人话:定义了一个全文档唯一的标识符,不到万不得已不要使用ID,因为它不报错

  • style

MDN解释:含要应用于元素的CSS样式声明。 请注意,建议在单独的文件中定义样式。 该属性和``元素主要用于快速样式化,例如用于测试目的

人话:通常使用style访问CSS的属性列表。

  • tabindex

MDN解释:指示元素是否可以获取输入焦点(可聚焦),是否应该参与顺序键盘导航,如果是,则表示哪个位置

人话:用来控制tab的顺序,正数表示顺序访问,0表示最后访问,-1表示不要访问

  • title

MDN解释:包含表示与其所属元素相关信息的文本。 这些信息通常可以作为提示呈现给用户,但不是必须的。

人话:移到某个位置显示你想给用户呈现的内容

常用的内容标签(a、strong、em、pre、code 、列表)

  • <a>元素(或称锚元素)可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。
  • <strong>表示文本十分重要,一般用粗体显示
  • <em>标记出需要用户着重阅读的内容, <em> 元素是可以嵌套的,嵌套层次越深,则其包含的内容被认定为越需要着重阅读
  • <pre>保留里面的所有空格,回车,tab,默认样式不管几个都会缩成一个
  • <code>写代码用的,配合pre可以跟软件写的样式一样
  • <br>表示换行
  • <hr>表示水平分割线
  • 列表如下图演示