首页  >  文章  >  web前端  >  HTML学习笔记二

HTML学习笔记二

不言
不言原创
2018-04-19 14:32:031439浏览


这篇文章介绍的内容是关于HTML学习笔记二 ,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

1、表格f5d188ed2c074f8b944552db028f98a1

<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>

a34de1251f0d9fe1e645927f19a896e8......fd273fcf5bcad3dfdad3c41bd81ad3e5定义行,b6c5a531a458a2e790c1fd6421739d1c......b90dd5946f0946207856a8a37f441edf定义列

表头表示:

<tr>
<th>heading</th>
</tr>

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


2、列表



第一种:无序列表——ff6d136ddc5fdfeffaf53ff6ee95f185,使用粗体圆点标记

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>


或者使用23ec1a299af46ad32652ba28fd007bda……使用的是空心圆点。


第二种:有序列表——c34106e0b4e09414b63b2ea253ff83d6,使用数字标记

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>


或者使用61a13d49ba8636eb9c26f7a27b511a73……表示数字从50开始标记。




第三种:自定义列表——5c69336ffbc20d23018e48b396cdd57a

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>


说明:

5c69336ffbc20d23018e48b396cdd57a表示列表开始



73de882deff7a050a357292d0a1fca94表示列表项

67bc4f89d416b0b8236eaa5f43dee742表示列表项的定义



注意,列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。




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>



e388a4556c0f65e1904146cc1a846bee是块级元素,用于设置相同类。

45a2772a6b6107b401db3c9b82c049c2是行内元素。

<html>
<head>
<style>
  span.red {color:red;}
</style>
</head>
<body>

<h1>My <span class="red">Important</span> Heading</h1>

</body>
</html>



4、HTML网站布局

(1)使用e388a4556c0f65e1904146cc1a846bee进行布局

<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>


使用1b1ac9566b1620cdb08777896eff50cf......94b3e26ee717c64999d7867364b1b4a3

(2)HTML5提供的新语义元素



1aa9e5d373740b65a0cc8f0a02150c53定义文档或节的页眉

c787b9a589a3ece771e842a6176cf8e9定义导航链接的容器



2f8332c8dcfd5c7dec030a070bf652c3定义文档中的节

23c3de37f2f9ebcb477c4a90aac6fffd定义独立的自包含文章



15221ee8cba27fc1d7a26c47a001eb9b定义内容之外的内容(侧栏)(?还没搞清楚这是什么)

c37f8231a37e88427e62669260f0074d定义文档或节的页脚



a5e9d42b316b6d06c62de0deffc36939定义额外的细节

631fb227578dfffda61e1fa4d04b7d25定义details元素的标题




5、框架

通过使用框架,可以在同一个浏览器窗口显示不止一个页面。每份HTML文档成为一个框架,并且每个框架都独立与其他的框架。



(1)框架结构标签f900b4fc197b16ab214eecf015bb6bd2

每个f900b4fc197b16ab214eecf015bb6bd2定义列一系列行、列



rows/columns的值规定了每行或每列占据屏幕的面积

<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>


(2)其他

一般地,一个框架有可见边框,用户可以拖动边框来改变它的大小。若想避免,可以在04a0d55efbbfd646a993fbc01f262c57中添加 noresize="noresize" 。



不能将6c04bd5ca3fcae76e30b72ad730ca86d标签与f900b4fc197b16ab214eecf015bb6bd2标签同时使用。不过添加包含一段文本的37f861bd36cef5b6406eba87d20a5bab标签,就必须将这段文字嵌套于6c04bd5ca3fcae76e30b72ad730ca86d标签内。

<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>

04a0d55efbbfd646a993fbc01f262c57中可以使用name锚属性,来转跳到指定节。



d5ba1642137c3f32f4f4493ae923989c用于在网页内显示网页

用法:6b73adb9df5d60664962433b1d64d459065276f04003e4622c4fe6b64f465b88



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学习笔记二的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn