前言
之前学习牛腩新闻发布系统,自己对Web页面的制作有了一定的了解,但是还是很模糊,但是报着囫囵吞枣的方法,继续学习,看到后面依旧有对CSS等知识的学习。
经过三遍的自己终于看完了HTML的视频,第一遍是三倍速看到,期间没有做笔记;第二遍是用2倍速看的,期间做了两篇笔记;最后一遍是用三倍速看的,期间收集没有记住的问题;
虽然就两个小时,但是在这两个小时之间有很多的知识点需要整理,下面对HTML的基础知识进行总结。‘
一、HTML基本结构
编写html文件的时候,必须要遵循html的语法规则。一个完整的html文件由标题、段落、列表、表格、单词等嵌入的各种对象组成。这些逻辑上统一的对象被成为元素,html用标签来分割并描述这些元素。
实际上整个html就是由元素和标签组成。下面显示的是html的基本结构
<html> //html文件的开始
<head> //html文件的头部开始
...
.....html头部内容...
</head> //html文件的头部结束
<body> //html文件的主体开始
...
....html文件的主体内容
</body> //html文件的主体结束
</html>
可以看到,html代码分为三个部分,其中:
表1 html组成
分类名 | 解释 |
---|---|
html | 告诉浏览器开始与结束,包含head和body。内容在两个html之间。 |
head | 头部标签,放置页面标题以及文件信息等内容。一般不会在网页上直接显示,会在网页的标题栏里显示。 |
body | 主体标签,绝大多数内容都在这个里面。 |
图1 html标记整体框架图
二、头部标签
通常将“<[head]>…<[/head]>”标签间的内容称为“头部”。一般来说,头部的内容都不会在网页上直接显示,而是通过其他方式起作用的,例如,标题是在html的头部定义的,但不会在网页上显示,而是在网页的标题栏中显示。
表2 常用头部标签
标签 | 描述 |
---|---|
<[base]> | 当前文档的url全称(基线网址) |
<[title]> | 设定标题 |
<[isindex]> | 表明该文档是一个可用于检索的网关脚本 |
<[meta]> | 有关文档本身的元信息,例如用于查询的关键词、用于获取该文档的有效期 |
<[style]> | 设定CSS层叠样式表内容 |
<[link]> | 设定外部文件链接 |
<[scrip]> | 设定页面脚本内容 |
三、主体标签
html的主体标签是“< body >”,在其间放置的是网页的内容,如文字、图片、链接、表格、表单等。
下面是< body >元素的属性:
表3 body 属性
属性 | 描述 |
---|---|
text | 设定页面文字颜色 |
bgcolor | 设定页面背景颜色 |
background | 背景图像 |
bgproperties | 设定背景图像固定 |
link | 设定超链接颜色 |
alink | 鼠标点击超链接的颜色 |
vlink | 访问过的超链接颜色 |
topmargin | 上边距 |
leftmargin | 左边距 |
四、文字与段落标签
在网页中,信息就是通过文字来传播的,使用html语言的文字与段落标签,可以对网页中的文字和段落进行控制。
4.1 输入空格符号
在html页面中空格符号是通过代码控制的,下面是空格的符号代码。
在刚刚接手考试系统的时候,师哥给我们讲解导入英语试题,其中就有这个,现在回头看有种老朋友的感觉。
4.2 特殊符号
和空格表示的方法有些相似,一些特殊符号是凭借特殊符号码来表示的。通常由前缀“&”,加上字符对应名称,再加上后缀“;”组成。
表5 常用特殊符号
特殊符号 | 符号码 |
---|---|
“ | & quot ; |
& | & amp ; |
< | & lt ; |
> | & gt ; |
* | & times ; |
$ | & quot ; |
® | & reg ; |
© | & copy ; |
TM | & trade ; |
… | … |
在查找的时候发现有几个很特殊的自己没有见过所以总结了一些:
新闻主题:商标 ® 、© 和TM的区别
TM 正在申请中的商标,标注在商标的右上角。
® 已经注册并受到商标法保护的商标,标注在商标的右上角。
© 只代表版权声明,不一定经过法律手段注册或者一些不适合注册的数字产品标示。
图2 区别
4.3 注释语句
现在学习了好多的语言,首先都有共同点,都有注释。而且还不一样。
在html中,有两种注释:
① <comment>...</comment>
② <!--....-->
4.4 标题字标签
在浏览器中的正文部分,可以显示。所谓的标题字,就是文章的小标题。
html中定义了6级标题,从1到6,每一级标题的字体大小依次递减。
表6 标题字
标签 | 描述 |
---|---|
< h1 >…< /h1 > | 一级标题 |
< h2 >…< /h2 > | 二级标题 |
< h3 >…< /h3 > | 三级标题 |
< h4 >…< /h4 > | 四级标题 |
< h5 >…< /h5 > | 五级标题 |
< h6 >…< /h6 > | 六级标题 |
4.5 文字修饰标签
html和css一样,可以加入多种文字的修饰标签:
标签 | 描述 |
---|---|
< b > | 粗体 |
< strong > | 粗体 |
< i > | 斜体 |
< em > | 斜体 |
< cite > | 斜体 |
< sup > | 上标 |
< sub > | 下标 |
< big > | 大字号 |
< small > | 小字号 |
< u > | 下划线 |
< s > | 删除线 |
< strike > | 删除线 |
< address > | 地址 |
< tt > | 打字机文字 |
< blink > | 闪烁文字 |
< code > | 等宽 |
< samp > | 等宽 |
< kbd > | 键盘输入文字 |
< var > | 声明变量 |
4.6 段落标签
在html 中有专门的标签表示段落。所谓的段落,就是一段格式上统一的文本。在html中用< p >…< /p >定义。
图6 段落标签
标签 | 描述 |
---|---|
< p > | 段落 |
< br > | 换行 |
< nobr > | 不换行 |
< pre > | 预格式化 |
< center > | 居中 |
< blockquote > | 缩排 |
4.7 水平线标签 < hr >
水平线用于段落与段落之间的分隔,使得文档结构显示的清晰明白,使得文字编排的整齐。
五、列表
在html中列表可以起到提纲挈领的作用。列表分为两种类型,一种是无序列表,一种是有序列别。前者用项目符号来标记无序的项目,而后者中编号来记录项目的顺序。
列表主要标签:
图7 列表标签
标签 | 描述 |
---|---|
< ul > | 无序列表 |
< ol > | 有序列表 |
< dir > | 目录列表 |
< dl > | 定义列表 |
< menu > | 菜单列表 |
< dt >、< dd > | 定义列表的标签 |
< li > | 列表项目的标签 |
5.1 有序列表
有先后顺序 ,主要使用< ol > 、< li >两个标签和”type“、”start“两个属性。
框架:
< ol >
< li > 项目一 < /li >
< li > 项目二 < /li >
< li > 项目三 < /li >
< li > 项目四 < /li >
< /ol >
5.2 无序列表
在无序列表中,各个列表项中,没有顺序级别之分,通常使用一个项目符号作为每个列表的前缀。主要用< ul >< dir >< dl >< menu >< li >几个标签和”type”属性。
框架:
< ul >
< li > 项目一 < /li >
< li > 项目二 < /li >
< li > 项目三 < /li >
< li > 项目四 < /li >
< /ul >
六、超链接标签
超链接虽然在网站设计中占有不可替代的地位,但是其标签只有一个,那就是”< a >“.
在做牛腩新闻发布系统的时候就用到了很多的超链接标签,来帮助我们整理网页的跳转。
表8 超链接属性
属性 | 描述 |
---|---|
href | 指定链接的地址 |
name | 给链接命名 |
title | 给链接提示文字 |
target | 指定链接的目标窗口 |
七、表格相关标签
表格是用于排列内容的最佳工具,在html中,绝大多数页面都使用表格进行排版。表格通过三个标签来构成:
表9 表格构成
标签 | 描述 |
---|---|
< table >…< /table > | 表格标签 |
< tr >…< /tr > | 行标签 |
< td >…< /td > | 单元格标签 |
图三 表格
基本框架:
<table>
<tr>
<td>
...
</td>
</tr>
</table>
从中可以看出,标签之间是从大到小,逐层包含的关系,有最大的表格到最小的单元格。一个表格可以有多个< tr >< td >,分别表示多行和多个单元格。
学习心得
思维导图很重要!
通过这几天的研究html,对其中的一些知识点进行总结,感觉自己开始对html有了一些的了解。学习就是要多多的总结,然后多多的收货,然后多多的向别人学习。