HTML基本代码教学片,认识HTML
今儿头午有点晕晕的感觉,咳咳,甩甩头开课
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的更多相关文章
- 【转载】PHP PSR-1 基本代码规范(中文版)
基本代码规范 本篇规范制定了代码基本元素的相关标准, 以确保共享的PHP代码间具有较高程度的技术互通性. 关键词 "必须"("MUST")."一定不可 ...
- PHP PSR-1 基本代码规范(中文版)
基本代码规范 本篇规范制定了代码基本元素的相关标准,以确保共享的PHP代码间具有较高程度的技术互通性. 关键词 “必须”("MUST").“一定不可/一定不能”("MUS ...
- 【PSR规范专题(2)】PSR-1 基本代码规范
转载自: https://github.com/PizzaLiu/PHP-FIG/blob/master/PSR-1-basic-coding-standard-cn.md 基本代码规范 本篇规范制定 ...
- .Net dll多个同名的程序集版本冲突共存与通过基本代码或探测定位程序集方案
.Net dll多个同名的程序集版本冲突共存与通过基本代码或探测定位程序集方案 在使用调用程序集的引用中的信息和配置文件中的信息确定了正确的程序集版本之后,并且在公共语言运行时在全局程序集缓存中进行检 ...
- ReactiveSwift源码解析(十二) MutableProperty基本代码实现
前两篇博客我们分别聊了ReactiveSwift框架中的负责标记对象的生命周期的类Lifetime以及负责原子性操作的Atomic类的具体代码实现.前两篇博客之所以聊Lifetime以及Atomic的 ...
- PSR-1 基本代码规范
基本代码规范 本篇规范制定了代码基本元素的相关标准, 以确保共享的PHP代码间具有较高程度的技术互通性. 关键词 “必须”("MUST").“一定不可/一定不能”("MU ...
- PHP PSR基本代码规范(中文版)
PSR-1 基本代码规范 本篇规范制定了代码基本元素的相关标准,以确保共享的PHP代码间具有较高程度的技术互通性. 关键词 “必须”("MUST").“一定不可/一定不能”(&qu ...
- deno学习二 基本代码
deno 介绍是安全的ts 运行时 简单的代码 使用js(app.js) console.log("demoapp") 输出 dalongdemo 使用ts(app.ts) con ...
- DOM基本代码一
dom学习基本代码第一部分 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> < ...
随机推荐
- Window窗口布局 --- DecorView浅析
开发中,通常都是在onCreate()中调用setContentView(R.layout.custom_layout)来实现想要的页面布局,我们知道,页面都是依附在窗口之上的,而DecorView即 ...
- vue2.* 绑定属性 绑定Class 绑定style 03
<template> <div id="app"> <!-- 绑定属性 --> <div v-bind:title="title ...
- CentOS 安装jira 6.3.6
java 目录: /usr/java/jdk1.6.0_45 tomcat 目录:/usr/tomcat-7.0.29 jira 目录: /usr/local/jira jira 访问地址: cent ...
- python之获取文件夹下文件的绝对路径
#!/usr/bin/python #-*-conding:utf-8-*- #获取目录下文件的绝对路径 import os def getabsroute(path): listdir = os.l ...
- 测试用例组合--PICT
测试用例组合 一原理 1.配对组合原理(两两组合原理),应用工具PICT自动输出组合 name=a,b value=1,2 key=m,n 如果自己组合那么有2*2*2=8条用例 a1m a2m a1 ...
- (转)ci
1 从代码管理器签出源文件 2 修改代码 3 编译代码 4 遇到错误,转到2继续修改直到达到预期 5 运行单元测试,期望所有的测试绿色(通过) 6 单元测试出错,转入2 7 重构代码,按 ...
- C#设计模式 —— 单例模式
嗯,这是本人的第一篇随笔,就从最简单的单例模式开始,一步一步地记录自己的成长. 单例模式是最常见的设计模式之一,在项目代码中几乎随处可见.这个设计模式的目的就是为了保证实例只能存在一个.单例模式往下还 ...
- No active profile set, falling back to default profiles: default
No active profile set, falling back to default profiles: default 这个错误是由于idea没有设置默认启动环境,设置即可
- vue组件中,iview的modal组件爬坑--modal的显示与否应该是使用v-show
这是我第一次写博客,主要是记录下自己解决问题的过程和知识的总结,如有不对的地方欢迎指出来! 需求:点击btn,弹出modal显示图表(以折现图为例) 这应该是很基本的需求也是很容易实现的,代码和效果如 ...
- code#5 P2 棋子
棋子 时间限制: 1.0 秒 空间限制: 512 MB 相关文件: 题目目录 题目描述 棋盘从左到右被分割成 n(n≤1000) 个格子,从左到右编号为1,2,...,n.棋盘上有 m(m≤n) ...