百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>html5教程> HTML学习条记二
分享文章到:

HTML学习条记二

发布时间:09/01 来源:未知 浏览: 关键词:
这篇文章介绍的内容是关于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>

假如要表示一个空行,可以用&nbsp空格占位符填充。


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学习笔记二的具体内容,更多请关注百分百源码网其它相关文章!

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有151人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板