You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
229 lines
5.6 KiB
229 lines
5.6 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8"><!--定义字符集为UTF-8-->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<!--设置自适应视口以确保响应式设计-->
|
|
<title>HTML学习1</title>
|
|
|
|
<!--外部样式表-->
|
|
<link rel="stylesheet" type="text/css" href="mystyle.css">
|
|
<!--内部样式表-->
|
|
<style type="text/css">
|
|
h1 {color: red}
|
|
p {color: blue}
|
|
|
|
.cities {
|
|
background-color:black;
|
|
color:white;
|
|
margin:20px;
|
|
padding:20px;
|
|
}
|
|
|
|
#myHeader {
|
|
background-color: lightblue;
|
|
color: black;
|
|
padding: 40px;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
<body><!--<body> 元素定义了 HTML 文档的主体-->>
|
|
<!--标题 h1(大)到h6-->
|
|
<h1>学习笔记</h1>
|
|
<!--段落-->
|
|
<p>今天学习了很多新的知识，感觉收获颇丰。</p>
|
|
|
|
<!--水平线-->
|
|
<hr/>
|
|
<!--插入空行/换行-->
|
|
<p>This is<br />a para<br />graph with line breaks</p>
|
|
<br />
|
|
<p>今天学习了很多新的知识，感觉收获颇丰。</p>
|
|
|
|
|
|
<!--链接-->
|
|
<a href="http://www.w3school.com.cn">这是web学习网站</a>
|
|
<br />
|
|
<a name="label" href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
|
|
<br />
|
|
<a href="#label">在同一个文档中创建指向该锚的链接</a>
|
|
<br />
|
|
<a href="http://www.w3school.com.cn/#label">在其他页面中创建指向该锚的链接</a>
|
|
|
|
<br />
|
|
|
|
<!--图片-->
|
|
<img src="http://www.w3school.com.cn/images/boat.gif" alt="Big Boat" width="104" height="142"/>
|
|
|
|
|
|
|
|
<!--HTML元素：从开始标签（start tag）到结束标签（end tag）的所有代码-->
|
|
|
|
<!--HTML属性：提供有关元素的附加信息 始终为属性值加引号
|
|
class = "value"：为元素指定类名
|
|
id="value"：为元素指定唯一的标识符
|
|
style="property:value;"：为元素添加内联样式
|
|
title="text"：为元素添加提示文本
|
|
|
|
<table border="1">：为表格添加边框
|
|
-->
|
|
|
|
<!--HTML样式-->
|
|
<h1 style="text-align:center;">水平居中对齐</h1>
|
|
<p style="font-family:arial; color:red; font-size:20px;">A paragraph.</p>
|
|
|
|
<!--预格式文本，保留了空格和换行-->
|
|
<pre>
|
|
for i = 1 to 10
|
|
print i
|
|
next i
|
|
</pre>
|
|
|
|
<!--地址-->
|
|
<address>
|
|
Written by <a href="Wugh5200@163.com">Donald Duck</a>.<br>
|
|
Visit us at:<br>
|
|
Example.com<br>
|
|
Box 564, Disneyland<br>
|
|
USA
|
|
</address>
|
|
|
|
<br />
|
|
|
|
<!--缩写和首字母缩写-->
|
|
<abbr title="etcetera">etc.</abbr>
|
|
<br />
|
|
<acronym title="World Wide Web">WWW</acronym>
|
|
<p><dfn><abbr title="World Health Organization">WHO</abbr></dfn> 成立于 1948 年。</p>
|
|
|
|
<br />
|
|
<!--引用-->
|
|
<q>学习使我快乐。</q>
|
|
<br />
|
|
<blockquote cite="http://www.w3school.com.cn">
|
|
学习使我快乐。
|
|
</blockquote>
|
|
|
|
<!--表格
|
|
<table>：定义表格
|
|
<tr>：定义表格行
|
|
<th>：定义表格头单元格
|
|
<td>：定义表格数据单元格
|
|
cellspacing：单元格间距
|
|
cellpadding：单元格内边距
|
|
-->
|
|
<table border="1" cellpadding="10" cellspacing="5" bgcolor="#FAEBD7">
|
|
<caption>标题</caption>
|
|
|
|
<tr>
|
|
<th colspan="2">Heading</th><!--横跨两列-->
|
|
<th rowspan="2">Another Heading</th><!--横跨两行-->
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>row 1, cell 1</td>
|
|
<td>row 1, cell 2</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td> </td>
|
|
<td>row 2, cell 2</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>这个单元包含一个表格：
|
|
<table border="1">
|
|
<tr>
|
|
<td align="left">A</td>
|
|
<td align="right">B</td>
|
|
</tr>
|
|
<tr>
|
|
<td>C</td>
|
|
<td>D</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>这个单元包含一个列表：
|
|
<ul>
|
|
<li>苹果</li>
|
|
<li>香蕉</li>
|
|
<li>菠萝</li>
|
|
</ul>
|
|
</td>
|
|
<td>HELLO</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<!--列表-->
|
|
<h2>无序列表</h2>
|
|
<!--type="disc" type="circle" type="square"-->
|
|
<ul type="disc">
|
|
<li>Coffee</li>
|
|
<li>Milk</li>
|
|
</ul>
|
|
|
|
<h2>有序列表</h2>
|
|
<ol type="A">
|
|
<!--type="A" type="a" type="I" type="i"-->
|
|
<li>Coffee</li>
|
|
<li>Milk</li>
|
|
</ol>
|
|
|
|
<h2>嵌套列表：</h2>
|
|
<ul>
|
|
<li>咖啡</li>
|
|
<li>茶
|
|
<ul>
|
|
<li>红茶</li>
|
|
<li>绿茶</li>
|
|
</ul>
|
|
</li>
|
|
<li>牛奶</li>
|
|
</ul>
|
|
|
|
<h2>定义列表：</h2>
|
|
<dl> <!--自定义列表以 <dl> 标签开始-->
|
|
<dt>计算机</dt> <!--每个自定义列表项以 <dt> 开始-->
|
|
<dd>用来计算的仪器 ... ...</dd> <!--每个自定义列表项的定义以 <dd> 开始-->
|
|
<dt>显示器</dt>
|
|
<dd>以视觉方式显示信息的装置 ... ...</dd>
|
|
</dl>
|
|
|
|
<!--块级标签默认独占一行:<div>、<h1>-<h6>、<p>、<form>、<ul>、<dl>；
|
|
行内标签:<span>、<input>、<img>。-->
|
|
|
|
|
|
<!--同一个类名可以由多个 HTML 元素使用，而一个 id 名称只能由页面中的一个 HTML 元素使用：-->
|
|
<!--类-->
|
|
<div 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>
|
|
</div>
|
|
|
|
<!--id-->
|
|
<h1 id="myHeader">My Header</h1>
|
|
|
|
<!--通过 ID 和链接实现 HTML 书签-->
|
|
<h2 id="C4">第四章</h2>
|
|
<a href="#C4">跳转到第四章</a>
|
|
<!--或者，在另一张页面中，添加指向这个书签的链接（“跳转到第四章”）-->
|
|
<a href="html_demo.html#C4">Jump to Chapter 4</a>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|