[置顶] 【B/S】HTML初接触

前言

之前学习牛腩新闻发布系统,自己对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 主体标签,绝大多数内容都在这个里面。

[置顶] 【B/S】HTML初接触_第1张图片

                                图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页面中空格符号是通过代码控制的,下面是空格的符号代码。

&nbsp;

在刚刚接手考试系统的时候,师哥给我们讲解导入英语试题,其中就有这个,现在回头看有种老朋友的感觉。

4.2 特殊符号

和空格表示的方法有些相似,一些特殊符号是凭借特殊符号码来表示的。通常由前缀“&”,加上字符对应名称,再加上后缀“;”组成。

                                        表5 常用特殊符号
特殊符号 符号码
& quot ;
& & amp ;
< & lt ;
> & gt ;
* & times ;
$ & quot ;
® & reg ;
© & copy ;
TM & trade ;

在查找的时候发现有几个很特殊的自己没有见过所以总结了一些:
新闻主题:商标 ® 、© 和TM的区别
TM 正在申请中的商标,标注在商标的右上角。
® 已经注册并受到商标法保护的商标,标注在商标的右上角。
© 只代表版权声明,不一定经过法律手段注册或者一些不适合注册的数字产品标示。

[置顶] 【B/S】HTML初接触_第2张图片

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

[置顶] 【B/S】HTML初接触_第3张图片

                                             图三 表格

基本框架:

    <table>       
        <tr>
            <td>
            ...
            </td>
        </tr>
    </table>

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

学习心得

思维导图很重要!

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

你可能感兴趣的:(html,css,视频,新闻,发布)