网站制作(一):基本的html元素


网站制作(一):基本的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>
原文地址:https://www.cnblogs.com/november1943/p/5352175.html