HTML5 and CSS
最近在学习Python3的网络爬虫,但是由于自己对html的知识相对匮乏,学习起来挺吃力的。于是决定先稍微学点html的基础知识。这里推荐YouTube上的一位youtuber的系列视频HTML5 and CSS3 beginners tutorials。博主萌萌哒,而且每个视频讲解一个知识点,既清楚又有趣。然后我调了1.5倍的播放速度,也可以边听边跟着操作,非常好的教学视频。
以下是我的学习笔记,不断更新中:
- 基本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>
- 基本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>
- 超链接
<! 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>
- 音频
<! 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>
- 视频
<! 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>
- 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>
- 引入.css文件