HTML 笔记

214 阅读6分钟

什么是 HTML

  • HTML 的全程是HyperText Markup Language,译为超文本标记语言

  • HTML 不是一门编程语言,而是用来告诉浏览器如何组织页面的标记语言;

  • HTML的发明者是 Tim Berners-Lee 中译名 伯纳斯-李,同时也是**万维网(www)**的发明者


如何使用HTML?

下面是一个 HTML 文件所需要包含的基本标签

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<title>网页的标题</title>
	</head>
	<body>
	</body>
</html>

<!DOCTYPE html>是文档声明,告诉浏览器这是一个HTML文档,这个写法是最新的HTML5 支持的缩写;

<html></html>是一个根元素,它包含HTML页面中的所有元素,lang="zh-CN"是告诉浏览器这是一个什么语言的页面,默认是en,意思是:英文,国际化,zh-CN是简体中文的意思

<head></head>这个元素是一个容器,它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容

例如页面的关键字、描述字符集声明等;

<meta />元数据标签,charset="UTF-8"的意思是,这个文件的编码格式是以UTF-8编码的,UTF-8又称万国码,它基本包含地球上所有国家的语言;

<title></title>是用来设置页面标题的标签,就是我们在浏览器最上面的标签页上显示的文字,当我们 标记/收藏 时可以用来描述页面;

<body></body>,包含了我们访问这个页面时显示的所有内容,文本,图片,音视频等等;


常用的表示章节的标签

  • 表示标题 h1~h6
<h1>一级标题 -> 默认字体大小是 2em ,粗体</h1>
<h2>二级标题 -> 默认字体大小是 1.5em ,粗体</h2>
<h3>三级标题 -> 默认字体大小是 1.17em ,粗体</h3>
<h4>四级标题 -> 默认字体大小为正常文本大小 ,粗体</h4>
<h5>五级标题 -> 默认字体大小是 0.83em ,粗体</h5>
<h6>六级标题 -> 默认字体大小是 0.67em ,粗体</h6>

我们因为它的默认样式并不好看,而且是以 em 为单位,不方便控制,所有我们一般会在初始化 CSS 样式的时候把这些标签的字体大小什么的都统一重置,按需调整;

  • 表示章节 section
<section>
	<h3>这是第一章的标题</h3>
	<p>这是第一章的内容</p>
</section>

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

  • 定义外部内容 article
<article>
	<p>
		这是一大段话,巴拉巴拉...
	<p>
</article>

表示文档、页面、应用或网站中的独立结构,其意在成为可独立分配的或可复用的结构;

  • 表示页面的主体内容 main
<main>
    <P>我是页面的主体内容</p>
</main>

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

  • aside
<aside>
	<h3>我是标题</h3>
	<p>
		我是文本
	</p>
</aside>

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


常用的全局属性有哪些?

  • 全局属性是所有HTML元素共有的属性; 它们可以用于所有元素,即使属性可能对某些元素不起作用;

  • id 类似人类世界的身份证,原则上一个页面上只能有一个id,但事实上即使页面上有多个标签使用同一个id值,浏览器也不会向我们报错,在 CSS 文件中使用 # 选择含有id的元素

<body>
	<div id="Hello">123</div>
	<div id="Hello">1234</div>
	<p id="Hello">12345</p>
</body>
  • class 类选择器,用于选择多个标签(不一定非要是同类标签),class 属性不能在以下HTML元素中使用:base、head、html、meat、param、script、style 以及 title,我门可以在CSS文件中使用 .来操作含有 class 的元素
<style>
	.Hello{
		background-color: red;    /*意思是让标签的背景色变成 红色 */
	}
</style>
<body>
	<div class="Hello">我们是包含 class 标签</div>
	<div class="Hello">我们是包含 class 标签</div>
</body>
  • style属性,给元素添加行内样式,优先级最高将会覆盖任何全局的样式设定,**JavaScript 除外,但 `JavaScript其实也是通过给标签添加行内样式来改变标签的样式```
<style>
	#a{ background-color=red; }
	.b{ background-color=blue; }
</style>
<div id="a" class="b" style="background-color=gray"></div>
  • title 将光标放在含有 title 的标签上,光标旁边会出现一个小文本,文本的值就是title的内容
<div title="你好,世界!">Hello World</div>

常用的内容标签

内容标签也就是文本标签,下面这些出现的频率比较高

  • 锚链接<a></a>
<a>我是a标签,可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接</a>
  • 段落标签<p></p>
<p>我是段落标签,我默认是块级元素,也就是 display:block</p>
  • 文本标签span
<span>我常用来代表一段没有任何含义的文本</span>
  • 强调文字 <em></em>
<em>用来强调包裹的文字,默认样式会倾斜,建议在CSS初始化时取消</em>
  • 代表特别重要的文字,更强烈的强调<strong><strong>
<strong>我的强调等级会高一些,因为我的默认样式会加粗文本</strong>
  • 文本下划线<u></u>
<u>被我包裹的文本都会出现下划线</u>

学习笔记,只记了一点,以后补充