博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML---简介
阅读量:7116 次
发布时间:2019-06-28

本文共 3314 字,大约阅读时间需要 11 分钟。

什么是HTML?

HTML是用来描述网页的一种语言

HTML是超文本标记语言(Hyper Text Markup Language)

HTML不是变成语言,是一种标记语言

 

HTML新特性

用于绘画的canvas标签

用于媒介回放的video和audio元素

对本地离线存储更好支持

新的特殊内容元素

        如:article、footer、header、nav、section

新的表单空间

        如:calendar、date、time、email、url、search

浏览器的支持

        Safari、Chrome、Firefox以及Opera包括IE9基本支持了HTML5

 

HTML基础

声明:<!DOCTYPE>

HTML也有多个不同的版本,只有完全明白页面中使用的确切HTML版本,浏览器才会完全正确的显示出HTML页面。这就是<!DOCTYPE>的用处。

 

HTML基础标签:

html---所有的标签都会包含在html这个标签当中,一般用尖括号”<html>”表示元素,而元素是一对一对的,有开始就有结束,用”</html>”表示元素结束。元素开始喝元素结束中间,就是元素的内容啦。

    

 

head---用来定义“头部”的信息,比如:编码格式

这个编码格式还是有必要定义的,如果不定义就会在预览的时候出现乱码

 
我就是要在body里面直接写文字。哼哼。

定义编码UTF-8之后,文字就可以正常显示出来了。

 
我就是要在body里面直接写文字。哼哼。

 

body---用来表示正文,一般显示页面的内容,基本网页编码的一切,都是在body里面进行的。出了title标题标签还有一些特殊的标签

title---用来表示标题的

h---用来表示标题,分别有h1、h2、h3、h4、h5、h6来表示文字不同的大小

 
我是title,我就是浏览器的标题,O(∩_∩)O
我是body,你看到我了吗?

我是h1,我是最大的,O(∩_∩)O

我是h2,我是还算比较大了啦~

我是h3,我还算正常吧。

我是h4,我不是太大

我是h5,我怎么这么小??
我是h6,我是最小的,T_T

可以看到,设置后的效果

 

p---用来表示段落

其实p标签和直接在body里面写,显示出来的效果是一样的,但是p标签表示的是一个段落,如果在body里面直接写文字的话,就没法换行了

 
我是title,我就是浏览器的标题,O(∩_∩)O
我就是要在body里面直接写文字。哼哼。 我是第二行。 我是第三行。

我还是老老实实呆着小p里面吧~

我是第二行。

我是第三行。

HTML属性

标签可以拥有属性为元素提供更多的信息,属性以键/值的形式出现,比如:href = “www.baidu.com”

常用标签属性:

<h1 align>

<body bgcolor>

<a href="" target="">

通用属性:

class

id

style

通用属性都是给标签定义一个名字,后面可以通过这个名字用CSS来调用,然后修改样式

 

<h1 align="">---对其属性

            

我是标题3,我是center居中的属性

我也是标题3,我是left左对齐的属性

我还是标题3,我是rigth右对齐的属性

<body bgcolor="">---背景颜色

            

 

<a href="">---超链接的属性,可以填URL

<a href="" target="">---target是点击超链接后的打开方式,默认是self,如果设置成_banlk就可以在新标签页中打开了。

点击之后,就会跳出新的标签页

 

HTML格式化

下标就是格式化的使用

标签 描述
<b> 定义粗体文本
<big> 定义大号文字
<em> 定义着重文字
<i> 定义斜体文字
<small> 定义小号文字
<strong> 定义加重语气
<sub> 定义下标文字
<sup> 定义上标文字
<ins> 定义插入文字
<del> 定义删除文字
            
我是b标签格式,我是加粗的
我是big,我是显示大字体
我是em,我代表着重语气
我是i,我定义斜体的文字
我是small,我定义小号字体
我是strong,我定义加重语气
我的出现是为了体现出sub是下标的我是sub,我是下标文字
我也是出了让sup体现上标的我是sup,我是下标文字
我是ins,我是插入文字,我有一条下横线
我是del,我是删除文字,我中间有条横线代表我已经被删除了。

 

HTML样式

外部样式表

使用link可以用来调用css更改标签样式

<link rel="stylesheet" type="text/css" href="[css的路径]">

这个link要写在头文件里面,也就是head标签里面,一般样式都会写在head里面。写在头文件里面比较方便,而且后期如果想要更改,也可以很快的找到link

html代码

            

我是标题1,我会被hello_css.css给引用成红色的

css代码

h1{
color: red;}

内部样式表

就是将css样式直接写进style标签里面

            

我是标题1,我被css样式引用成红色的

我是标题2,我被style改成绿色的

 

内联样式表

就是直接在标签里面写style,当然,这种方法后期修改就得一个一个的改了。非常麻烦

            

我是小p

 

HTML的链接

可以在<a>标签中实现链接,当然,也可以加入图片

比如我有一种皮卡丘的图片,在与html文件同目录的img文件夹下,下图是目录结构

点击皮卡丘后,进入百度首页

好吧,今天就写到这里。其实HTML还是蛮简单的,学习之后,对于测试、开发、网页游戏都会有一定的帮助。

转载于:https://www.cnblogs.com/yyhh/p/4206726.html

你可能感兴趣的文章
当今云计算的挑战:规划,流程和人员
查看>>
用DeepMind教AI玩游戏?一文为你讲清原理!
查看>>
我的WCF之旅(4):WCF中的序列化[上篇]
查看>>
NGINX小技巧--将所有目录和目录下所有文件分别给与不同的权限
查看>>
DOCKER功能练习
查看>>
如何来看单片机外设A/D转换器ADC0804时序图
查看>>
NetApp发布云计算计划及新操作系统
查看>>
IPHONE 6S电池保护壳丑?漂亮的都有专利了
查看>>
云计算和社交网络将推动美科技业重组
查看>>
浙江乌镇已布500多个人脸识别摄像头;宁波、嘉兴将引入中考英语人机对话考试技术,用机器为考生口语评分...
查看>>
15分钟学会使用Git和远程代码库
查看>>
《OpenStack实战》——1.3 关联OpenStack及其控制的计算资源
查看>>
《C++面向对象高效编程(第2版)》——1.15 小结
查看>>
人工智能悖论:简单的动作比复杂的推理更难以实现
查看>>
《C++游戏编程入门(第4版)》——2.9 使用逻辑运算符
查看>>
PostgreSQL修炼之道:从小工到专家. 2.1 从发行版本安装
查看>>
《Unity 5.x游戏开发实战》一1.2 从头开始——Unity中的项目
查看>>
深入实践Spring Boot1.4.1 在IDEA环境中运行
查看>>
《CUDA高性能并行计算》----1.2 运行我们自己的串行程序
查看>>
《HBase实战》一2.9 小结
查看>>