HTML标记区分

HTML即超文本标记语言（HtyperText Markup Language），其作用就是将编辑的内容在屏幕上显示。文件的后缀为.HTML。

在HTML中成对出现的叫做双标记（譬如：<p></p>,<a></a>等等；其中<p>称为开始标记，</p>称为结束标记），而有些标记单独出现，譬如（<br />,<hr />），等这些称为单标记

（而在网页中单标记比较少）

CSS

CSS（Cascading Style Sheets），即层叠样式表。其作用就是给网页的显示增加色彩的效果，美化网页。文件的后缀为.CSS。

JavaScript

JavaScript又称为脚本。为网页添加动态效果。原生的JavaScript现在很少人在用，大多数人现在使用的是jQuery。文件的后缀为.JS或者.JQ

一个HTML该怎么写

首先在head中定义样式，或者脚本。title 表示显示的网页名字。body 又称为主体部分，显示在网页中的内容都在body中编写。

下面是代码：第一个网页hello  word

 <!doctype html>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

 <title>注册</title>

 </head>

 <body>

      <p>hello word</p>

 </body>

定义CSS样式

CSS样式的定义规则有三种

1.内联CSS样式

格式：

<标记名 style=" ;"></标记名>  其中多个样式使用；分隔开

　　内联式顾名思义就是在标记名内部使用。下面举例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <p style="font-size: 18pt;color:#FF0000;">hello word</p>

    <p style="font-size: 18pt;color:#00FF00;">hello word</p>

    <p style="font-size: 18pt;color:#0000FF;">hello word</p>

</body>

</html>

2.内嵌CSS样式

格式

<style type="css/text" ></style>

内联样式要在head 标记内部添加。与上一种方式相比，此方法可以简化代码。以减少代码量，通过比较不难发现如果同时定义的内联式要写三遍，而下列方式只需要修改特定格式。

下面举例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        p{

            font-size: 18pt;

            color:#FF0000;

        }

        .p1{

            color:#00FF00;

        }

        #p2{

            color: #0000FF;

        }

    </style>

</head>

<body>

    <p>hello word</p>

    <p class="p1">hello word</p>

    <p id="p2">hello word</p>

</body>

</html>

3.引用外部独立的.CSS样式文件

格式：

<link type="text/css" rel="stylesheet" href=""/>

此定义方式需要在head中定义一个外部的CSS文件，你需要先定义好外部CSS样式表，然后通过link标记引用进来。与上面的方式相比，如果定义的样式过多会显得头部定义比较冗余，通过引用外部的样式表减少冗余性。

下面举例：

CSS文件中代码

 p{

     font-size: 18pt;

     color:#FF0000;

 }

 .p1{

     color:#00FF00;

 }

 #p2{

     color: #0000FF;

 }

HTML中的代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <link rel="stylesheet" type="text/css" href="ceshi.css" />

 </head>

 <body>

     <p >hello word</p>

     <p class="p1">hello word</p>

     <p id="p2">hello word</p>

 </body>

 </html>

引用外部样式还有第二种方法

在style开头使用@import引用外部样式表（样式代码就是上面的在这就不写了）

下面是案例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        @import "ceshi.css";

    </style>

</head>

<body>

    <p >hello word</p>

    <p class="p1">hello word</p>

    <p id="p2">hello word</p>

</body>

</html>

