以前在学校的时候曾经接触过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>
:空单元格