HTML入门笔记1

68 阅读5分钟

1. 概述

1.1 HTML的起源

  说到HTML的历史,此时我们不得不说一个人,蒂姆·伯纳斯·李 [1]  (Tim Berners-Lee),这个人他就是万维网的发明者。

1.2 HTML的概念

  HTML 的全名就是“超文本标记语言”(HyperText Markup Language),通过和CSS与JavaScript配合使用,就构成了目前网页开发的所涉及的技术,其中HTML主要充当的角色就是相当于框架,用于定义网页的结构与内容,CSS主要就是用来对HTML所编写的内容进行修饰的作用。JavaScript主要就是用于完成交互功能的。先放一个HTML的基本起手式。

<!DOCTYPE html>
 <html lang="zh-CN">
 <head>
   <meta charset="utf-8">
   <title>网页标题</title>
 </head>
 <body>
   <p>您好</p>
 </body>
 </html>

<!DOCTYPE html>用于表明文档的类型,告诉浏览器如何解析网页。
<html lang="zh-CN">该标签中的lang属性,表示网页内容默认的语言。其中zh-CN标识的是中文,如果是英文可以将lang的属性值换成en即可。
<head></head> head标签是一个容器标签,用于放置网页的元信息.其中的内容并不会出现在网页中。
<meta charset="utf-8"> 标签用于设置或说明网页的元数据,必须在head标签中,可以有多个。此代码的含义是表示网页采用 UTF-8 格式编码。为什么选择这个编码呢,因为这个编码是支持全人类的语言的。
<title>网页标题</title> title标签是用来表明网页的标题,会显示在网页的地址栏中。代码中的网页标题就是此次代码的网页的标题。
<body></body> body标签是一个容器标签,用于放置网页的主体内容,网页的显示页面的内容都是在此标签中进行编写的。其中的<p></p>标签中的您好可以在此代码运行之后显示在网页中的。P标签也就是文本标签。可以放置一些文本内容。

2. 一些常用的标签的详解

2.1 一些常见的标签

<h1>~<h6> 标题标签,其中数字越小,代表的级别越高。其中<h1><h1/>表示的就是一级标题,而一级标题中又可以出现多个二级标题等。
section标签表示一个含有主题的独立部分,通常用在文档里面表示一个章节.比如<article>标签里面就可以出现多个<section>标签。
article 标签通常用于文章
p 此标签表示段落,可以是文本,也可以是图片等。另外此标签也是块级元素
header 此标签表示的是头部,既可以表示整个网页的头部,也可以表示一篇文章的头部。其中header 标签里面不重复出现header标签也不能出现footer标签
footer 标签表示网页、文章或章节的尾部。
main标签表示页面的主体内容,一个页面只能有一个main。通常情况下main是顶层标签,是不可以放置在headerfooteraside等标签中的
aside标签用来放置与网页或文章主要内容间接相关的部分。例如可以放侧边栏,或者文章中的补充信息等。
div 该标签没有其他的含义,仅是一个块级元素。

2.2 全局属性

class该属性用来对网页元素进行分类,其中class的值可以在不同的元素中重复,表示的就是这些元素是一类的。一个元素也可以具有多个class值,中间使用空格隔开即可。
contenteditable 默认的情况下网页上面的内容用户是无法进行修改,但是当给元素此属性之后,元素就可以在页面上显示,用于就可以对元素的属性值进行修改。
hidden 当页面上的元素给此属性之后,该元素就在页面上面不显示,被隐藏了。
id 属性是元素在网页内的唯一标识符,但是如果出现两个元素的id属性值都相同,可能不报错。
style 属性用来指定当前元素的 CSS 样式。
tabindex 有些情况下用户可能会使用键盘来进行切换到网页中的不同的元素所产生的效果上,当给元素设置此属性之后,如果属性值是正整数网页元素按照从小到大的顺序进行遍历。如果属性值是0,那么被设置为属性值为0的元素在遍历的时候顺序将是最后一个,如果属性值被设置为负整数,那么在遍历的时候就不会被遍历到。
title 该属性用来给元素添加一些说明,当鼠标悬停在设置了该属性的元素的时候,那么会显示所设置的该属性的值。

2.3一些常用的内容标签

ol+li该标签的作用是形成有序列表。
ul+li该标签的作用是形成无序列表。
dl+dt+dd该标签的作用是形成描述列表,其中dt中放的是需要描述的对象,dd中放的是描述的内容。
pre一般情况下当在编辑器中输入多个空格或者回车时都会被编辑器识别成为一个空格,使用该标签就可以使得标签内的多个空格和回车生效。
hr水平线标签。
br换行标签。
a链接标签。其中target属性值如果是_blank浏览器就会在新窗口打开,如果是_self,就会在当前界面打开。
emem 表示语气上的强调。
strongstrong 表示内容本身的重要性。
code行内元素,表示标签的内容是代码,浏览器在默认的情况下会以等宽字体显示。
q- 行内引用。
blockquote- 块内引用。