HTML 基础学习笔记

时间:2022-11-18 08:27:29

https://www.w3.org/MarkUp/Guide/ 1.增加一个标题
<title>My first HTML document</title>

 

这个时候用浏览器打开文件其实只是一片空白。
2.添加头部和文件
HTML中有6个级别的头字体。H1是最重要的,H2次之,一直到H6
每一个片段都应该有<p>的标签.
<h1>An important heading</h1><h2>A slightly less important heading</h2> <p>This is the first paragraph.</p> 
<p>This is the second paragraph.</p>
3.增加一些强调
This is a really <em>interesting</em> topic!
但是在这我也不加上<p>的标签,也还是会展示,所以我猜应该是默认的吧?
4.增加图片到你的页面中
<p><img src="text.png" width="200" height="150" alt="My friend Peter"></p>
图片可以指定长宽的像素大小, 也可以增加替换表达,当这个图像不存在的时候(alt)。

longdesc 几乎所有的网页都不支持这个标签了。
5.增加到其他页面的链接
This is a link to <a href="peter.html">Peter's page</a>
链接到其他的网页:
This is a link to <a href="http://www.w3.org/">W3C</a>.
你也可以将一个图片链接到一个地址:
<a href="peter.html"><img src="text.png" alt="My friend Peter"></a>
6.三种列表
Html支持三种列表


(1)无序列表 ul<ul>  <li>the first list item</li>  <li>the second list item</li>  <li>the third list item</li></ul>
HTML 基础学习笔记
 
(2)有序列表 ol


<ol>
  <li>the first list item</li>  <li>the second list item</li>  <li>the third list item</li>
</ol>
HTML 基础学习笔记 上面这两种都是</ol>是必须的而</li>是可选的。 (3)第三个是定义列表,这个列表允许你增加定义。dt 表示每一项,而dd表示定义。 <dl>  <dt>the first term</dt>  <dd>its definition</dd>  <dt>the second term</dt>  <dd>its definition</dd>  <dt>the third term</dt>  <dd>its definition</dd></dl>
HTML 基础学习笔记 同时这些列表都是可以嵌套的。   7.HTML有一个头部和身体部如果你使用浏览器的预览页面源代码的功能,可看到HTML页面。这个文件通常是又一个申明什么版本的HTML被使用而开始的。然后是<html><head>的标签,然后就是在最后面</html>。<html></html> 如同一个容器一样。 <head> ... </head>  包含了标签。<body> ... </body> 包含了标记以及可见的内容。8.整理你的标记一个自动休整标记错误的工具是:  HTML TIDY https://www.w3.org/People/Raggett/tidy/   以上,然后这个都是介绍的HTML4.0来着,如果有详细需要还是看  http://www.w3school.com.cn 吧。。。  ps一个自己写的html作为结束:
<html>
<head>
<title>My first HTML document</title>
</head>
<body>
<h1>An important heading</h1>
<h2>A slightly less important heading</h2>
<p>This is the first paragraph.</p>

This is the second paragraph.
This is a really <em>interesting</em> topic!
<p><img src="text.png" width="200" height="150" alt="My friend Peter"></p>
This is a link to <a href="peter.html">Peter's page</a>

This is a link to <a href="http://www.w3.org/">W3C</a>.
<a href="peter.html"><img src="text.png" alt="My friend Peter"></a>

<ul>
<li>the first list item</li>
<li>the second list item</li>
<li>the third list item</li>
</ul>

<ol>
<li>the first list item</li>
<li>the second list item</li>
<li>the third list item</li>
</ol>

<dl>
<dt>the first term</dt>
<dd>its definition</dd>
<dt>the second term</dt>
<dd>its definition</dd>
<dt>the third term</dt>
<dd>its definition</dd>
</dl>
</body>
</html>