美文网首页
HTML5 &CSS3 学习笔记

HTML5 &CSS3 学习笔记

作者: NelsonZheng | 来源:发表于2016-06-11 18:39 被阅读89次

HTML5 and CSS

最近在学习Python3的网络爬虫,但是由于自己对html的知识相对匮乏,学习起来挺吃力的。于是决定先稍微学点html的基础知识。这里推荐YouTube上的一位youtuber的系列视频HTML5 and CSS3 beginners tutorials。博主萌萌哒,而且每个视频讲解一个知识点,既清楚又有趣。然后我调了1.5倍的播放速度,也可以边听边跟着操作,非常好的教学视频。

以下是我的学习笔记,不断更新中:

  1. 基本html框架
<! DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title> This is my first web page </title>
    </head>
    <body>
        I'm in the body
    </body>
</html>
  1. 基本tag
<! DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title> This is my first web page </title>
    </head>
    <body>
        <p><strong>This text </strong>will be <strong>bold</strong> and somthing will be in <em>italics 
        too</em></p>
        <hr/>
        <!-- check this paragraph there might be typers -->
        <p>Man I like making tutorials for your</p>     
    </body>
</html>
  1. 超链接
<! DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title> Tutorial 6 - linking to another page </title>
    </head>
    <body>
        <h1>This is the second page!</h1>
        <img scr="../images/ashe.jpg" alt="ashe" width="900" height="480" />
    </body>
</html>
  1. 音频
<! DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title> Tutorial 9 - audio tag </title>
    </head>
    <body>
        <audio controls autoplay loop>
            <source src="All My Days - Alexi Murdoch.mp3" type="audio/mpeg" />
            If you can see this, update your browser
        </audio>
        
    </body>
</html>
  1. 视频
<! DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title> Tutorial 10 - video tag </title>
    </head>
    <body>
        <video width="640" height="360" controls loop autoplay>
            <source src="waterlily.mp4" type="video/mp4" />
            If you can see this, update your browser
        </video>
        
    </body>
</html>
  1. CSS简介
<! DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title> Tutorial 11 - intro to css </title>
        <style type="text/css">
            p{
                color:red;
            }
            
            h1{
                background-color:yellow;
            }
        </style>
    </head>
    <body>
        <h1>Intro to css</h1>
        <p>I'm Blue</p>
        <p>I'm Blue too</p>
        
    </body>
</html>
  1. 引入.css文件

相关文章

网友评论

      本文标题:HTML5 &CSS3 学习笔记

      本文链接:https://www.haomeiwen.com/subject/tvcedttx.html