HTML学习条记二
1、表格<table>
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
<tr>......</tr>定义行,<td>......</td>定义列
表头表示:
<tr> <th>heading</th> </tr>
假如要表示一个空行,可以用 空格占位符填充。
2、列表
第一种:无序列表——<ul>,使用粗体圆点标志
<ul> <li>Coffee</li> <li>Milk</li> </ul>
或者使用<ul type="circle">……使用的是空心圆点。
第二种:有序列表——<ol>,使用数字标志
<ol> <li>Coffee</li> <li>Milk</li> </ol>
或者使用<ol start="50">……表示数字从50开端标志。
第三种:自定义列表——<dl>
<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>
说明:
<dl>表示列表开端
<dt>表示列表项
<dd>表示列表项的定义
留意,列表项内部可以使用段落、换行符、图片、链接乃至其他列表等等。
3、HTML类
对HTML停止分类,能为元素的类定义CSS样式。
对雷同的类设定雷同的样式。
<!DOCTYPE html> <html> <head> <style> .cities { background-color:black; color:white; margin:20px; padding:20px; } </style> </head> <body> <p class="cities"> <h2>London</h2> <p> London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. </p> </p> </body> </html>
<p>是块级元素,用于设定雷同类。
<span>是行内元素。
<html> <head> <style> span.red {color:red;} </style> </head> <body> <h1>My <span class="red">Important</span> Heading</h1> </body> </html>
4、HTML网站规划
(1)使用<p>停止规划
<head> <style> #header { background-color:black; color:white; text-align:center; padding:5px; } #nav { line-height:30px; background-color:#eeeeee; height:300px; width:100px; float:left; padding:5px; } #section { width:350px; float:left; padding:10px; } #footer { background-color:black; color:white; clear:both; text-align:center; padding:5px; } </style> </head>
使用<p id="header">......</p>
(2)HTML5供给的新语义元素
<header>定义文档或节的页眉
<nav>定义导航链接的容器
<section>定义文档中的节
<article>定义独立的自包括文章
<aside>定义内容之外的内容(侧栏)(?还没搞分明这是啥)
<footer>定义文档或节的页足
<details>定义额外的细节
<summary>定义details元素的标题
5、框架
通过使用框架,可以在统一个阅读器窗口显示不止一个页面。每份HTML文档成为一个框架,并且每个框架都独立与其他的框架。
(1)框架构造标签<frameset>
每个<frameset>定义列一系列行、列
rows/columns的值规定了每行或每列占据屏幕的面积
<frameset cols="25%,75%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> </frameset>
(2)其他
一样地,一个框架有可见边框,会员可以拖动边框来改动它的大小。若想幸免,可以在<frame>中增加 noresize="noresize" 。
不克不及将<body>标签与<frameset>标签同时使用。不外增加包括一段文本的<noframes>标签,就必需将这段文字嵌套于<body>标签内。
<html> <frameset cols="25%,50%,25%"> <frame src="/example/html/frame_a.html"> <frame src="/example/html/frame_b.html"> <frame src="/example/html/frame_c.html"> <noframes> <body>您的阅读器没法处置框架!</body> </noframes> </frameset> </html>
<frame>中可以使用name锚属性,来转跳到指定节。
<iframe>用于在网页内显示网页
用途:<iframe src="URL" width="200" height="200" frameborder="0"></iframe>
iframe可用作链接的目标(target),该链接的target属性必需援用iframe的name属性。
<iframe src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>
留意,由于链接的目标匹配iframe的名称,所以链接会在iframe中翻开。
相关引荐:
HTML学习笔记一
以上就是HTML学习笔记二的具体内容,更多请关注百分百源码网其它相关文章!