HTML第一讲的更多相关文章

  1. CS193P - 2016年秋 第一讲 课程简介

    Stanford 的 CS193P 课程可能是最好的 ios 入门开发视频了.iOS 更新很快,这个课程的最新内容也通常是一年以内发布的. 最新的课程发布于2016年春季.目前可以通过 iTunes ...

  2. POI教程之第一讲：创建新工作簿， Sheet 页，创建单元格

    第一讲 Poi 简介 Apache POI 是Apache 软件基金会的开放源码函数库,Poi提供API给java程序对Microsoft Office格式档案读和写的功能. 1.创建新工作簿,并给工 ...

  3. 《ArcGIS Engine+C#实例开发教程》第一讲桌面GIS应用程序框架的建立

    原文:<ArcGIS Engine+C#实例开发教程>第一讲桌面GIS应用程序框架的建立 摘要:本讲主要是使用MapControl.PageLayoutControl.ToolbarCon ...

  4. 32位汇编第一讲x86和8086的区别,以及OllyDbg调试器的使用

    32位汇编第一讲x86和8086的区别,以及OllyDbg调试器的使用 一丶32位(x86也称为80386)与8086(16位)汇编的区别 1.寄存器的改变 AX 变为 EAX  可以这样想,16位通 ...

  5. 异常处理第一讲(SEH),筛选器异常,以及__asm的扩展,寄存器注入简介

    异常处理第一讲(SSH),筛选器异常,以及__asm的扩展 博客园IBinary原创  博客连接:http://www.cnblogs.com/iBinary/ 转载请注明出处,谢谢 一丶__Asm的 ...

  6. 常见注入手法第一讲EIP寄存器注入

    常见注入手法第一讲EIP寄存器注入 博客园IBinary原创  博客连接:http://www.cnblogs.com/iBinary/ 转载请注明出处,谢谢 鉴于注入手法太多,所以这里自己整理一下, ...

  7. 逆向实用干货分享,Hook技术第一讲,之Hook Windows API

    逆向实用干货分享,Hook技术第一讲,之Hook Windows API 作者:IBinary出处:http://www.cnblogs.com/iBinary/版权所有,欢迎保留原文链接进行转载:) ...

  8. PE文件格式详解,第一讲,DOS头文件格式

    PE文件格式详解,第一讲,DOS头文件格式 今天讲解PE文件格式的DOS头文件格式 首先我们要理解,什么是文件格式,我们常说的EXE可执行程序,就是一个文件格式,那么我们要了解它里面到底存了什么内容 ...

  9. 逆向知识第一讲,IDA的熟悉使用,以及TEB,PEB结构

    逆向知识第一讲,IDA的熟悉使用,以及TEB,PEB结构 一丶熟悉IDA,以及手工制作sig文件. IDA,静态分析工具,网上随便找一个即可下载. 首先,我们写一个可执行EXE,最简单的 使用IDA打 ...

  10. 脱壳第一讲,手工脱壳ASPack2.12的壳.ESP定律

    脱壳第一讲,手工脱壳ASPack2.12的壳.ESP定律 一丶什么是ESP定律 首先我们要明白什么是壳.壳的作用就是加密PE的. 而ESP定律就是壳在加密之前,肯定会保存所有寄存器环境,而出来的时候, ...

随机推荐

  1. 1.spring cloud eureka server配置

    IDEA版本 2017.2.5 JDK 1.8 红色加粗内容为修改部分 1.创建一个新项目 2.选择eureka依赖 3.版本选择(重要)并且更新依赖 <?xml version="1 ...

  2. commons-fileupload实现上传进度条的显示

    本文将使用   apache fileupload   ,spring MVC   jquery 实现一个带进度条的多文件上传, 由于fileupload 的局限,暂不能实现每个上传文件都显示进度条, ...

  3. Java 进阶7 并行优化 JDK多任务执行框架技术

    Java 进阶7 并行优化 JDK多任务执行框架技术 20131114          Java 语言本身就是支持多线程机制的,他提供了 Thread 类 Runnable 接口等简单的多线程支持工 ...

  4. pg_bulkload使用记录

    很久之前就使用过pg_bulkload来导入数据了,并做了对比试验,现在另一个项目又需要用了,这里做个记录: 1.rpm包比较老,下下来之后发现只支持到pg94,目前我用的是pg10,因此放弃. 2. ...

  5. Linux：col命令详解

    col 经常用于将说明文件转存为纯文本以方便阅读 语法 col(选项) 选项 -b:过滤掉所有的控制字符,包括RLF和HRLF: -f:滤掉RLF字符,但允许将HRLF字符呈现出来: -x:以多个空格 ...

  6. wma wmv asf格式分析

    原文链接:http://blog.csdn.net/werocpp/article/details/5594067 原文链接:http://blog.chinaunix.net/uid-2075819 ...

  7. 在头文件中声明class 类 与 include类所在的头文件区别---理解

    在头文件中声明class 类 与 include类所在的头文件的理解: 在头文件中,声明类 它告诉编译器:存在这样的类.而实际的类则可以位于同一个编译单元中,也可以放在其他编译单元中.没有这个类原型, ...

  8. ubuntu16安装git

    执行一条命令就可以: sudo apt-get install git

  9. Android程序员学WEB前端(6)-CSS(1)-选择器-Sublime

    转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76576469 觉得博文有用,请点赞,请评论,请关注,谢谢!~ CSS外部文档链接: & ...

  10. Android程序员学WEB前端(3)-HTML(3)-表单嵌套-Sublime

    转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76522586觉得博文有用,请点赞,请评论,请关注,谢谢!~ 表单嵌套: <!DO ...