今儿头午有点晕晕的感觉,咳咳,甩甩头开课

                                      HTML

                                  定义:超文本标记语言

                    (记不住的可以这么记:how to make love ! 哈哈,准备开车,粗人一个,长的不行)

其实理解起来很简单,超越文本范畴的,带有标记性的,计算机语言

上图咱们所看到的一串串的代码,这就是空白网页的后台界面,而这些代码就是计算机的其中一种语言

咱们按照定义来细细的讲解下

超越文本范畴的标记性的计算机语言

  超越文本范畴的:

      是指并不只是文本,还包括静态图片,动图,音频,视频,超链接等一系列综合性的

  标记性:

      其实就是为了让计算机区分不同的计算机语言而特别定制的一种特殊的符号,计算机一看到这种符号就知道“ok,这是HTML”,这种符号是:   <       >  ,例如<head></ head>  、  <body></ body>  ,把代码放入到这种标记中,计算机就知道这是众多计算机语言中的HTML语言。

    上面讲解了什么是HTML,那咱们接着来看一下这种标记性语言一点最基本的语言代码(在我看来,其实代码就跟汉语一样,现在咱们就是在学习认字,编程就是用字和词语来造句,唯一的不同就是阅读对象不同,而已)

咱们先看一组代码

<head>   </ head>

head 头部,顶部

那<head></ head>的控制区域也就是这个地方,为了方便展示,咱们在其代码中加入<title></ title> //标签  ,用来在标签上显示字符

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello</title>
</head>

现在这行代码咱们所能看到的就是下图这个样子

OK,下一个

<body> </ body>

躯干,身体

可以这么理解,咱们所在网页上看到的,都是由<body> </ body>里面得内容呈现到我们的眼前的

例如咱们想要一个背景色为红色的网页,咱们可以这么做

<body bgcolor="pink">

  咱们开始分屏显示吧,这样大家看的会比较方便并且更直观

那上面得代码所呈现出来的效果就是下图的样子

对,骚粉,pink

刚刚咱们做的就是在<body></ body>里添加了一个bgcolor="red" ,对,就是backgroundcolor的缩写=bgcolor(背景颜色)    background就是背景图片,是不是很容

那现在有人说了,网站上看小说,那字儿写在哪?

可定是写在body里了,不过不是尖括号<>里面,而是在<body>和</ body>中间,就像这样

<body bgcolor="pink">

Hello<br />
Hello<br />
Hello<br /> </body>

  对,你们又看到一个代码<br  />这是换行代码,并且只有一个,嗯,单身汪一只,没有另一半

显示效果如下

感觉字儿太小,看的不是太清楚,还很费劲儿,嗯,咱们稍微调整下字体大小

<body bgcolor="pink">

<b>Hello</b><br />
<i>Hello</i><br />
<u>Hello</u><br /> <b><i><u>Hello</u></i></b><br /> <font size="7" color="red" face="楷体">中华人民共和国</font> <h1>北京</h1>
<p></p>
<h2>淄博</h2> <h6>小日本</h6> <h6>美国</h6> </body>

  下图

duang,就是这种呈现效果

对,你看到的没错,都是写到<body> </ body>中间的,看着感觉很复杂,其实特别简单,咱们拆分开来看一下

b   i     u  ,分别对应的是加粗,倾斜,下划线(跟word文档里面一样,很容易),并且都是双标记,前后各一个,记住,前后各一个

并且可以双标记嵌入使用

<font></ font> ,针对于字体的设计使用,在前面的<font>里面添入size=" "(尺寸、大小)   color="  "(字体颜色)  face="  "(字体样式)  可以进行字体的美化

<h1>  </ h1>~~~~<h6>  </ h6>  是标题,数字的升序与字尺寸大小正好是相反的

咱们可以在自己的电脑上尝试着联系一下,熟悉一下HTML的语言操作

有喜欢用DW的,有喜欢用VS的,都可以,代码都是一样得,软件得操作方式略有不同而已,大家动手练习下,好脑子不如烂笔杆子,多动手

