网站制作(一):基本的html元素
tags: 网站制作,html
grammar_cjkRuby: true
html最基本的几个tag
标题<h1></h1>
网页中的文章的标题,有6级 h1到h6
实例代码:
<h1>Ollie Bike Sharing</h1>
<h2>Oillie</h2>
<h3>Share Your Pedals with the World.</h3>
实际效果:
Ollie Bike Sharing
Oillie
Share Your Pedals with the World.
段落<p></p>
网页中文章的段落
实例代码:
<p>Need a set of wheels while you're in town? Use Ollie to pair your perfect vacation with a stylish, affordable bike rental. Here is a list of cities where you can find us.</P>
实际效果:
Need a set of wheels while you're in town? Use Ollie to pair your perfect vacation with a stylish, affordable bike rental. Here is a list of cities where you can find us.
<a></a>
添加链接
实例代码:
<a href="http://google.com"> Click here for Google!</a>
实际效果:
Click here for Google!
图片标签<img/>
在网页中显示图片
实例代码:
<img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-1/bikes1.jpg"/>
图片标签是自闭合标签
实际效果:
视频标签<video></video>
在网页中显示视频
实例代码:
<video width="320" height="240" controls>
<source src="video-url.mp4" type="video/mp4">
</video>
width和height属性控制视频窗口的宽度和高度,controls显示控制按钮(暂停,播放,停止等)。source设置视频链接,type视频类型
实际效果:
无序表<ul></ul>
实例代码:
<ul>
<li>A list item</li>
<li>A second list item</li>
<li>A third list item</li>
</ul>
实际效果:
- A list item
- A second list item
- A third list item
小结:
学习了最基本的几个html元素
实例:
<!DOCTYPE html>
<html>
<head>
<title>Ollie Bike Sharing</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<h2>Oillie</h2>
<ul>
<li>sign up</li>
<li>search bikes</li>
<li>reserve a bike</li>
<li>about us</li>
</ul>
<h1>Ollie Bike Sharing</h1>
<h3>Share Your Pedals with the World.</h3>
<p>Need a set of wheels while you're in town? Use Ollie to pair your perfect vacation with a stylish, affordable bike rental.Here is a <a href='cities.html'>list</a> of cities where you can find us.</P>
<video width="320" height="240" controls>
<source src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-1/ollie.mp4" type="video/mp4">
</video>
</body>
</html>