以下是初学html所作笔记,记录了一些常用的html标签,以备日后复习
HTML是谁发明的
HTML的首个公开描述出现于一个名为“HTML标签”的文件中,由蒂姆·伯纳斯-李于1991年底提及。它描述18个元素,包括HTML初始的、相对简单的设计。除了超链接标签外,其他设计都深受CERN内部一个以标准通用标记语言(SGML)为基础的文件格式SGMLguid的影响。这些元素在HTML 4中仍有11个存在。
资料来源于维基百科
HTML起手式
HTML最基本的起手式是:输入 英文字符 !,随后tab。会出现以下代码:
<!DOCTYPE html>/*确定文档类型为html*/
<html lang="en">/*将语言改为'zh-CN'*/
<head>
<meta charset="UTF-8">/*UTF-8为字符编码*/
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
常用的表章节的标签
- 章节元素
- section
表示一个包含在HTML文档中的独立部分,它没有更具体的语义元素来表示,一般来说会有包含一个标题。
<section>
<h1>xx</h1>
<p>xxxx</p>
</section>
2.article
```html
表示文档、页面、应用或网站中的独立结构,其意在成为可独立分配的或可复用的结构。如果元素的内容作为一个独立的有意义的集合,article元素可能是比section更好的选择。
<article class="demo1">
<h1>xx</h1>
<article class="demo2">
<h2>xxx</h2>
<p>xxx</p>
</article>
- 主体内容main
呈现了文档的 <body> 或应用的主体部分。主体部分由与文档直接相关,或者扩展于文档的中心主题、应用的主要功能部分的内容组成。
<header>xxx</header>
<main >
<p>xx</p>
<p>xxx</p>
</main>
```html
* 旁支内容aside
表示一个和其余页面内容几乎无关的部分,比如参考资料等。
<aside>
<p>资料来源:xxx</p>
</aside>
- 标题元素h1~h6
以标题的形式来显示文本内容
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
【特点】
- 改变字号(一级最大,六级最小)
- 加粗显示
- 上下有垂直的空白距离
- 独立成行
全局属性
- class
为元素设置类标识
<tag class="xx">
设置样式
<style>
.xx{}
</style>
- contenteditable
设置文档为可标记状态
该属性必须是下面的值之一:
1. true 或空字符串,表示元素是可编辑的;
2. false 表示元素不是可编辑的。
如果没有设置该属性,其默认值继承自父元素。
可以通过该属性使得文档属性被用户直接编辑:
<style contenteditable="true">
body {
background: #eee;
padding: 0;
margin: 0;
}
</style>
- hidden
表示一个元素是否显示。
浏览器不会render该属性为true的元素
- id
用法与class相同,但不推荐使用。
id必须是全局唯一的属性,但当他不唯一时也不会报错。
- style
包含文档的样式信息或者文档的部分内容。
默认情况下,该标签的样式信息通常是[CSS]的格式。
- tabindex
是指该元素是否可以及在何处参与tab导航。
1. tabindex=-1,表示不可以被tab访问。
2. tabindex=0,表示最后被tab访问。
3. tabindex=正数,按顺序被tab访问。
- title
鼠标放上去后会显示完整内容。
常用的内容标签
- a
<a></a>
href:链接地址(要跳转到的页面的地址)
target:目标,打开新网页的形式
取值:
_blank:在新标签页中打开
_self:在自身页面中打开(默认值)
title:鼠标放到链接上的提示
- strong
Strong 元素 (<strong>)表示文本十分重要,一般用粗体显示。
- em
标记出需要用户着重阅读的内容。
<em> 元素是可以嵌套的,嵌套层次越深,则其包含的内容被认定为越需要着重阅读。
对比strong,em是语气上的强调,strong是内容上的强调。
- code
表示这是一段计算机代码。默认情况下, 它以浏览器的默认等宽字体显示。
- pre
pre元素表示预定义格式文本。
在该元素中的文本通常按照原文件中的编排,以等宽字体的形式展现出来,文本中的空白符(比如空格和换行符)都会显示出来。
(紧跟在 <pre> 开始标签后的换行符也会被省略)