HTML 学习日记1

209 阅读5分钟

HTML起源

HTML全称是超文本标记语言(Hyper Text Markup Language),是由W3C(万维网联盟) 维护的一种用于创建网页的标准标记语言。通常与CSS、JavaScript一起用于设计多样化 的网页。自1990年由Tim Berners-Lee创建至今。

HTML的基本格式

<!--文档的类型 让浏览器知道你写的是html类文档-->
<!DOCTYPE html> 
<!--html使用的语言为英文一般改为中文<html lang=”zh-CN”>-->                  
<html lang="en">              
<head>
    <!-- meta标签用于表示元数据信息,有name、http-equiv、charset、itemprop属性-->   
    <!--文件的字符编码通常使用UTF-8,而不是GBK-->               
    <meta charset="UTF-8">             
	<!--用于设置视口,禁用缩放--> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <!--标题-->
	<title>Document</title>                    
</head>                        
<!--页面的头部-->
<body>                             
<!-- 页面的正文部分 -->
</body>
</html>

常见的表章节标签

  • h1-h6

呈现了六个不同的级别的标题,<h1>级别最高,而 <h6>级别最低。

  • section

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

  • aritcle

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

  • main

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

  • aside

表示一个和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。

  • footer

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

  • header

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

  • div

是一个通用型的流内容容器,在不使用CSS的情况下,其对内容或布局没有任何影响。

全局属性

  • id

定义唯一标识符(ID),该标识符在整个文档中必须是唯一的。 其目的是在链接(使用片段标识符),脚本或样式(使用CSS)时标识元素。 (注:不到万不得已不使用,使用class属性代替)

  • class

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

  • contenteditable

一个枚举属性(enumerated attribute),表示元素是否可被用户编辑。 如果可以,浏览器会调整元素的部件(widget)以允许编辑。(注:可以配合显示上style属性,在页面内修改style进行调试)

  • hidden

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

  • style

含要应用于元素的CSS样式声明。 请注意,建议在单独的文件中定义样式。 该属性主要用于快速样式化,例如用于测试目的。 (注:样式一般不放在标签属性中,通常使用标签使用css样式)

  • tabindex

整数属性,指示元素是否可以获取输入焦点(可聚焦),是否应该参与顺序键盘导航,如果是,则表示哪个位置。 (注:值可取正负整数,负值表示不可通过Tap键聚焦。0表示可以通过Tap键聚焦,但是位于末尾。正值的Tap键聚焦顺序按tabindex的顺序,如果有多个相同的tabindex,按文档相对位置聚焦)

  • title

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

常用的内容标签

  • ol + li

oreder list,有序列表

  • ul + li

unordered list,无顺序列表

  • li

list item,列表中的一项 (注所有列表下一级不能包含除li之外的子元素)

  • dl + dt +dd

description list,描述列表

  • pre

html会把多个连续的空白缩成一个空格,被pre包裹的代码块内可以正确显示代码块内的换行和空白

  • hr

示段落级元素之间的主题转换(例如,一个故事中的场景的改变,或一个章节的主题的改变)。

  • br

在文本中生成一个换行(回车)符号。此元素在写诗和地址时很有用,这些地方的换行都非常重要。

  • a

创建一个到其他网页,文件,同一页面内的位置,电子邮件地址或任何其他URL的超链接。

  • em

标记出需要用户着重阅读的内容, 元素是可以嵌套的,嵌套层次越深,则其包含的内容被认定为越需要着重阅读。请注意: 通常地,该元素会被浏览器展示为斜体,强调语气很重要。

  • strong

表示文本十分重要,一般用粗体显示。强调内容很重要。

  • code

呈现一段计算机代码. 默认情况下, 它以浏览器的默认等宽字体显示.

  • blockquote

代表其中的文字是引用内容。通常在渲染时,这部分的内容会有一定的缩进(注 中说明了如何更改)。若引文来源于网络,则可以将原内容的出处 URL 地址设置到 cite 特性上,若要以文本的形式告知读者引文的出处时,可以通过 元素。


参考资料

MDN

2021-04-01