元素——基本的构造区块
HTML由不同元素的集合组成。元素定义了它们所包含内容的语义。元素包含了两个相匹配的元素标签（tag）之中所有的内容，当然也包含了标签本身。标签的完整列表
大部分的元素都支持元素嵌套，构成了一个层次结构。 一个简单的完整的网页结构例子如下所示：
<html>
<head>
<title>一个小型web页面</title>
</head>
<body>
<p>你在学习HTML的起始页面</p>
</body>
</html>
标签
HTML 为由一对尖括号（<>）所括起来的内容赋予了特定含义. 这样的标识称为一个 标签（tag）. 例如:
<p>这是段落中的文本。</p>```
上述例子中有一个起始标签（start tag）和一个结束标签（end tag）。结束标签与起始标签在内容上是一样的，但结束标签会在小于符号（<）后多一个整斜线/。 大多数 HTML 元素由一个起始标签和一个结束标签标识。起始标签和结束标签应成对出现，也就是说在一个起始标签之后应有其对应的结束标签。 由两个标签（起始标签和结束标签）构成的元素而言，缺少其中之一，这个元素都可能会被认为是无效的。
#属性
开始标签可能包含一些信息，这些信息叫做元素的特性，包括两部分:
- 特姓名
- 特性值
一些元素可以只有特性名没有特性值。它们的特性名类似“是否”，“有或没有”，所以可以省略特性值，所以下面三种写法都是一样的意思:
<input required="required">
<input required="">
<input required>```
特性值如果有包含空格就要用引号，单双引号都可以。如果特性值是单个词就可以不用引号，但为了避免出错和易于识别一般会加上引号
命名字符参考
命名字符参考 (一般被称作实体) 用于表示在HTML中具有特定含义的字符. 举例说，HTML将“>”和“<”符号理解为标签分隔符。所以，当你想在文本中用">"符号表达“大于”的含义时，你可以使用命名字符参考来作为替代。 以下例举了四个非常重要的常用实体：
> 表示大于符号">" (>)
< 表示小于符号"<" (<)
& 表示和符号"and"(&)
" 表示引用符号" (")```
[其他命名字符参考](https://www.w3.org/TR/2011/WD-html5-20110113/named-character-references.html)
#文档类型和注释
除标签，文本内容和实体外，一个HTML文档一定需要在**第一行做出文档类型声明(doctype declaration)**。在现代HTML中，这句声明书写如下：
<!DOCTYPE html>```
注释格式如下：
<!-- 这是评论文本 -->```
#一个完整且精简的文档
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>A tiny document</title>
</head>
<body>
<h1>Main heading in my document</h1>
<p>Loook Ma, I am coding <abbr title="Hyper Text Markup Language">HTML</abbr>.</p>
</body>
</html>```
今天我做的例子代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>A tiny document</title>
</head>
<body>
<h1>网站一级标题</h1>
<ul>
<li> <a href="http://www.w3school.com.cn/">导航链接一</a></li>
<li> <a href="http://www.w3school.com.cn/">导航链接二</a></li>
<li> <a href="http://www.w3school.com.cn/">导航链接三</a></li>
<li> <a href="http://www.w3school.com.cn/">导航链接四</a></li>
</ul>
<h2>文章一级标题</h2>
<h2>文章二级标题</h2>
<p>文章作者 文章发表时间</p>
<p>这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 换行了<br /></p>
<p>这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 换行了<br /></p>
<p>这是一个很长的段落 这是一个很长的段落 <a href="http://www.baidu.com/">这里有一个链接链接到www.baidu.com</a><b> 这是一个加粗</b>这是一个很长的段落 这是一个很长的段落<br /></p>
<p>这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 换行了<br /></p>
<p>这是一个很长的段落 这是一个很长的段落 <b>这里有个粗体字</b> 这是一个很长的段落 这是一个很长的段落 <a href="www.baidu.com/">这里有一个链接链接到www.baidu.com</a>这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 换行了<br /></p>
<h2>另一篇文章一级标题</h2>
<h2>文章二级标题</h2>
<p>这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 换行了<br /></p>
<p>这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 换行了<br /></p>
<p>这是一个很长的段落 这是一个很长的段落 <a href="http://www.baidu.com/">这里有一个链接链接到www.baidu.com</a>这是一个很长的段落 这是一个很长的段落<br /></p>
<img src ="3.jpg" width="300" height="200">
<ul>
<li> 列表一</li>
<li> 列表二</li>
<li> 列表三</li>
</ul>
<h2>图片</h2>
<p>好看的图片</p>
<img src ="3.jpg" width="300" height="200">
<p>好看的图片</p>
<img src ="3.jpg" width="300" height="200">
<p>好看的图片</p>
<img src ="3.jpg" width="300" height="200">
<h2>最后一篇文章一级标题</h2>
<h3>
文章二级标题
</h3>
<p>
文章作者 文章发表时间
</p>
<ol>
<li>排名一</li>
<li>排名二</li>
<li>排名三</li>
</ol>
<table border="1">
<tr>
<th>表头</th>
<th>表头</th>
<th>表头</th>
</tr>
<tr>
<td>表内容单元格</td>
<td>表内容单元格</td>
<td> <a href="www.baidu.com/">操作</a></td>
</tr>
<tr>
<td>表内容单元格</td>
<td>表内容单元格</td>
<td> <a href="www.baidu.com/">操作</a></td>
</tr>
<tr>
<td>表内容单元格</td>
<td>表内容单元格</td>
<td> <a href="www.baidu.com/">操作</a></td>
</tr>
<tr>
<td>表内容单元格</td>
<td>表内容单元格</td>
<td> <a href="www.baidu.com/">操作</a></td>
</tr>
<tr>
<td>总计</td>
<td colspan="2">100</td>
</tr>
</table>
<h2>这里以后是一个侧栏，这是侧栏的标题</h2>
<h2>
侧栏注册窗口标题
</h2>
<p>请输入邮箱地址：<input type="text" name="邮箱地址" value="这是一个文本输入框"></p>
<p>请输入密码：<input type="password" name="密码输入框" value="这是一个文本输入框">请重复输入密码：<input type="password" name="mima" value="这是一个文本输入框"></p>
<h3>
密码请为6-16位英文数字
</h3>
<form action="action_page.php">
性别：
<input type="radio" name="sex" value="女" style="display:inline" checked >女
<input type="radio" name="sex" value="男" style="display:inline">男
城市：
<select name="城市">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="重庆">重庆</option>
<option value="杭州">杭州</option>
</select>
爱好：
<input type="checkbox" name="艺术" value="艺术" style="display:inline">艺术
<input type="checkbox" name="运动" value="运动" style="display:inline">运动
<input type="checkbox" name="科学" value="科学" style="display:inline">科学
个人描述：
<textarea name="a" style="width:200px;height:30px;">这是一个多行输入框请在这里输入内容</textarea>
<input type="submit">
</form>
</body>
</html>
展示效果：https://thimble.mozilla.org/zh-CN/user/zhang-boyi-911/955634
网友评论