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. py-faster-rcnn:在windows上配置

    0.先说一下本机配置 opencv2+cuda7.5+cudnn+anaconda,这些基础的之前都是配置好了的,python环境建议使用anaconda,用到的库基本都有了,好像没有easydict ...

  2. 安装VMware Tools:Ubuntu

    1.首先准备好linux.iso,在安装目录下应该可以找到,我使用的是这个: 链接:http://pan.baidu.com/s/1nuGQyIt 密码:b5mn 2.打开Ubuntu,CD中加载该i ...

  3. HTML通过jQuery传值赋值

    网页传值很常见,如果通过动态网页传值,我们很容易实现.但是如果静态网页传值,这个就要找资料,方法或者询问大牛们了.这个原来还真的没有做过.今天一同事需要做这个类似的功能,应该是昨天了.本来是昨天写的, ...

  4. MySQL，SqlServer数据库关键字在程序中处理

    这个原来是SqlServer的数据库,现在改成MySQL的,由于两个数据库有些差别.在程序中怎么处理.为了给自己提个醒,把它记录下来. 这是MySQL数据库 Public Sub display() ...

  5. 【zznu-夏季队内积分赛3-J】追忆

    题目描述 “别人总说我瓜,其实我一点也不瓜,大多数时候我都机智的一批“现在是阳历2018/8/7,宝儿姐想起自己参加ACM整整1000天了.她想知道她刚入坑是什么时间.那么问题来了,请帮宝儿姐追忆一下 ...

  6. html/css/javascript练习代码

    这两天心血来潮学习了前端,自己也做了个小小的网页,不好看QAQ 不过网页上集结了很多零碎的知识,在这里先马克一下.图片地址:https://github.com/lesroad/html-css-js ...

  7. 三、dbms_pipe(类似UNIX系统的管道)

    1.概述 说明:Oracle管道类似UNIX系统的管道,但不采用OS机制实现,管道信息被缓存到SGA中,当关闭例程时会丢失管道信息,建立公用管道所有数据库用户都可访问,私有管道只能由建立这访问.作用: ...

  8. 各排序算法的Java实现及简单分析

    一,直接插入排序 //直接插入排序的算法时间复杂度分析: //如果输入为正序,则每次比较一次就可以找到元素最终位置,复杂度为O(n) //如果输入为反序,则每次要比较i个元素,复杂度为O(n2) // ...

  9. mysql服务1067错误:修改mysql可执行文件路径

    今天遇到mysql服务1067错误的问题,设置使用系统账户也无法启动mysql,后面认证看了系统的配置信息,发现启动文件也就是mysql安装路径是之前的(也说明之前安装mysql,没去卸载直接安装新的 ...

  10. 2017北京赛区H题

    题目链接 题意:在n*m的矩阵中选择变换或者不变换一个数变成p,使得最大子矩阵和最小 1<=n,m<=150, -1000<=p<=1000; 题解: 他人题解链接 涉及到知识 ...