今天花了一下午的时间 把html所有属性大概熟悉了一遍.......
文档地址 http://www.w3school.com.cn/tags/html_ref_standardattributes.asp
目录
1. 元信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!-- 元素可提供有关页面的元信息 -->
<title>元信息学习</title>
<base href="http://www.w3school.com.cn/i/" /> <!-- 为页面上的所有链接规定默认地址或默认目标 -->
<base target="_top" />
</head>
<body>
<a href="http://www.baidu.com/" target="_top">W3C</a>
</body>
</html>
2. 列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表学习</title>
</head>
<body>
<ul> <!-- 定义无序列表 -->
<li>Coffee</li> <!-- 定义列表的项目 -->
<li>Tea</li>
<li>Milk</li>
</ul>
<ol> <!-- 定义有序列表 -->
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<dl> <!-- 定义了定义列表 -->
<dt>计算机</dt> <!-- 定义列表中的项目 -->
<dd>用来计算的仪器 ... ...</dd> <!-- 描述列表中的项目 -->
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
</body>
</html>
3. 图像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像学习</title>
</head>
<body>
<img src="https://dwz.cn/8TCVthrE" usemap="#planetmap" alt="邓紫棋: 冠军制作人"> <!-- 定义图像 alt当图片不存在时显示的内容-->
<!--<map name="planetmap" id="planetmap"> <!– 带有可点击区域的图像映射 –>
<area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
<area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
<area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>-->
<br>
<canvas id="myCanvas"></canvas> <!-- 定义一个图形 -->
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
<hr>
<figure> <!-- 带媒介的图片 注 ie8或以前不支持 -->
<figcaption>邓紫棋啊</figcaption> <!-- 带标题 -->
<img src="https://dwz.cn/8TCVthrE" width="350" height="234" />
</figure>
</body>
</html>
4. 样式学习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样式学习</title>
<style> /* 定义文档的样式信息 */
</style>
</head>
<body>
<!--
<div> 可定义文档中的分区或节（division/section）
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行
-->
<div style="color:#00FF00">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
<!--
请使用 <span> 来组合行内元素，以便通过样式来格式化它们
span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化
-->
<span>Hello 516!</span> <!-- <span> 标签被用来组合文档中的行内元素 -->
<header> <!-- 定义文档的页眉（介绍信息） ie8或以前不支持 -->
Hello I am 516
I wanna be CTO! yeah
</header>
<footer> <!-- 定义文档或节的页脚 注ie8或以前不支持 -->
<p>Posted by: W3School</p>
<p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p>
</footer>
<section>
<h1>PRC</h1> <!-- 定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分 -->
<p>The People's Republic of China was born in 1949...</p>
</section>
<article> <!-- 规定独立的自包含内容 注:ie8或以前不支持 -->
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9（简称 IE9）于 2011 年 3 月 14 日发布.....</p>
</article>
<hr>
<p>Me and my family visited The Epcot center this summer.</p>
<aside> <!-- 定义其所处内容之外的内容 -->
<h4>Epcot Center</h4>
The Epcot Center is a theme park in Disney World, Florida.
</aside>
</body>
</html>
5. 格式
<!DOCTYPE html> <!-- 告诉浏览器 html的版本是 html5 -->
<html> <!-- 告诉浏览器是一个html文档-->
<head> <!-- 定义文档的头部,他是所有头部元素的容器 文档头部描述了文档的各种属性和信息 -->
<title>HelloWorld</title> <!-- 定义文档的标题(是head部分中唯一必须存在的元素) -->
<meta charset="UTF-8"/> <!-- 定义文档的编码 -->
</head>
<body> <!-- 定义文档的主体, 包含文档的所有内容 -->
<h1>我是h1</h1>
<h2>我是h2</h2>
<h3>我是h3</h3>
<hr> <!-- 水平分割线 hr是一个空标签-->
<p>我是一个P标签</p> <!-- 定义段落 会自动在其前后创建一些空白 也可以使用css控制这些-->
<br> <!-- br是空标签 没有结束标签 告诉浏览器停止当前的文本流, 并在下一行的左边或左对齐的内联图形或表格的右边开始继续输出文本流-->
我有一个<abbr title="2年全栈 / 3年架构 / 4年CTO">梦想</abbr>, 不知何时能实现啊. <!-- 标记一个缩写 IE6或早期不支持此标签 -->
<address>对 就是我 那个6岁的孩子</address> <!-- 如果在body内 表示文档的联系信息 -->
<!-- 以下是字体样式元素标签,如果您只是希望改变样式 建议使用CSS来丰富样式 -->
<tt>Hello I am YoungBlood</tt> <!-- 类似于打字机或等宽的文本效果 -->
<br>
<i>Hello I am CassanSun</i> <!-- 斜体字效果 -->
<br>
<b>Hello I am 516</b> <!-- 加粗字体 -->
<br>
<big>Hello I am sunlin</big> <!-- 大号字体 -->
<br>
<small>Hello I am Sun</small> <!-- 小号字体 -->
<hr>
<bdo dir="rtl">Here is some text</bdo> <!-- 定义文字的方向(反转) -->
<blockquote> <!-- 定义一个块引用 -->
<p>这是一个块引用</p>
<p>这是一个块引用</p>
<p>这是一个块引用</p>
</blockquote>
<hr>
<h1><center>以下都是短语元素</center></h1>
我有句话要说 <em>我有一个Apple</em> <!-- 告诉浏览器把其中的文本表示为强调的内容 -->
<br>
还有句话 <stong>我有一个 Pen</stong> <!-- 把文本定义为语气更强的强调的内容 -->
<br>
你知道的 <dfn>Java是后端语言</dfn> <!-- 可标记那些对特殊术语或短语的定义。 -->
<br>
<code>HelloWorld!</code> <!-- 表示计算机源代码或者其他机器可以阅读的文本内容。 -->
<br>
<kbd>你好鸭</kbd> <!-- 定义键盘文本。它表示文本是从键盘上键入 -->
<br>
<var>123</var> <!-- 表示变量的名称，或者由用户提供的值 -->
<br>
<cite>Java编程思想</cite> <!-- 标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题 -->
<br>
这个 <del>SpringBoot 2企业应用实战</del> 要被我删掉了 <!-- 定义文档中已被删除的文本 -->
<br>
我想<del>玩游戏</del><ins>学习</ins>. <!-- <ins> 代表新插入部分 -->
<br>
我是<mark>社会主义接班人</mark> 哈哈哈 <!-- 突出显示部分文本 注: ie8即以前不支持-->
<br>
<!-- value当前值 min允许的最小值 max允许的最大值 -->
<meter value="3" min="0" max="10"></meter> <!-- 使用 meter 元素来度量给定范围（gauge）内的数据 -->
<meter value="0.3"></meter> <!-- 使用百分比方式 -->
<br>
<pre> <!-- 可定义预格式化的文本 通常被用于放源代码 -->
<a href="http://www.baidu.com" >点击跳往百度</a>
<a a href="http://www.baidu.com" >点击跳往百度</a>
</pre>
<br>
<progress value="10" max="100"></progress> <!-- 定义任何类型的任务的进度 注: ie9或之前 不支持 -->
<br>
<q>这是一个短的引用</q>
<br>
你好鸭<sup>这是上标</sup> <!-- 定义一个上标文本 -->
你好啊<sub>这是下标</sub> <!-- 定义一个下标文本 -->
<br>
<p>我们在每天早上<time>9:00</time>开始营业。</p> <!-- 定义时间和日期 -->
<br>
如果想学习 AJAX，那么您必须熟悉 XML<wbr>Http<wbr>Request 对象。 <!-- 一段带有 Word Break Opportunity 的文本 注: ie不支持-->
</body>
</html>
6. 框架
<!DOCTYPE html>
<html>
<head>
<title>框架学习</title>
<meta charset="UTF-8">
</head>
<frameset rows="25%,50%,25%">
<frame src="frame_a.html" />
<frame src="frame_b.html" />
<frame src="frame_c.html" />
</frameset>
</html>
7. 编程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>编程学习</title>
</head>
<body>
<script> /* 定义客户端脚本 */
document.write("Hello World!")
</script>
<embed src="/i/helloworld.swf" /> <!-- 定义嵌入的内容，比如插件 -->
<object classid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628" id="Slider1" width="100" height="50"> <!-- 定义嵌入的对象 -->
<param name="BorderStyle" value="1" /> <!-- 定义对象的参数 -->
<param name="MousePointer" value="0" />
<param name="Enabled" value="1" />
<param name="Min" value="0" />
<param name="Max" value="10" />
</object>
</body>
</html>
8. 表单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>这是一个表单标签学习文件</title>
</head>
<body>
<h1>
<center>表单学习</center>
</h1>
<!--
<form>
action: 当提交表单时向何处发送表单数据
method: 用于发送 form-data 的 HTTP 方法
name: 表单的名称
target: 规定在何处打开 action URL
accept-charset: 规定服务器可处理的表单数据字符集
autocomplete: 规定是否启用表单的自动完成功能
-->
<form action="http://www.sun.com/user" method="get" id="loginForm" name="loginForm" target="_blank" accept-charset="UTF-8" autocomplete="off"> <!-- 定义一个表单(块级元素) -->
<!--
<input>
autocomplete: 规定是否使用输入字段的自动完成功能
autofocus: 规定输入字段在页面加载时是否获得焦点,不能给hidden使用
checked: 规定此 input 元素首次加载时应当被选中
disabled: 当 input 元素加载时禁用此元素
form: 位于表单之外绑定的form的id
formaction: 覆盖表单的 action 属性,带有两个提交按钮的表单（不同的 action 值）
formenctype: 覆盖表单的 enctype 属性。带有两个提交按钮的表单（拥有有不同的编码方式）
formmethod: 见上
type: 规定 input 元素的类型
more see http://www.w3school.com.cn/tags/tag_input.asp
-->
<label for="nameinput">name</label> <!-- 定义标注（标记) Safari 2或以前不支持 -->
<input id="nameinput" autocomplete="off" autofocus="autofocus" checked="checked" form="loginForm"> <!-- 定义输入控件, 没有结束标签-->
<br>
<!--
more see http://www.w3school.com.cn/tags/tag_textarea.asp
-->
<textarea>Hello EveryBody</textarea> <!-- 定义多行的文本输入控件 -->
<br>
<!--
more see http://www.w3school.com.cn/tags/tag_button.asp
-->
<button type="button">Click Me!</button> <!-- 定义一个按钮 -->
<br>
<!--
more see http://www.w3school.com.cn/tags/tag_select.asp
-->
<select>
<option>Java</option> <!-- 定义选择列表中的选项 -->
<option>前端</option>
<option>Kotlin</option>
<option>Python</option>
<option>GO</option>
</select><!-- 定义选择列表（下拉列表） -->
<br>
<!--
more see http://www.w3school.com.cn/tags/tag_optgroup.asp
-->
<select>
<optgroup label="Swedish Cars"> <!-- 把相关的选项组合在一起 -->
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value ="mercedes">Mercedes</option>
<option value ="audi">Audi</option>
</optgroup>
</select>
<hr>
<input id="myCar" list="cars" />
<datalist id="cars"> <!-- 定义下拉列表 注 Internet Explorer 和 Safari 不支持-->
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
<br>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
</form>
</body>
</html>
9. 表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border="1"> <!-- 定义一个表格 -->
<caption>Monthly savings</caption> <!-- 定义表格标题 必须紧随 table -->
<thead> <!-- 定义表格的表头 -->
<tr> <!-- 定义表格行 -->
<th>Month</th> <!-- 定义表头 -->
<th>Savings</th>
</tr>
</thead>
<tbody> <!-- 定义表格中的主体内容 -->
<tr>
<td>January</td> <!-- 定义表格单元 -->
<td>$100</td>
</tr>
</tbody>
<tfoot> <!-- 定义表格中的表注内容（脚注） -->
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
</body>
</html>
10. 视频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>视频学习</title>
</head>
<body>
<!--
controls: 向用户显示控件，比如播放按钮
autoplay: 音频在就绪后马上播放
more see http://www.w3school.com.cn/tags/tag_audio.asp
-->
<audio src="http://www.w3school.com.cn/i/horse.ogg" controls="controls" loop preload> <!-- 定义音频 -->
Your browser does not support the audio element.
</audio>
<hr>
<h1>有播放列表的音频</h1>
<audio controls autoplay>
<source src="http://www.w3school.com.cn/i/horse.ogg" type="audio/ogg"> <!-- 定义媒介源 -->
<source src="http://u6.gg/sGgEw" type="audio/mp3">
Your browser does not support the audio element.
</audio>
<hr>
<video width="320" height="240" controls="controls"> <!-- 定义视频 -->
<source src="forrest_gump.mp4" type="video/mp4" />
<source src="forrest_gump.ogg" type="video/ogg" />
<track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese">
<track kind="subtitles" src="subs_eng.srt" srclang="en" label="English">
</video>
</body>
</html>
11. 链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>连接学习</title>
<!-- more see http://www.w3school.com.cn/tags/tag_link.asp -->
<link rel="stylesheet" type="text/css" href="theme.css" /> <!-- 标签定义文档与外部资源的关系 -->
</head>
<body>
<a href="http://www.w3school.com.cn">W3School</a> <!-- 超链接 -->
<nav> <!-- 定义导航链接的部分 -->
<a href="index.asp">Home</a>
<a href="html5_meter.asp">Previous</a>
<a href="html5_noscript.asp">Next</a>
</nav>
</body>
</html>
扫一扫
1052
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
