HTML基础

语言简介

HTML（Hypertext Markup Language, 超文本标记语言)，说白了就是网页的源码，包含、描述了网页中将要展示的文本、图片等信息，同时浏览器可以理解为这种格式的代码的编译器。因此HTML是学习网页设计要掌握的最基础知识（后续要掌握的知识有CSS、JavaScript）。本文旨在记录一些基础的语法，或者说元素。

基础知识

如果你打开一个网页，然后点选浏览器选项中的查看源码，那就会看到一坨带有<xxx>这种类似符号的代码，这种记号称之为tags，用来组织网页信息。<xxx yy="zz"> yy是xxx tag的一个属性（attributes），用来增加一些额外的信息，比如tags所包含文字的字体；“zz”是属性值，例如zz是字体名称。只有“true”和“false”两个值的属性（称为Boolean attributes）在只写属性名的时候默认值为true，不写该属性，其值默认为false。

基本tags

<html></html> 表示html的开始和结束，也就是所有代码都要放在这两个tags中间。<html lang="en-GB">lang属性表示网页的语言。

<head></head> 包含head section，其中的内容不在页面直接显示

<title></title> 在head section中，包含浏览器打开网页时的标签页名

<body></body> 包含body section，其中的内容在网页中直接显示

<!DOCTYPE html> 一般写在文档的最前面，用来告诉浏览器所用的代码版本是HTML5

<h1></h1>、<h2></h2> 包含标题，按数字分层

<p></p> 包含一个段落

<br> 换行符。这个tag不像上面几个那样是成对的，因为它不需要包含内容，这样的tag叫empty tag

<em></em> 被其包含的文字会显示斜体

<strong></strong> 被其包含的文字会显示粗体

<hr> 分割线

 这个是注释

超链接（hyperlinks）与多媒体

<a></a> 其中的文字或图片等会变成超链接。<a href="https://*****" target="_blank"> href属性为超链接所指路径或网址;target属性为打开新网页的方式，属性值“_blank”打开新标签页

<img src="" width="200" hight="135" alt="oops!"> 图片。src属性为图片的地址;alt为图片路径失效时显示的图片。通过tags的嵌套<a><img></a>可以实现将图片变成超链接

<iframe></iframe> inline frame,网页中的一个子网页或者说框架，利用YouTube可以实现视频的插入 <iframe width="200" hight="135" src="https://www.youtube.com/embed/****"></iframe>

<video src="" controls="true"> 插入视频的另一种方式。这里src是视频文件的地址；control为“true”时显示视频的播放和暂停按钮

<audio> 插入音频。用法与video类似

列表（list）与表格（table）

<ol></ol> 有序号的列表。type属性表示编号的类型，如默认为1.2.3.,值“A”表示按A.B.C.排列，其他属性值还有“a”，希腊字母“I”等；属性reversed表示是否编号按降序排列，是一个Boolean attributes

<ul></ul> 没有序号的列表

<li></li> 列表中的一项。嵌在ol或ul中

<table></table> 有行和列的表格。border属性值有“1”和“0”，表示是否加边框

<tr></tr> 表格中的一行。嵌在table tags中

<td></td> 一行中的一格。嵌在tr tags中

<th></th> 表头所占的一格。通常嵌在第一组tr中。属性colspan表示在这个标题下拆分多少列

###风格（style）
基本所有的tags（或者称为HTML element）都有一个style属性，用来设定大小、颜色等等，以达到美好效果，如<body style="background_color:gray">可以设定网页背景色。style的值称为style declaration，是用CSS格式写的。CSS是一种用来设计网页显示效果的语言，格式是property:value;，这里value是多个单词时，用单引号括起来。property除了背景颜色，还有文字颜色color、字体font-family、字体大小font-size(值为像素px或百分比%)、文字位置text-align（如值center使文字居中）
可以用<div></div>将代码块括起来，相当于在网页中圈了一块区域（section），然后用style属性对这块区域进行设计。而<span></span>可以用来截取文字中的一部分进行style