首先在虚拟环境里面安装Webstorm，HTML是一种用来描述网页的标记性语言。
Html结构
<!--**************** 1. <!DOCTYPE> 是HTML5声明 *************-->
<!--，<!DOCTYPE> 必须是 HTML 文档的第一行，位于 <html> 标签之前。
<!DOCTYPE>是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。-->
<!DOCTYPE html>
<html lang="en">
<!--************************ 2. head标签 *************************-->
<!-- head标签是所有头部元素的容器。head标签内的元素可包含脚本、样式表和提供页面的元信息等等。
以下标签都可以添加到 head 部分：title、base、link、meta、script 以及style。
头部的内容不会显示在浏览器的。 -->
<head>
<!--*********************** 3. 设置字符集 *********************** -->
<!-- 设置字符集，如果字符集不对，可能导致乱码。一般建议utf-8国际编码 -->
<!--<meta http-equiv="Content-Type" content="text/html; charset=gb2312或utf-8或gbk" />-->
<meta charset="UTF-8">
<!--************************** 4.SEO标签 ***************************** -->
<!-- SEO相关标签，title定义文档的标题,百度建议一般不要超过32位,
meta定义页面关键词和页面的描述-->
<title>个人博客</title>
<meta name="keywords" content="python程序员,技术博客,个人博客">
<meta name="description" content="博客是一个优秀的个人技术博客。博客记录了Linux学习，
python开发与编程，Web前端开发，MySQL学习和教程，NoSQL数据库教程以及个人的人生经历和观点。">
<!--关联其他让页面更加美化的css和javascripts-->
<link rel="stylesheet" type="text/css", href="main.css"/>
<script type="text/javascripts" src="main.js"></script>
</head>
<!--************************ 5. 正文部分 ************************-->
<!-- 正文部分，所有在浏览器上可见的内容必须写在body标签内部 -->
<body>
this is a first html page!
hello world
</body>
</html>
Html常用标签
<!--************** 1. div标签 **********************-->
<!--<div> 可定义文档中的分区或节（division/section）。-->
<!--<div> 是一个块级元素，也就是说，浏览器通常会在 div 元素前后放置一个换行符-->
<!--<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。-->
<!--<div class="test">hello</div>-->
<!--<div class="test">world</div>-->
<!--<div id="navfirst">-->
<!--<ul id="menu">-->
<!--<li id="h"><a href="/h.asp" title="html教程">html教程</a></li>-->
<!--<li id="x"><a href="/x.asp" title="XML教程">XML教程</a></li>-->
<!--<li id="b"><a href="/b.asp" title="浏览器脚本">浏览器脚本</a></li>-->
<!--<li id="s"><a href="/s.asp" title="服务器脚本">服务器脚本</a></li>-->
<!--<li id="d"><a href="/d.asp" title="dot net教程">dot net教程</a></li>-->
<!--<li id="m"><a href="/m.asp" title="多媒体教程">多媒体教程</a></li>-->
<!--<li id="w"><a href="/w.asp" title="建站手册">建站手册</a></li>-->
<!--</ul>-->
<!--</div>-->
<!--************** 2. aside标签 **********************-->
<!--<aside> 标签是 HTML 5 的新标签。-->
<!--aside标签的内容可用作文章的侧栏，<span style="color: #ff0000;">html5新增标签</span>。-->
<!--<p>Me and my family visited The Epcot center this summer.</p>-->
<!--<aside>-->
<!--<h4>Epcot Center</h4>-->
<!--The Epcot Center is a theme park in Disney World, Florida.-->
<!--</aside>-->
<!--************** 3. header标签 **********************-->
<!--header标签定义页面的头部（介绍信息），<span style="color: #ff0000;">html5新增标签</span>。-->
<!--<header> hello world </header>-->
<!--************** 4. section标签 **********************-->
<!--section标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分，<span style="color: #ff0000;">html5新增标签</span>。-->
<!--<section>-->
<!--<h1>PRC</h1>-->
<!--<p>The People's Republic of China was born in 1949...</p>-->
<!--</section>--
<!--************** 5. footer 标签 **********************-->
<!--footer 标签定义文档或节的页脚，通常包含文档的作者、版权信息、使用条款链接、联系信息等等，<span style="color: #ff0000;">html5新增标签</span>。-->
表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-表格标签</title>
</head>
<body>
<h2> 案例1: 学生信息标签</h2>
<table width="500" cellpadding="8" cellspacing="5" border="'1">
<caption>学生信息表格</caption>
<tr bgcolor="antiquewhite">
<th>姓名</th>
<th>地址</th>
</tr>
<tr>
<td>学生1</td>
<td>地址1</td>
</tr>
<tr>
<td>学生2</td>
<td>地址2</td>
</tr>
<tr>
<td>学生3</td>
<td>地址3</td>
</tr>
<tr>
<td>主机4</td>
<td>IP4</td>
</tr>
</table>
<h2>案例2:合并列单元</h2>
<table border="1" cellpadding="10" width="500">
<caption>主机信息表格</caption>
<tr>
<th>主机名</th>
<th colspan="2">IP地址</th>
</tr>
<tr>
<td>主机1</td>
<td>IP1</td>
<td>IP1</td>
</tr>
<tr>
<td>主机2</td>
<td>IP2</td>
<td>IP2</td>
</tr>
<tr>
<td>主机3</td>
<td>IP3</td>
<td>IP3</td>
</tr>
<tr>
<td>主机4</td>
<td>IP4</td>
<td>IP4</td>
</tr>
</table>
</body>
</html>
超链接标签
<h1><a name="C1">案例1：创建超级链接</a></h1>
<a href="http://www.baidu.com">不创建新窗口-百度一下</a>
<br/>
<a href="http://www.baidu.com" target="_blank">创建新窗口-百度一下</a>
<h2><a name="C2">案例2： 将图像作为链接</a></h2>
<a href="http://www.westos.org/" target="_blank"><img src="westosLogo.png"></a>
序列化标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06-序列化</title>
</head>
<body>
<h2>无序列表</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascripts</li>
</ul>
<h2>无序列表</h2>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>Javascripts</li>
</ol>
<h2>嵌套列表</h2>
<dl>
<dt>HTML</dt>
<dd>h1-h6</dd>
<dd>span</dd>
<dd>div</dd>
<dd>hr</dd>
<dt>CSS</dt>
<dd>CSS-1</dd>
<dd>CSS-2</dd>
<dd>CSS-3</dd>
</dl>
</body>
</html>
表单标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08-表单标签</title>
</head>
<body>
<h2>用户注册</h2>
<from action="#" method="get">
<span>用户名：</span><input type="text"><br/>
<span>密码：</span><input type="password"><br/>
<span>确认密码：</span><input type="password"><br/>
<span>个人简介：</span><input type="password"><br/>
<textarea></textarea>
<br/>
<span>性别：</span>
<input type="radio" name="gender">男
<input type="radio" name="gender">女<br/>
<span>邮箱：</span><input type="text"><br/>
<span>出生日期：</span><input type="text"><br/>
<span>籍贯：</span>
<select name="籍贯">
<option value="python">Python</option>
<option value="java">JAVA</option>
<option value="python">Python</option>
<option value="c">C</option>
<option value="c++">C++</option>
</select>
<input type="submit" value="注册">
<input type="reset" value="重置"》
</from>
</body>
</html>
扫一扫
112
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
