zoukankan      html  css  js  c++  java
  • 网站制作(一):基本的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>
    
  • 相关阅读:
    LeetCode:Symmetric Tree
    LeetCode:Construct Binary Tree from Inorder and Postorder Traversal,Construct Binary Tree from Preorder and Inorder Traversal
    LeetCode:Binary Tree Level Order Traversal I II
    LeetCode:Binary Tree Zigzag Level Order Traversal
    LeetCode:Convert Sorted Array to Binary Search Tree,Convert Sorted List to Binary Search Tree
    LeetCode:Balanced Binary Tree
    LeetCode:Minimum Depth of Binary Tree,Maximum Depth of Binary Tree
    LeetCode:Path Sum I II
    LeetCode:Flatten Binary Tree to Linked List
    LeetCode:Distinct Subsequences
  • 原文地址:https://www.cnblogs.com/november1943/p/5352175.html
Copyright © 2011-2022 走看看