点击下载
本文文档

当前位置：首页 - 科技 - 知识百科 - 正文

HTML学习笔记二

来源：动视网责编：小采时间：2020-11-27 15:25:42

HTML学习笔记二

HTML学习笔记二:这篇文章介绍的内容是关于HTML学习笔记二，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下1、表格<table><table border="1"> <tr> <td>row 1, cell 1</td> <

推荐度：

点击下载本文 文档为doc格式

导读HTML学习笔记二:这篇文章介绍的内容是关于HTML学习笔记二，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下1、表格<table><table border="1"> <tr> <td>row 1, cell 1</td> <

这篇文章介绍的内容是关于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 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学习笔记二

推荐度：

点击下载本文 文档为doc格式

标签： html 学习笔记学习笔记二

热门焦点

HTML学习笔记二

HTML学习笔记二

HTML学习笔记二

最新推荐

猜你喜欢

热门推荐