Html5元素及基本语法详解


Posted in HTML / CSS onAugust 02, 2016

HTML标签
开始标签(opening tag):开放标签
结束标签(closing tag):闭合标签

元素
定义:HTML元素指的是从开始标签到结束标签的代码(元素以开始标签为起始以借宿标签终止)
元素的内容:元素的内容指的是开始标签与结束标签之间的内容

元素的特点:
1,大多数HTML元素可嵌套(可以包括其他的HTML元素)
2,HTML文档有嵌套的HTML元素构成
3,不要忘记结束标签,未来的HTML版本不允许省略结束标签
4,空的html元素
5,没有内容的html元素被称为元素的空内容,空元素是在开始标签中关闭的
注意:
空元素和空内容的区别:空元素的开始标签和结束标签是相同的,注重的是标签。空内容指的是元素内的内容是空的,注重的是内容。

HTML基本结构
<!doctype html>:不是标签,只是用以声明帮助浏览器正确地现实网页
<head></head>元素是所有头部元素的容器
<meta>标签始终位于head元素中,标签提供关于HTML文档的元数据
<style>标签用于为HTML文档定义样式信息
<title></title>定义文档的标题
<body></body>之间的文本是网页课件的内容
<html></html>之间的文本描述网页

HTML属性
html标签可以拥有属性,属性提供有关html元素的更多信息
属性总是以名称/值对的形式出现
属性值应该始终被包括在括号内,双引号是最常见的,不过使用单引号也没有问题

 

Html5元素及基本语法详解

 

 HTML注释
可以在代码中插入注释,提高代码的可读性,注释不会显示在页面中,浏览器会忽略它们
格式:<!--this is a comment-->

XML/HTML Code复制内容到剪贴板
  1. <!doctype html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>无标题文档</title>  
  6. <style>  
  7.   
  8. #box1{   
  9.     background-color:red;   
  10. }   
  11. .div1{background:yellow;}   
  12. .div2{border:1px solid #000;}   
  13.   
  14. </style>  
  15. </head>  
  16.   
  17. <body>  
  18.   
  19. <!-- id只能是唯一的 -->  
  20. <div style="width:100px; height:100px; border:1px solid #000;" id="box1 box2"></div>  
  21.     
  22.   
  23. <!--class可以是多个的-->  
  24. <div  style="width:100px; height:100px;"  class="div1 div2" ></div>  
  25.   
  26. <!--class可以是多个的-->  
  27.   
  28. <a href="#" title="我是一个提示信息">我是一个链接</a>  
  29.   
  30. </body>  
  31. </html>  

以上这篇Html5元素及基本语法详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

原文地址:http://www.cnblogs.com/Sivan/archive/2016/08/01/5727083.html

HTML / CSS 相关文章推荐
CSS3对图片照片进行边缘模糊处理的实现
Aug 08 HTML / CSS
基于CSS3制作立体效果导航菜单
Jan 12 HTML / CSS
CSS3 仿微信聊天小气泡实例代码
Apr 05 HTML / CSS
利用CSS3 动画 绘画 圆形动态时钟
Mar 20 HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
Aug 30 HTML / CSS
详解Html5中video标签那些属性和方法
Jul 01 HTML / CSS
使用css如何制作时间ICON方法实践
Nov 12 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
Sep 21 HTML / CSS
推荐10个HTML5响应式框架
Feb 25 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
Jun 30 HTML / CSS
使用phonegap操作数据库的实现方法
Mar 31 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
Nov 01 HTML / CSS
Html5 web本地存储实例详解
Jul 28 #HTML / CSS
浅谈Html5中视频 音频标签 进度条的问题
Jul 26 #HTML / CSS
html5 初试 indexedDB(推荐)
Jul 21 #HTML / CSS
浅谈HTML5 &amp; CSS3的新交互特性
Jul 19 #HTML / CSS
HTML5和CSS3实例教程总结(推荐)
Jul 18 #HTML / CSS
HTML5 拖放功能实现代码
Jul 14 #HTML / CSS
HTML块级标签汇总(小篇)
Jul 13 #HTML / CSS
You might like
PHP实现的mysql读写分离操作示例
2018/05/22 PHP
PHP实现防止表单重复提交功能【基于token验证】
2018/05/24 PHP
一些不错的js函数ajax
2008/08/20 Javascript
jQuery 表格插件整理
2010/04/27 Javascript
JavaScript返回网页中锚点数目的方法
2015/04/03 Javascript
JavaScript实现图片滑动切换的代码示例分享
2016/03/06 Javascript
jquery 获取select数组与name数组长度的实现代码
2016/06/20 Javascript
jQuery中常用动画效果函数(日常整理)
2016/09/17 Javascript
vue cli 全面解析
2018/02/28 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
2018/10/20 Javascript
js实现input密码框显示/隐藏功能
2020/09/10 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
2019/02/10 Javascript
webpack4 SplitChunks实现代码分隔详解
2019/05/23 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
2019/06/10 jQuery
JavaScript适配器模式原理与用法实例详解
2020/03/09 Javascript
纯JS实现五子棋游戏
2020/05/28 Javascript
深入了解Vue.js 混入(mixins)
2020/07/23 Javascript
python f-string式格式化听语音流程讲解
2019/06/18 Python
python实现连连看辅助之图像识别延伸
2019/07/17 Python
python之pexpect实现自动交互的例子
2019/07/25 Python
Python中最好用的命令行参数解析工具(argparse)
2019/08/23 Python
python 截取XML中bndbox的坐标中的图像,另存为jpg的实例
2020/03/10 Python
意大利拉斐尔时尚购物网:Raffaello Network(支持中文)
2018/11/09 全球购物
Kipling意大利官网:世界著名的时尚休闲包袋品牌
2019/06/05 全球购物
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
数据库连接池的工作原理
2012/09/26 面试题
汽车销售求职自荐信
2013/10/01 职场文书
校庆接待方案
2014/03/18 职场文书
公务员个人考察材料
2014/12/23 职场文书
初中毕业生自我评价
2015/03/02 职场文书
英语教师求职信范文
2015/03/20 职场文书
暂住证明怎么写
2015/06/19 职场文书
2015年教师个人业务工作总结
2015/10/23 职场文书
解决tk mapper 通用mapper的bug问题
2021/06/16 Java/Android
MongoDB数据库常用的10条操作命令
2021/06/18 MongoDB
Python3的进程和线程你了解吗
2022/03/16 Python