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. day19 Models补充+缓存+信号+序列化+分析抽屉页面

    参考链接: http://www.cnblogs.com/wupeiqi/articles/5237704.html http://www.cnblogs.com/wupeiqi/articles/5 ...

  2. FortiDDoS是使用历史流量基线进行检测的

    Understanding FortiDDoS Detection ModeIn Detection Mode, FortiDDoS logs events and builds traffic st ...

  3. CSS技巧和经验

    如何清除图片下方出现几像素的空白间隙 方法1 img { display: block; } 方法2 除了top值,还可以设置为text-top | middle | bottom | text-bo ...

  4. 034——VUE中表单控件处理之使用vue控制radio表单的实例操作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Python3的第一个程序(三)

    现在,了解了如何启动和退出Python的交互式环境,我们就可以正式开始编写Python代码了. 在写代码之前,请千万不要用“复制”-“粘贴”把代码从页面粘贴到你自己的电脑上.写程序也讲究一个感觉,你需 ...

  6. mifi随身wifi选购

    一款优秀的随身wifi不光要信号好,更要电量足 ,网速快.影响这个三个问题的主要因素就是cpu.so咱们从cpu的角度来分析下mifi 机器型号(cpu型号) TP 961 52000 (MDM962 ...

  7. Linux:echo命令详解

    echo命令 用于字符串的输出 格式 echo string 使用echo实现更复杂的输出格式控制 1.显示普通字符串: echo "It is a test" 这里的双引号完全可 ...

  8. python + sklearn ︱分类效果评估——acc、recall、F1、ROC、回归、距离

    之前提到过聚类之后,聚类质量的评价: 聚类︱python实现 六大 分群质量评估指标(兰德系数.互信息.轮廓系数) R语言相关分类效果评估: R语言︱分类器的性能表现评价(混淆矩阵,准确率,召回率,F ...

  9. java未来发展方向!新手入门了解

    随社会信息的发展着,java广泛应用于PC.数据中心.游戏控制台.科学超级计算机.移动电话和互联网等行业.从目前的招聘量上看,对java开发人才需求量是很大的,而且未来的仍然是主流,就业前景很好.只要 ...

  10. android代码常识

    查看当前android代码版本号:build/core/version_defaults.mk---->查找platform_version android源码在线阅读网址 http://and ...