一、前言
在开始接触前端网页开发了一段时间后,我对web网页设计有了一定的了解。首先我了解到HTML是一种标记语言,包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的 Internet资源连接为一个逻辑整体。下面是我对HTML学习的一些总结。
1、简介
HTML全称为HyperText Markup Language,是一种超文本标记语言。它包括了一系列的标签,如body、head、title、p、img、a、div、span、ol、table等,通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。
2、HTML格式
一个HTML元素主要包括开始标签、结束标签、内容、元素。如下图所示
实际上一个完整的HTML格式是由很多的标签所构成,下面为一个较简单的HTML文件:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>页面标题</title>
</head>
<body>
<h1>我的第一个Web页</h1>
<p>当前有点丑:)</p>
</body>
</html>
注:在HTML中这些标签大都是成对出现的。
二、基础元素简介
以上述HTML文件为例:
- :是一个声明文档类型,可有可无的存在。
- :这个元素包裹了整个完整的页面,是一个根元素。
- :这个元素是一个容器,它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。
-
:设置页面标题,出现在浏览器标签上。 - :这个元素包含了你能在页面看到的所有内容。
三、HTML文档的相关操作
1、注释:
在html文档中,如果你想选择注释一部分内容,那么可以用特殊符号进行标记。
如:
*<!--<p>我只是解释一下,你可以忽略我哦~</p> -->*
2、空元素
在HTML文档中,有一些元素只含有一个开始标签,用来进行插入以及嵌入。
如:
<p>我是<br>一个学生</p>
此时< br >元素就是一个空元素,类似的还有
< hr>、< input>、< img>、< a>
等等。
3、元素的属性
一个元素是可以有自己的属性的,包含了一些额外的信息,如光标移至该属性所对应位置时产生的一些动态的变化称为属性。
如:
<p title="这是个title属性">鼠标移上来试试!</p>
可以自己运行来观察变化。
属性需要包含以下三个内容:
- 在属性和元素名称之间需要有一个空格
- 在属性名称之后需要“=”。
- 属性值需要放入一对“”中。
4、标题
共有六级标题,我们给出了如下代码:
<h1> 一级标题</h1>
<h2> 二级标题</h2>
<h3> 三级标题</h3>
<h4> 四级标题</h4>
<h5> 五级标题</h5>
<h6> 六级标题</h6>
运行结果如下:
5、超链接
超链接格式
<a href="链接/" ></a>
6、图片或文件路径
格式:
<img src="照片地址" >
7、表格
格式:
<table>
<tr>
<th>Firstname</th>
</tr>
<tr>
<td>Jill</td>
</tr>
</table>
注:< tr>表示行, < td>表示行中的单元, < th>是表头的单元(将会加粗显示)。
四、总结
总的来说,HTML文档是一个大的框架,就类似于房子的骨架,在这个大的基础上才能对房子(也就是网页内容)作出一定的美化与建设。但是一定要在前期对你所做网页有一个大的规划,网页的整体结构就是HTML啦。