从零开始学习web开发：html
html
我们知道页面是通过html来实现的，在电脑浏览器上打开一个页面，按“F12”我们就能看到该页面的html内容。在网上我们很容易找到很多html的简单的教程，整体也非常的简单，但是定义的内容太多，所以今天我们通过了解一些基本内容来快速的学习常见要素。
html常用标签
html涉及的功能很多，我们在此不做一一的介绍，我们简单介绍下最常用的一些模块：
html
定义一个html文档，相当于我们写代码最外面一层 大括号，需成对使用，最后以html结尾
<html>
<head>
这里是文档的头部 ... ...
...
</head>
<body>
这里是文档的主体 ... ...
...
</body>
</html>
head
定义文档的页眉,例子请看html中的例子
body
定义文档的主要内容，<body>和<\body>相当于我们平常写main函数的那对“{}”，中间的内容是文档的主要内容
div
是一个块级元素。相当于代码中的代码块的分隔，一般来说会将一块具有整体意义的内容放到一个div中
<html>
<head>
<title>我的第一个 HTML 页面</title>
</head>
<body>
<div>
这是代码块
</div>
</body>
</html>
p
是一个段落，多用于表示一行内容
<html>
<head>
<title>我的第一个 HTML 页面</title>
</head>
<body>
<div>
这是代码块
<p>这是一个段落</p>
</div>
</body>
</html>
span
组合行内元素，以便通过样式来格式化它们
<html>
<head>
<title>我的第一个 HTML 页面</title>
</head>
<body>
<div>
这是代码块
<p>我的母亲有<span style="color:blue;font-weight:bold">蓝色</span>的眼睛</p>
</div>
</body>
</html>
运行结果为（行内部分内容可以有自己的样式）：
input
标签用于搜集用户信息，在页面上表现为单行输入框
<html>
<head>
<title>我的第一个 HTML 页面</title>
</head>
<body>
<div>
这是代码块
<p>我的母亲有<span style="color:blue;font-weight:bold">蓝色</span>的眼睛</p>
<p> <input></input></p>
</div>
</body>
</html>
运行结果：
textarea
对象代表 HTML 表单中的一个文本域 (text-area)，一般需要输入多行文本内容时使用
<html>
<head>
<title>我的第一个 HTML 页面</title>
</head>
<body>
<div>
这是代码块
<p>我的母亲有<span style="color:blue;font-weight:bold">蓝色</span>的眼睛</p>
<p><input></input></p>
<p><textarea cols="40" rows="8" name="textarea" id="textarea"></textarea></p>
</div>
</body>
</html>
运行结果：
button
button代表一个按钮，查看以下例子
<html>
<head>
<title>我的第一个 HTML 页面</title>
</head>
<body>
<div>
这是代码块
<p>我的母亲有<span style="color:blue;font-weight:bold">蓝色</span>的眼睛</p>
<p><input></input></p>
<p><textarea cols="40" rows="8" name="textarea" id="textarea"></textarea></p>
<p><button>登录</button></p>
</div>
</body>
</html>
运行结果如下：
label
为 input 元素定义标注（标记），比如我们想要为input输入框加上标注为"用户名"，则可以这样
<html>
<head>
<title>我的第一个 HTML 页面</title>
</head>
<body>
<div>
这是代码块
<p>我的母亲有<span style="color:blue;font-weight:bold">蓝色</span>的眼睛</p>
<label >用户名： <input type="text" name="user" value=""></label><br>
<p><textarea cols="40" rows="8" name="textarea" id="textarea"></textarea></p>
</div>
</body>
</html>
运行结果为
form
用于为用户输入创建 HTML 表单,表单用于向服务器传输数据,如果需要将页面上的内容传送给服务器则需要创建表单，表单中可以包含input、label、button、textarea等标签
<html>
<head>
<title>我的第一个 HTML 页面</title>
</head>
<body>
<div>
这是代码块
<p>我的母亲有<span style="color:blue;font-weight:bold">蓝色</span>的眼睛</p>
<p><input></input></p>
<p><textarea cols="40" rows="8" name="textarea" id="textarea"></textarea></p>
<form method="get" action='/registuser'>
<label >用户名： <input type="text" name="user" value=""></label><br>
<label>密码： <input type="password" name="password" value=""></label><br>
<label>昵称： <input type="text" name="nickname" value=""></label><br>
<input type="submit" value="注册">
</form>
</div>
</body>
</html>
运行结果为：，红色部分为整个表单内容，用户名和密码输入后服务器可以通过get方法来获取输入值，点击注册后表单事件会触发
table，th，tr，td
table定义表格，th定义表头单元格，tr定义表格的行，td定义表的列
<html>
<head>
<title>我的第一个 HTML 页面</title>
</head>
<body>
<div>
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>July</td>
<td>￥100</td>
</tr>
</table>
</div>
</body>
</html>
运行结果如下：
ul、ol、li
ol定义有序列表，ul定义无序列表，li定义列表项目，具体事例如下：
<html>
<body>
<p>有序列表：</p>
<ol>
<li>打开冰箱门</li>
<li>把大象放进去</li>
<li>关上冰箱门</li>
</ol>
<p>无序列表：</p>
<ul>
<li>雪碧</li>
<li>可乐</li>
<li>凉茶</li>
</ul>
</body>
</html>
link、a
<link> 标签定义文档与外部资源的关系。<link> 标签最常见的用途是链接样式表。
<a>标签定义超链接
<html>
<head>
<link rel="stylesheet" type="text/css" href="/html/csstest1.css" >
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<h1>我通过外部样式表进行格式化。</h1>
<p>我也一样！</p>
</body>
</html>
运行结果，link中的链接指链接外部样式，即html中的元素被外部的/html/csstest1.css定义了样式，而
a中定义超链接，是可以点击跳转到定义的链接的
html属性
接下来我们来了解下场景的属性，基本上大多数的标签都有如下这些属性，这些属性定义了标签的样式，唯一标识，语言，是否显示等
class
定义元素的类名，使用方法有用于指向样式表中的类（class），也有用于使得JS改变带有指定class的元素
id
定义元素的唯一id，一般用于定位使用
style
定义元素的样式，包括位置，大小，颜色等，以下例子中在style属性中定义了h1标签的颜色为蓝色，p标签中属性为class的内容字体为红色，并且样式为text/css中定义的样式
<html>
<head>
<style type="text/css">
h1.intro {color:blue;}
p.important {color:red;}
</style>
</head>
<body>
<h1 class="intro">Header 1</h1>
<p>A paragraph.</p>
<p class="important">请注意这个重要的段落。:)</p>
</body>
</html>
运行结果：
lang
定义元素中使用的语言，如下例子中p标签中的内容是法语
<p lang="fr">Ceci est un paragraphe.</p>
更多详细内容请参考
w3School
315
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
