HTML5/CSS3/JavaScript

**基本元素**
元素名	属性名	属性说明	作用备注
<!--...-->			代码备注
<html>			根元素
<head>			页面头部
<title>			页面标题
<body>			页面主体
<h1>~<h6>			定义标题（字体大小区别）
<p>			定义段落
<br>			插入一个换行
<hr>			定义水平线
<div>			定义文档中的节
<span>			与div基本相似，区别是不默认不会换行显示

**文本格式化**
元素名	属性名	属性说明	作用备注
<b>			定义粗体文本
<i>			定义斜体文本
<em>			定义强调文本实际效果与斜体文本差不多
<strong>			与<b>标签的作用和用法基本相同 HTML5为该元素增加了语义，使用该元素包起来的文本则为重要文本
<small			定义小号字体文本通常用来标注诸如免责声明、注意事项、法律规定和版权相关的声名性文字
<sup>			定义上标文本
<sub>			定义下标文本
<bdo>	dir	只能指定两种属性值 1：dir = "ltr" 2：dir = "rtl"	指定属性显示文本不同效果 ltr属性值文本则从左向右排列 rtl属性值文本则从右向左排列

语义相关元素

元素名	属性名	属性说明	作用备注
<abbr>	title	该属性用于指定该缩写所代表的全称	用于表示一个缩写
<address>			用于表示一个地址，浏览器通常会用斜体字显示该标签内的文本
<blockquote>	cite	该属性指定该引用文本所引用的网址URL	用于定义一段长的引用文本，浏览器会用缩进的方式显示该标签内的文本该标签与<q>标签作用区别是该标签用于引用带换行的、大段文本
<q>			用于定义一段短的引用文本，浏览器会为这段文本添加引号该标签与<blockquote>标签的作用区别是该标签用于引用不带换行的、较短的文本
<cite>			用于表示作品(一本书、一部电影、一首歌曲)的标题，浏览器会用斜体字显示该标签内的文本
<code>			表示一段计算机代码
<dfn>			用于定义一个专业术语，浏览器会用粗体或斜体字显示该标签内的文本
<del>			定义文档中被删除的文本，浏览器通常会以中划线的形式来显示该标签内的文本 <ins>元素和<del>元素通常结合使用，用于表示文档被"修订"的效果 <del>表示被删除的文本 <ins>表示更新的文本
<ins>	cite datetime	cite：属性值为一个URL,该URL对应的文本解释了文本被删除或插入的原因。 datetime：定义文本被删除或插入的日期、时间	定义文档中插入的文本，浏览器通常会以中划线的形式来显示该标签内的文本 <ins>元素和<del>元素通常结合使用，用于表示文档被"修订"的效果 <del>表示被删除的文本 <ins>表示更新的文本
<pre>			用于表示该标签内的文本被预格式化，就是说元素所包含文本中的空格、回车、Tab键和其他格式字符都会被保留下来。
<samp>			用于定义示范文本内容
<kbd>			用于定义键盘文本，该元素用于表示文本时通过键盘输入的。通常在计算机使用文档、使用说明中会经常使用该元素。
<var>			用于表示一个变量，浏览器通常会用斜体字显示该元素内的文本

**超链接和锚点**
元素名	属性名	属性说明	作用备注
<a>	href	指定超链接所关联的另一个资源	点击该标签会跳转至该标签href属性指定的URL URL地址的解释如下： scheme:指定因特网服务的类型。最流行的是HTTP。　　　　URL最流行的scheme及对应资源　　　　file:访问本地磁盘上的文件　　　　ftp:访问远程FTP服务器上的文件　　　　http:访问WWW服务器上的文件　　　　news:访问新闻组上的文件　　　　telnet:访问Telnet连接　　　　gopher:访问远程Gopher服务器上的文件 domain:指定因特网域名，比如 crazyit.org、fkjava.org等。 host:指定此域中的主机。如果被省略，HTTP的默认主机是WWW。 port:指定主机的端口号。端口号通常可以被省略，HTTP服务的默认端口是80。 path:指定远程服务器上的路径，该路径也可以被省略，　　省略该路径默认被定为到网站的根目录。 filename:指定远程文档的名称。如果省略该文件名，通常会定为到index.html 　　　　　index.htm等文件，或定为到Web服务器设置的其他文件。
	target	指定使用框架集中的哪个框架来装在另一个资源
		1：_self 自身来装载新资源
		2：_blank 新窗口来装载新资源
		3：_top 顶层框架来装载新资源
		4：_parent 父框架来装载新资源
	media	指定目标URL所引用的媒体类型。默认值为all。只有当指定了href属性时改属性才有效
	name	指定name属性可以为该标签生成一个命名锚点 <a name="test"></a> 使用href属性可以直接连接到指定页面的该定位点 <a href="anchor.html#test">定位到test锚点</a>

