一、什么是HTML
1.HTML 是用来描述网页的一种语言
- HTML 指的是超文本标记语言: HyperText Markup Language
- HTML 不是一种编程语言,而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
2.HTML标签
HTML标签通常指的是HTML标记(HTML tag)
- HTML 标签是由尖括号包围的关键词,比如 <html>
- HTML 标签通常是成对出现的,比如 <b> 和 </b>
- 标签对中的第一个标签是开始标签,第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
二、HTML元素
1.简介
例如 <p>这是一个段落</p>
<p>作为开始标签,通常被称为起始标签(opening tag)
</p>作为结束标签,通常被称为闭合标签(closing tag)
“这是一个段落”是元素得内容,而整个<p>这是一个段落</p>是HTML元素
2.语法
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容(empty content)
- 空元素在开始标签中进行关闭(以开始标签的结束而结束)
- 大多数 HTML 元素可拥有属性
- 使用时一定要注意使用结束标签
- 推荐使用小写进行编写(万维网联盟(W3C)在 HTML 4 中推荐使用小写,而在未来 (X)HTML 版本中强制使用小写)
三、HTML属性
1.简介
- HTML 元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现,比如:name="value"。
eg:
<a href="http://www.runoob.com">这是一个链接</a>
HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定
2.注意事项
- 属性值应该被包括在引号内,引号通常为双引号,单引号也可以
- 若属性的值本身含有双引号,则使用时需使用单引号
- 同样推荐使用小写进行编写
3.索引
因为HTML的标签很多,每个标签都有自己的属性。但由于数量实在太多,全部记下不太现实,所以我的策略是记住大致有些什么标签,和功能,具体的标签及其对应的属性在需要用的时候去查就行了。
HTML 标签列表(字母排序) | 菜鸟教程 (runoob.com)https://www.runoob.com/tags/html-reference.html
四、HTML样式 CSS
1.简介
CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。
2.使用方式
1.内联样式:在HTML元素里使用“style”属性
eg:
<p style="color:blue;margin-left:20px;">这是一个段落。</p> 改变段落的颜色和左外边距。
<h1 style="text-align:center;">居中对齐的标题</h1> 设置标题居中
2.内部样式表:在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
当单个文件需要特别样式时,就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表
eg:
<head> <style type="text/css"> body {background-color:yellow;} p {color:blue;} </style> </head>
3.外部引用:使用外部CSS文件
当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。
eg:
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
五、关于HTML5
1.简介
HTML5是下一代HTML标准,是HTML最新的修订版本,目的是在移动设备上支持多媒体。
2.HTML5的一些新特性:
- 用于绘画的 canvas 元素
- 用于媒介回放的 video 和 audio 元素
- 对本地离线存储的更好的支持
- 新的特殊内容元素,比如 article、footer、header、nav、section
- 新的表单控件,比如 calendar、date、time、email、url、search
3.改进
HTML5 多媒体
使用 HTML5 你可以简单的在网页中播放 视频(video)与音频 (audio) 。
HTML5 应用
使用 HTML5 你可以简单地开发应用
- 本地数据存储
- 访问本地文件
- 本地 SQL 数据
- 缓存引用
- Javascript 工作者
- XHTMLHttpRequest 2
HTML5 图形
使用 HTML5 你可以简单的绘制图形:
- 使用 <canvas> 元素。
- 使用内联 SVG。
- 使用 CSS3 2D 转换、CSS3 3D 转换。
HTML5 使用 CSS3
- 新选择器
- 新属性
- 动画
- 2D/3D 转换
- 圆角
- 阴影效果
- 可下载的字体
HTML5 表单
新表单元素, 新属性,新输入类型,自动验证。
元素
建议查看手册
HTML 标签列表(字母排序) | 菜鸟教程 (runoob.com)https://www.runoob.com/tags/html-reference.html
六、总结
HTML本质上是在web上使用的通用标记语言,允许你格式化文本,添加图片,创建链接、输入表单、框架和表格等等,并可将之存为文本文件,浏览器即可读取和显示。而HTML5本质上是HTML的扩展,多了许多功能。对于HTML的学习,需要较为熟练地掌握标签及其属性的用法,若要更深层次的学习和使用,则还需掌握CSS和JSP。