HTML基础

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> 分割线

<!--F**K THE WIRLD--> 这个是注释

超链接(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