HTML笔记（一）

来源：互联网发布：php博客管理系统源码编辑：程序博客网时间：2024/06/05 00:39

以前在学校的时候曾经接触过HTML语言，但是因为以前在工作之中没有用到HTML，所以随着时间的推移，html的内容逐渐忘却。现在公司分配了新的任务，所以用到html的东西。于是在这里对HTML学习过程做一个记录
笔记来自w3cschool:

一.标签部分

1.a标签一个网页链接

<a href="http://www.w3school.com.cn">This is a link</a>

2.img标签 图像的名称和尺寸是以属性的形式提供的。

<img src="w3school.jpg" width="104" height="142" />

3.hr标签使用水平线来分隔文章中的小节是一个办法。

<p>This is a paragraph</p><hr /><p>This is a paragraph</p><hr /><p>This is a paragraph</p>

4.pre标签这是
预格式文本。
它保留了空格
和换行。。

<pre>for i = 1 to 10     print i next i</pre>

5.ul ，li 无序列表标签无序列表始于 ul 标签。每个列表项始于 li。

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

浏览器显示:
·Coffee
·Milk

6.ol ，li 无序列表标签无序列表始于 ol 标签。每个列表项始于 li。

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

浏览器显示:
1.Coffee
2.Milk
7.div标签。
①可定义文档中的分区或节，即可以自动的换行。
②标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 div，那么该标签的作用会变得更加有效。

<div style="color:#00FF00">  <h3>This is a header</h3>  <p>This is a paragraph.</p></div>

<!DOCTYPE html><html><head><style>.cities {    background-color:black;    color:white;    margin:20px;    padding:20px;} </style></head><body><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><div class="cities"><h2>Paris</h2><p>Paris is the capital and most populous city of France.</p></div><div class="cities"><h2>Tokyo</h2><p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,and the most populous metropolitan area in the world.</p></div></body></html>

8.span标签
①行内元素，能够用作文本的容器。
②设置元素的类，能够为相同的 span 元素设置相同的样式。

<!DOCTYPE html><html><head><style>  span.red {color:red;}</style></head><body><h1>My <span class="red">Important</span> Heading</h1></body></html>

二.三种插入样式的表的方式

①**外部样式表**当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head><link rel="stylesheet" type="text/css"href="mystyle.css">//mystyle.css是样式的文件</head>

②内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过

<head><style type="text/css">body {background-color: red}p {margin-left: 20px}</style></head>

③内联样式
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head><p style="color: red; margin-left: 20px">This is a paragraph</p>&nbsp;:空单元格

0 0