HTML基本代码教学片,认识HTML的更多相关文章

  1. 【转载】PHP PSR-1 基本代码规范(中文版)

    基本代码规范 本篇规范制定了代码基本元素的相关标准, 以确保共享的PHP代码间具有较高程度的技术互通性. 关键词 "必须"("MUST")."一定不可 ...

  2. PHP PSR-1 基本代码规范(中文版)

    基本代码规范 本篇规范制定了代码基本元素的相关标准,以确保共享的PHP代码间具有较高程度的技术互通性. 关键词 “必须”("MUST").“一定不可/一定不能”("MUS ...

  3. 【PSR规范专题(2)】PSR-1 基本代码规范

    转载自: https://github.com/PizzaLiu/PHP-FIG/blob/master/PSR-1-basic-coding-standard-cn.md 基本代码规范 本篇规范制定 ...

  4. .Net dll多个同名的程序集版本冲突共存与通过基本代码或探测定位程序集方案

    .Net dll多个同名的程序集版本冲突共存与通过基本代码或探测定位程序集方案 在使用调用程序集的引用中的信息和配置文件中的信息确定了正确的程序集版本之后,并且在公共语言运行时在全局程序集缓存中进行检 ...

  5. ReactiveSwift源码解析(十二) MutableProperty基本代码实现

    前两篇博客我们分别聊了ReactiveSwift框架中的负责标记对象的生命周期的类Lifetime以及负责原子性操作的Atomic类的具体代码实现.前两篇博客之所以聊Lifetime以及Atomic的 ...

  6. PSR-1 基本代码规范

    基本代码规范 本篇规范制定了代码基本元素的相关标准, 以确保共享的PHP代码间具有较高程度的技术互通性. 关键词 “必须”("MUST").“一定不可/一定不能”("MU ...

  7. PHP PSR基本代码规范(中文版)

    PSR-1 基本代码规范 本篇规范制定了代码基本元素的相关标准,以确保共享的PHP代码间具有较高程度的技术互通性. 关键词 “必须”("MUST").“一定不可/一定不能”(&qu ...

  8. deno学习二 基本代码

    deno 介绍是安全的ts 运行时 简单的代码 使用js(app.js) console.log("demoapp") 输出 dalongdemo 使用ts(app.ts) con ...

  9. DOM基本代码一

    dom学习基本代码第一部分 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> < ...

随机推荐

  1. Win7电脑无法安全删除硬件并弹出媒体的解决方法

    有很多用户经常会在win7系统中使用移动硬盘或U盘来拷贝数据,而当使用完了之后,一般为了数据能够更安全,都会右击选择安全删除硬件进行退出,可是有win7系统用户却发现要弹出设备的还好无法安全删除硬件并 ...

  2. Loadrunner测试webservice协议总结

    Loadrunner测试webservice协议总结 一.协议选择 1.打开Virtual user generator,新建脚本,选择webservice协议

  3. 【题解】洛谷P1080 [NOIP2012TG] 国王游戏(贪心+高精度)

    次元传送门::洛谷P1080 思路 我们模拟一下只有两个大臣的时候发现 当a1​∗b1​<a2​∗b2​是ans1<ans2 所以我们对所有大臣关于左右手之积进行排序 得到最多钱的大臣就是 ...

  4. HDU1005 Number Sequence(找规律,周期是变化的)

    传送门: http://acm.hdu.edu.cn/showproblem.php?pid=1005 Number Sequence Time Limit: 2000/1000 MS (Java/O ...

  5. Python 有用的 map() deduce() filter() 函数

    #!/usr/bin/python#5!+4!+3!+2!+1! #give 3 return 3*2*1def jiechen(n): N = map(lambda x:x+1,range(n)) ...

  6. Ubuntu 编译出现 ISO C++ 2011 不支持的解决办法

    问题 在编译时出现如下error: error:This file requires compiler and library support for the ISO C++ 2011 standar ...

  7. nRF5 SDK for Mesh( 七 ) BLE MESH 的 架构(rchitecture)

    The mesh architecture   The mesh stack consists of a number of subsystems that are interfaced throug ...

  8. EF Core中Join可以进行子查询

    我们来看看下面的代码,这个代码是一个INNER JOIN的EF Core查询,其中用SubCategory表INNER JOIN了SubCategoryLanguage表,但是我们需要在SubCate ...

  9. 【css】table标签内的td、th如何设置固定宽度,而不是自适应?

    table{ min-width: %; } td{ min-width: 100px; } .table-container{ overflow:auto; display: block; } &l ...

  10. JS基础——事件操作总结

    通用事件绑定   function bindEvent(elem,type,fn) { elem.addEventListener(type,fn); } let a =document.getEle ...