HTML基础1--概述及简介

HTMl简介
  • HTML(HyperText Markup Language) 不是一门编程语言,而是一种用来告知浏览器如何组织页面的标记语言
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <p>伊洛yiluo 微信搜索:伊洛的小屋</p>
</head>
<body>

</body>
</html>

HTML5文档省略了<html>, <head>,<body>等元素,使用HTML5DOCTYPE声明文档类型,简化<meta>元素的charset属性值,省略<p> 元素的结束标记,使用<元素/> 的方式结束<meta>元素,以及
元素等语法知识要点。

<!DOCTYPE html>
<meta charset="UTF-8">
<title>HTML5基本语法</title>
<h1>HTML5的目标</h1>
<p>HTML5的目的是为了能够创建更简单的WEB程序,书写出更简洁的HTML代码</p>
<br/> 例如,为了是web程序的开发变得更容易,提供了更多api,为了使得html变得更简洁,开发出了新属性,新的元素等,总体来说
为下一代的web 平台提供了许许多多的功能
  • HTML 标签不区分大小写
HTML包含
  • 开始标签
  • 结束标签
  • 内容
  • 元素
内容类型

html5的文件扩展名和内容类型保持不变。例如,扩展名仍然为'.html', '.htm'内容类型(ContentType)仍然为'text/html'

  • 文档类型
    DOCTYPE 命令声明文档类型,它是html文档必不可少的组成部分,且必须位于代码第一行。根据化繁为简的设计原则,html5对文档类型和字符说明都进行了简化
    在HTML5中,刻意不使用版本声明,一份文档将会适用于所有版本的HTML,在HTML5中,文档类型的声明方法如下
<!DOCTYPE html>

当使用工具时,也可以再DOCTYPE声明中加入SYSTEM识别符,声明方法如下

<!DOCTYPE HTML SYSTEM "about:legacy-compat">

在HTML5中,DOCTYPE声明方式是不区分大小写的,引号也不区分单引号还是双引号

  • 字符串编码
    在HTML5中,继续延用meta元素定义文档的字符编码,但是简化了charset属性的写法
<meta charset="UTF-8">
  • 标记省略
    在HTML5中,元素的标记可以省略。具体来说,元素的标记分为3种类型:不允许写结束标记,可以省略结束标记,开始标记和结束标记全部可以省略。
    不允许写结束标记的元素指,不允许使用开始标记与结束标记讲元素括起来的形式,只允许使用</元素>的形式进行书写
<br>错误</br>
</br> 正确
嵌套元素
  • 一个元素放到其它元素之中,这被称作嵌套
块级元素和内联元素
  • 块级元素在页面中以块的形式展现
  • 内联元素通常出现在块级元素中并环绕文档内容的一小部分,而不是一整个段落或者一组内容。内联元素不会导致文本换行
空元素
  • 不是所有元素都拥有开始标签,内容,结束标签。一些元素只有一个标签,通常用来在此元素所在位置插入/嵌入一些东西。例如:元素<img>
属性

属性包含:

  • 一个空格,在属性和元素名称之间
  • 属性名称,后面跟着一个等于号
  • 一个属性值,由一对引号“ ”引起来
    属性值两边既可以用双引号,也可以用单引号。HTML5在此基础做了一些改进,当属性值不包括字符串、<、>、=、单引号、双引号等字符时,属性值两边的引号可以省略
<input type="text">
<input type='text'>
<input type=text>
布尔属性

没有值的属性,被称为布尔属性,只能有跟它的属性名一样的属性值
对于具有boolean值的属性,例如disabled, readonly等,当只写属性而不指定属性时,表示属性值为true, 如果想要属性值设为false,可以不使用该属性。另外要想将属性设定为true,也可以将属性名设定为属性值,或将空字符串设定为属性值
实例

<!--只写属性,不写属性值,代表属性为true-->
<input type="checkbox" checked>
<!--不写属性,代表属性为false-->
<input type="checkbox">
<!--属性值=属性名,代表属性为true-->
<input type="checkbox" checked="checked">
<!--属性值=空字符串,代表为true-->
<input type="checkbox" checked="">
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,776评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,527评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,361评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,430评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,511评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,544评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,561评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,315评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,763评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,070评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,235评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,911评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,554评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,173评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,424评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,106评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,103评论 2 352

推荐阅读更多精彩内容