前端学习之旅-HTML基础篇
一、HTML简介
HTML为超文本语言,它是万维网描述网页内容与外观的标准,它由一系列标签组成,标签中包含有属性和值。标签描述了每个网页上的组件,例如文本段落,表格,图像等等。
二、HTML标签
2.1 < html > < head > < body >标签
(1)html标签:
用于界定一个完整的HTML文档
<html>
//包含<head>,<body>,<frameset>等标签
</html>
(2)head标签:
用于加载一些重要的内容,如一些插件,组件,框架等内容的云端地址以及网站的标题,内容不会被页面显示, 只有<body>
的内容才会被显示到界面上。
① title标签:
用于说明页面用途,在HTML文档中,标题信息设置在页面的头部,即<head>
与</head>
之间。
<html>
<head>
<title>title标签</title>
</head>
<body>
</body>
</html>
② meta元信息标签:
<meta>
标签提供的信息是用户不可见的,一般用来定义页面信息的名称、关键字、作者等等,< meta >标签的属性有:name和http-equiv两种,name属性主要用于描述网页,供搜索引擎使用。
(3)body标签:用于界定文档主体。
< body >标签的常见属性如下:
属性 | 说明 |
---|---|
text | 设置页面文字颜色属性 |
bgcolor | 设置页面背景颜色属性 |
link | 设置页面默认超链接颜色属性 |
alink | 设置鼠标单击时超链接颜色 |
vlink | 设置访问过的超链接颜色 |
background | 设置页面背景图片 |
bgproperties | 设置背景图片固定 |
topmargin | 设置页面上边距 |
leftmargin | 设置页面左边距 |
bottommargin | 设置页面下边距 |
rightmargin | 设置页面右边距 |
2.2 文字与段落
(1)hn标签:<hn>
为标题标签,n为标题的等级,HTML共提供6个等级的标题,字体大小依次减小。
<h1>第一级标题</h1>
<h2>第二级标题</h2>
<h3>第三级标题</h3>
<h4>第四级标题</h4>
<h5>第五级标题</h5>
<h6>第六级标题</h6>
(2)br标签:
<br>
为换行标签
(3)font标签:
<font>
为字体标签,用face属性来实现对字体的定义;
设置face属性的方法如<font face="宋体" size="5" color="#FF0000">
常见的< font >相关标签如下:
属性 | 说明 |
---|---|
< b >…< /b > | 粗体 |
< i >…< /i > | 斜体 |
< u >…< /u > | 加下划线 |
< em >…< /em > | 强调,斜体 |
< strong >…< /strong > | 强调,粗体 |
< sup >…< /sup > | 上标 |
< sub >…< /sub > | 下标 |
< strike >…< /strike > | 删除线 |
(4)p标签:
<p>
标签为段落标签,用于使排列整齐,清晰,明了。
常见的< p >相关标签属性及说明如下:
属性 | 说明 |
---|---|
align | 段落对齐方式 |
class | 样式调用 |
style | 行内样式信息 |
id | 文档的识别标识 |
title | 标题 |
dir | 文字方向 |
(5)hr标签:
<hr>
标签为水平线标签,只能单独使用
常见的< hr >相关标签属性及说明如下:
属性 | 说明 |
---|---|
size | 设置粗细 |
width | 设置宽度 |
align | 设置对齐方式 |
color | 设置颜色 |
noshade | 设置3D阴影 |
2.3 < img >标签
<img>
标签为单标签,用于描述图片
常见的< img >相关标签属性及说明如下:
属性 | 说明 |
---|---|
src | 图像的URL路径 |
alt | 提示文字 |
align | 对齐方式 |
width | 设置宽度 |
height | 设置高度 |
border | 边框 |
vspace | 垂直间距,定义图像顶端和底部的空白 |
hspace | 水平间距,定义图像左侧和右侧的空白 |
2.4 页面布局
(1)列表
① ul 无序列表标签:
无序列表是指没有进行编号的列表,每一个列表项前使用<li>
标签。
<li>
标签的属性type如下
属性 | 说明 |
---|---|
type=“disc” | 实心圆 |
type=“circle” | 空心圆 |
type=“square” | 小方块 |
基本语法:
<ul>
<li type="circle">第一项</li>
<li type="square">第二项<li>
</ul>
② ol 有序列表标签:
有序列表是有进行编号的列表,每一个列表项前使用<li>
标签。
有序列表type的属性如下
属性 | 说明 |
---|---|
type=1 | 列表项(1 2 3…) |
type=A | 列表项(A B C…) |
type=a | 列表项(a b c…) |
基本语法:
<ol type=编号类型 start=value>
<li>第一项</li>
<li>第二项</li>
(2)定义列表标签< dl > < dt > < dd >
"定义列表标签"用于对术语的定义,定义列表由< dl >开始,术语由< dt >开始,术语的解释说明由< dd >开始。
基本语法:
<dl>
<dt>第一项</dt><dd>注释1</dd>
<dt>第二项</dt><dd>注释2</dd>
</dl>
2.5 表格
(1) 定义表格的基本语法:
一般通过三个标签来构建表格,
分别是行标签< tr >,表格标签< table >和单元格标签< td >
属性 | 说明 |
---|---|
< tr >…< /tr > | 定义行,一个tr标签里面可以包含多个td标签 |
< td>…< /td > | 定义单元格,td标签必须放在tr标签内 |
< table >…< /table > | 用于定义一个表格的开始和约束 |
(2) < table >标签的常用属性:
属性 | 说明 |
---|---|
align | 表格在页面中的水平对齐方式 |
width | 设置表格宽度 |
height | 设置表格高度 |
background | 设置表格背景 |
bgcolor | 设置表格背景颜色 |
border | 设置表格边框的宽度 |
bordercolor | 设置表格边框颜色 |
cellspacing | 设置单元格间距 |
cellspadding | 设置单元格内容与单元格边界之间的距离 |
(3) :表格标题标签< caption >
表格标题标签< caption >用于设置表格的标题,属性及位置,
(4) :表格表头标签< th >
表格表头标签< th >用于设置表格的第一行,与< td >不同之处是标签中的内容居中加粗显示。
(5) :表格边框显示状态
表格边框(上下左右)显示状况用frame属性的值定义
frame的值 | 说明 |
---|---|
box | 显示整个表格边框 |
void | 不显示表格边框 |
hsides | 只显示表格上下边框 |
vsides | 只显示表格左右边框 |
alove | 只显示表格上边框 |
below | 只显示表格下边框 |
lhs | 只显示表格左边框 |
rhs | 只显示表格右边框 |
(6) :表格分割线显示状态
表格内的分割线显示状况用rules属性的值定义
rules的值 | 说明 |
---|---|
all | 显示全部分割线 |
groups | 显示组与组的分割线 |
rows | 显示行与行的分割线 |
cols | 显示列与列的分割线 |
none | 不显示所有分割线 |
(7) :表格行的设置
< tr >标签的属性如下
tr标签属性 | 说明 |
---|---|
align | 行内容的对齐方式 |
valign | 行内容的垂直对齐方式 |
bgcolor | 行的背景颜色 |
bordercolor | 行的边框颜色 |
(8) :单元格的设置
使用< th > < td >标签可以完成单元格的插入,这两个标签必须嵌套在< tr >标签内,< th > < td >标签的常见属性不过多解释,下面介绍两个不常用的单元格设置方法,
具体使用方法如:<th colspan=2>
,表示这一格跨越两个行的高度。
< th >< td >标签属性 | 说明 |
---|---|
colspan | 单元格向右横跨的列数 |
rowspan | 单元格向下横跨的行数 |
2.6 超链接的使用
(1) 概念:
超链接就是从一个网页跳转到另外一个网站的途径。
(2) 基本语法
<a href="链接地址" target="窗口名称" title="链接提示文字">超链接名称</a>
target属性值如下
target值 | 说明 |
---|---|
_parent | 在当前框架的父层打开链接 |
_blank | 使用一个全新的空白窗口打开链接 |
_self | 默认方式,在当前窗口打开链接 |
_top | 在顶层框架中打开链接 |