文章目录
HTML概述什么是HTML？web编程HTML的基本结构编写你的第一个html文本编写一篇博客
HTML概述
本文由sololearn手机app教程整理而来。
什么是HTML？
HTML表示（stand for）HyperText Markup Language，顾名思义它是一种标记语言。与其他脚本/编程语言不同的是，标记语言使用tags来标识内容。一个标识段落的例子为
<p>I'm a paragraph
</p>
与其他编程语言类似，html文件是纯文本文件，使用普通的文本编辑器即可编辑。
web编程
会使用html语法编程是学习web相关的专业技能的基础。现代web编程的框架为
HTML：架构CSS：内容展示风格JavaScript：网页行为PHP及其他类似语言： 后端CMS： 内容管理
HTML的基本结构
基本的HTML结构为：
<html>
<head>...
</head>
<body>...
</body>
</html>
<head></head>中包含的内容不被展示，可以引入css等。body内容是可视内容，可包含headings, paragraphs, lists, quotes, images, links等内容。
编写你的第一个html文本
<html>
<head>
<title>hello world
</title>
</head>
<body>
This is a line.
<body>
</html>
title标签的内容是浏览器标签页的辨识内容。
编写一篇博客
<!DOCTYPE html>
<html>
<head>
<title>My Blog
</title>
<link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet">
</head>
<body>
<div id="header" class="section">
<img alt="" class="img-circle" src="https://code.sololearn.com/Icons/Avatars/0.jpg">
<p>Alex Simpson
</p>
</div>
<div class="section">
<h1><span>About Me
</span></h1>
<p>
Hey! I'm
<strong>Alex
</strong>. Coding has changed my world. It's not just about apps. Learning to code gave me
<i>problem-solving skills
</i> and a way to communicate with others on a technical level. I can also develop websites and use my coding skills to get a better job. And I learned it all at
<strong>SoloLearn
</strong> where they build your self-esteem and keep you motivated. Join me in this rewarding journey. You'll have fun, get help, and learn along the way!
</p>
<p class="quote">"Declare variables, not war"
</p>
</div>
<div class="section">
<h1><span>My Coding Schedule
</span></h1>
<table>
<tr>
<th>Day
</th>
<th>Mon
</th>
<th>Tue
</th>
<th>Wed
</th>
<th>Thu
</th>
<th>Fri
</th>
</tr>
<tr>
<td>8-8:30
</td>
<td class="selected">Learn
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>9-10
</td>
<td></td>
<td class="selected">Practice
</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>1-1:30
</td>
<td></td>
<td></td>
<td class="selected">Play
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>3:45-5
</td>
<td></td>
<td></td>
<td></td>
<td class="selected">Code
</td>
<td></td>
</tr>
<tr>
<td>6-6:15
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="selected">Discuss
</td>
</tr>
</table>
</div>
<div class="section">
<h1><span>My Skills
</span></h1>
<ul>
<li>HTML
<br />
<progress min="0" max="100" value="80"></progress>
</li>
<li>JavaScript
<br />
<progress min="0" max="100" value="50"></progress>
</li>
<li>Python
<br />
<progress min="0" max="100" value="30"></progress>
</li>
</ul>
</div>
<div class="section">
<h1><span>My Media
</span></h1>
<iframe height="150" width="300" src="https://www.youtube.com/embed/Q6_5InVJZ88" allowfullscreen frameborder="0"></iframe>
</div>
<div class="section">
<h1><span>Contact Me
</span></h1>
<svg class="face" height="100" width="100">
<circle cx="50" cy="50" r="50" fill="#FDD835"/>
<circle cx="30" cy="30" r="10" fill="#FFFFFF"/>
<circle cx="70" cy="30" r="10" fill="#FFFFFF"/>
<circle cx="30" cy="30" r="5" fill="#000000"/>
<circle cx="70" cy="30" r="5" fill="#000000"/>
<path d="M 30 70 q 20 20 40 0" stroke="#FFFFFF" stroke-width="5" fill="none" />
</svg>
<form>
<input name="name" placeholder="Name" type="text" required /><br/>
<input name="email" placeholder="Email" type="email" required /><br/>
<textarea name="message" placeholder="Message" required ></textarea>
<input type="submit" value="SEND" class="submit" />
</form>
</div>
<div class="section" id="contacts">
<h1><span>Follow Me
</span></h1>
<div>
< a href="https://www.sololearn.com/" target="_blank">
<img alt="SoloLearn" src="https://www.sololearn.com/Uploads/icons/sololearn.png" />
</ a>
< a href="#">
<img alt="Facebook" src="https://www.sololearn.com/Uploads/icons/facebook.png"/>
</ a>
< a href="#">
<img alt="Twitter" src="https://www.sololearn.com/Uploads/icons/twitter.png" />
</ a>
</div>
</div>
<div class="copyright">
© 2017 My Blog. All rights reserved.
</div>
</body>
</html>