**列表相关元素**
元素名	属性名	属性说明	作用备注
<ul>			定义无序列表，该元素只能包含<li>
<ol>	start	指定列表项的起始数字。默认是第一个，如1、A等	定义有序列表，该元素只能包含<li>
	type	指定使用哪种类型的编号，例如1代表使用数字， A和a代表使用字母，l和i代表罗马数字。该属性不推荐使用，推荐使用CSS来定义。
	reversed	该属性指定是否将排序反转。目前还没有浏览器支持该属性
<li>	定义列表项目		该元素可以包含与<div>完全类似的内容
<dl>	自定义列表		该元素只能包含<dt>和<dd>两种元素
<dt>	定义标题		该元素只能包含文本、图像、超链接、文本格式化元素和表单控件元素等。
<dd>	定义普通列表项		该元素可以包含与<div>完全类似的内容

**图像相关元素**
元素名	属性名	属性说明	作用备注
<img>	src
	alt
	height
	width
	usemap
<map>			一旦我们使用<map>元素定义来图片映射之后，就可以让指定图片使用该图片映射，通过为<img> 元素指定usemap属性让该图片使用图片映射，设置 usemap属性值为#mapname

转载于:https://www.cnblogs.com/duzuoyan/p/3742492.html

HTML5/CSS3/JavaScript相关推荐

《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 1.4 　真正的HTML5
本节书摘来异步社区<移动网页设计与开发 HTML5+CSS3+JavaScript>一书中的第1章,第1.4节,作者:[英]Peter Gasston,更多章节内容可以访问云栖社区&quo ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <! ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYP ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个可拖动的拼图游戏动画效果~适合初学者~超简单~ |it前端开发
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个可拖动的拼图游戏动画效果~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!D ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个影子~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个影子特效~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYPE ...
哆啦A梦主题网站(HTML5+CSS3+Javascript)
哆啦A梦主题网站 1 简介 2 技术介绍 3 项目演示和获取方式 4 打开方式 5 页面图片展示 6 部分代码展示 1 简介作为一名哆啦A梦的粉丝,也可以说是哆啦A梦的爱好者.我小时候特别喜欢看哆啦 ...
《HTML5+ CSS3+JavaScript 网页设计实战（视频教学版）》代码下载、简介与前言
代码下载:https://pan.baidu.com/s/1o8aBMjw(密码:f3u2) 图书简介本书由浅入深,系统.详尽地介绍了HTML5.CSS3和JavaScript相关技术及其在Web前 ...
【前端代码实例】使用HTML5+CSS3+JavaScript制作一个响应式的后台管理系统~带侧边导航栏仪表盘功能
bilibili在线视频演示地址: [前端代码实例]使用HTML5+CSS3+JavaScript制作一个响应式的后台管理系统~带侧边导航栏仪表盘功能效果图: 完整代码: <!DOCTYPE ...
【前端实例代码】Html5+css3+JavaScript实现新拟态新拟物风格(Neumorphism)图标按钮动效网页效果~手把手教学~新手必会~超简单 ~
b站视频演示效果: 效果图: 完整代码: <!DOCTYPE html> <html lang="en"> <head><meta cha ...
《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 2.5　RDFa
本节书摘来异步社区<移动网页设计与开发 HTML5+CSS3+JavaScript>一书中的第2章,第2.5节,作者:[英]Peter Gasston,更多章节内容可以访问云栖社区&quo ...

HTML5/CSS3/JavaScript

HTML5/CSS3/JavaScript相关推荐

最新文章

热门文章