【B/S】HTML初接触

前言

之前学习牛腩新闻发布系统，自己对Web页面的制作有了一定的了解，但是还是很模糊，但是报着囫囵吞枣的方法，继续学习，看到后面依旧有对CSS等知识的学习。

经过三遍的自己终于看完了HTML的视频，第一遍是三倍速看到，期间没有做笔记；第二遍是用2倍速看的，期间做了两篇笔记；最后一遍是用三倍速看的，期间收集没有记住的问题；
虽然就两个小时，但是在这两个小时之间有很多的知识点需要整理，下面对HTML的基础知识进行总结。‘

一、HTML基本结构

编写html文件的时候，必须要遵循html的语法规则。一个完整的html文件由标题、段落、列表、表格、单词等嵌入的各种对象组成。这些逻辑上统一的对象被成为元素，html用标签来分割并描述这些元素。
实际上整个html就是由元素和标签组成。

下面显示的是html的基本结构

   //html文件的开始
       //html文件的头部开始
    ...
    .....html头部内容...
      //html文件的头部结束

      //html文件的主体开始
    ...
    ....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中，有两种注释：

  ①  ...
  ②  

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 >	单元格标签

                                             图三 表格

基本框架：

    
       
        

            

            ...
            
        
    

从中可以看出，标签之间是从大到小，逐层包含的关系，有最大的表格到最小的单元格。一个表格可以有多个< tr >< td >，分别表示多行和多个单元格。

学习心得

思维导图很重要！

通过这几天的研究html，对其中的一些知识点进行总结，感觉自己开始对html有了一些的了解。学习就是要多多的总结，然后多多的收货，然后多多的向别人学习。