html小笔记
准备考试之余,看点html吧吧吧。。。这里写点小笔记。。。唤起沉睡中的记忆。。。
唤醒记忆三部曲——html(Hypertext Markup Language)
<html>
标签:这个标签是一张网页的最外层的标签,包含一个网页的所有内容。<html> ... </html>
<body>
标签:页面中所有可见元素都应该包含在其中。<html> <body> ... </body> </html>
<head>
标签:存放一些关键字等给浏览器和搜索引擎所用,不显示出来,一个页面只能有一个head标签。<html> <head> <meta name="keywords" content=".."> </head> </html>
<title>
标签:用于指定页面的标题,不显示在页面里,显示在浏览器上面的页面一行里。<html> <head> <title>..标题名..</title> </head> </html>
标题标签:有
<h1>
,<h2>
,<h3>
,…<h6>
六个标题,可以渲染,也有<h7>
,<h8>
,等,不过不渲染了。没有嵌套关系和并列关系,只是代表优先级不一样。<html> <body> <h1>..标题..</h1> <h2>..标题..</h2> ... </body> </html>
<p>
标签:段落标签,一对p标签可以分一个段落,你在html中键入一个换行键是不会换行的,需要用段落标签。<html> <body> ...文字.. <p> ....接上的文字... </p> .... </body> </html>
<div>
标签:division(区域)容纳其他的元素,很常用,常见,简单,区分容纳,可嵌套,可以看成目录这各功能。<html> <body> <div> .. </div> <div> .. </div> .. </body> </html>
<a>
标签:用于指定网页中的链接,锚链接(anchor)。其中,target=self表示在当前页打开网址,target=blank表示新打开一网页显示链接网址。<html> <body> <a href="http:www...." target="self">替换的文字</a> </body> </html>
<img>
标签:图片标签(image)指定图片。没有结束标签</img>
,支持jpg,png,svg,gif等。<html> <body> <img src="要插入图片的本地地址或网络地址" alt="图片加载失败显示的内容"> </body> </html>
表格类标签:
<table>
指创建表格,<tr>
指行,<td>
指单元格,<th>
指定表格的属性。<thead>
存放表格属性名,<tbody>
存放表格中的值,这里的<thead>
指的是存放表格属性的地方,表格属性指列如姓名,年龄这些。<tbody>
指的是存放这些属性的值得地方,列如lifan,13这些。建议建表最好用css来完成。<html> <body> <table border="1"> <thead> <tr> <th> name </th> <th> age </th> </tr> </thead> <tbody> <tr> <td> lifan </td> <td> 13 </td> </tr> </tbody> </table> </body> </html>
<header>
标签,<footer>
标签:指标题相关的内容,概括整个页面的内容,footer标签,指指定页脚的相关内容。例如联系方式,自我介绍,联系地址等。他们也是一个容器,和div的区别就在于里面的内容是有一定的语义的,方便搜索引擎等的收集,而div里可以放任何东西,且没有语义。<html> <body> <header> <h1>..hello world..</h1> <small>... </header> ....正文.... <footer> ...contact...privacy.. </footer> </body> </html>
<link>
,<script>
标签:既可以写在<head>
里也可以写在<body>
里。不能直接在浏览器中显示。<link>
标签加载外部资源,列如样式表等,script标签主要用于加载脚本,列如javascript。<html> <head> ... <link href="..xx.css"> ... </head> <body> ... <script src="..yy.js"> ... </body> </html>
<button>
标签:按钮标签,是一个触发机制,一般需要和其他东西共同使用,列如和表单使用和javascript使用。<html> <body> ... <buttom>signup</button> ... </body> </html>
<abbr>
标签:缩写(abbrevitation),用于显示缩写的内容的所有内容。<html> <body> <abbr tittle="hyper text markup language">html</abbr>is interesting </body> </html>
<code>
,<pre>
标签:用于包含代码,显示代码。<code>
标签是行内元素,一般都是镶嵌在所在行里的,适合小段代码;<pre>
标签适合用于大段代码。还可以设置代码的属性等。<html> <head> <style media=".."> code{ background: rgba(0,0,0,0); border-radius: 11px; } </style> </head> <body> .....<code>a==2</code> ... <pre> ... ... </pre> </body> </html>
<input>
标签:用于接收用户输入。<input>
标签类型比较多:有:<input type="text"> 默认值 <input type="password"> 密码输入 <input type="radio"> 单选框输入 <inout type="checkbox"> 多选框 <input type="file"> 选择文件 <input type="reset"> 重置表单 ...
嗯。。。暂时先整理在这里,有空在网上找点小例子,有补充的再补充。。。