Web前端基础【1】--HTML基础
Web前端基础【1】--HTML基础
HTML不是编程语言，是一种表现网页信息的符号标记语言。标记语言是一套标记，HTML使用标记来描述网页。Web浏览器的作用就是读取HTML文档，并以网页的形式显示出来。
一：HTML的基本结构
1：<html>内容</html>:HTML文档由<html></html>包裹，这是HTML文档的文档标记。这对标记分别位于网页的最前端和最后端。
2：<head>内容</head>: HTML头标记，用来包含文件的基本信息，比如网页的标题、关键字等，在<head></head>内可以放<title></title>、<meta></meta>、<style></style>等标记。 在<head></head>标记的内容不会在浏览器中显示。
3：<title>内容</title>：HTML文件标题标记。网页的“主题”
4：<body>内容</body>：<body>......</body>是网页的主体部分，在此标记中可以包含<p></p>、<h1></h1>、<br></br>等标记。
5：<meta>内容</meta>：页面的元信息。注意meta标记必须放在head元素里面。
下面以百度首页的页面作为示例：
二：格式标记
1：<br>：换行标记，让后面的信息显示在下一行
2：<p>：段落标记
3：<center>：居中标记，让段落或者文字相对于父标记居中显示
4：<pre>：预格式化标记
5：<li> ：列表项目标记，每一个列表使用一个<li>标记
6：<ul>：无序列表标记
7：<ol>：有序列表标记
8：<hr>：水平分割线标记
9：<div>：分区显示标记，也称为层标记
10：<!--->：注释标记，定义注释。
三：文本标记
1：<h1>-----<h6>：标题标记，h1最大，h6最小。
2：<font>：字体设置标记。用来设置字体的格式，一般有三个属性：size（字体大小）；color（字体颜色）；face（字体）
3：<b>：粗字体标记
4：<i>：斜字体标记
5：<sub>：文字下标字体标记
6：<sup>：文字上标字体标记
7：<tt>：打印机字体标记
8：<cite>：引用方式的字体，通常是斜体
9：<em>：表示强调，通常是斜体字
10：<strong>：表示强调，通常是粗体字
11：<big>：大型字体标记
12：<small>：小型字体标记
13：<u>：下划线字体标记
四：图像标记
<img>称为图像标记，用来在网页中显示图像。使用方法：<img src=''路径/文件名.图片格式"width="属性值"height="属性值"border="属性值"alt="属性值">
<img>标记主要有以下属性：
1：src属性指定我们要加载的图片的路径，图片的名称以及图片的格式
2：width属性指定图片的宽度
3：height属性指定图片的高度
4：border属性指定图片的边框宽度
5：alt属性有两个作用：
① 如果图像加载失败，会用文字来代替图像显示。
② 搜索引擎可以通过这个属性的文字来抓取图片。
注意：<img>是单标记，不需要使用</img>来闭合
五：超链接的使用
链接的引用使用的是<a>标记。<a>标记的基本语法：<a href="链接地址"target="打开方式"name="页面锚点名称">链接文字或图片</a>
<a>标记主要有以下几个属性：
1：href属性值是链接的地址。
2：target属性用来定义打开链接的方式。当属性值为"-blank"时，作用是在一个新的窗口打开链接；当属性值为"_self"时，作用是在当前窗口打开链接；当属性值为"_parent"时，作用是在父窗口打开链接；当属性值为"_top"时，在顶层窗口打开链接。
3：name属性用来指定页面的锚点名称。
六：表格
表格的基本结构包括<table>、<caption>、<tr>、<td>、<th>等标记
1：<table>标记有以下属性
① width属性：表示表格的宽度
② height属性：表示表格的高度
③ border属性：表示表格外边框的宽度
④ align属性表示表格的显示位置：left居左显示；center居中显示；right居右 显示。
⑤ cellspacing属性：单元格之间的间距
⑥ cellpadding属性：单元格内容与边框的显示距离
⑦ frame属性：控制表格边框外层的四条线框
⑧ rules属性：控制显示单元格之间的分割线
2：<caption>标记用于表格中使用标题
<caption>标记的align属性有四个取值：
① top表示标题放在表格的上部
② bottom表示标题放在表格的下部
③ left表示标题放在表格的左部
④ right表示标题放在表格的右部
3：<tr>标记用来定义表格的行，对于每一个表格行，都是由一对<tr>...</tr>标记表示。<tr>标记有如下几种属性
① bgcolor属性用来设置背景颜色
② align属性用来设置垂直方向对齐方式
③ valign属性用来设置水平方向对齐方式
4：<td>和<th>都是单元格的标记，其必须嵌套在<tr>标记中，成对出现。<th>是表头标记，<th>中的文字会被默认加粗，而<td>不会，<td>是数据标记，表示该单元格的具体数据。两者的标记属性是一样的：
① bgcolor属性用来设置背景颜色
② align属性用来设置垂直方向对齐方式
③ valign属性用来设置水平方向对齐方式
④ width属性用来设置表格的宽度
⑤ height属性用来设置表格的高度
⑦ rowspan设置单元格所占行数
⑧ colspan设置单元格所占列数
每天学习一点点，每天进步一点点。