html简单实现--代码+注释
本文仅有源码，可直接用于测试：与上一篇html文档对应
新人降临，请多指教！！！
<html>
<head>
<!-- 网页名字 -->
<title>测试页面</title>
<!-- 指定了文档的字符编码,防止页面乱码 -->
<meta charset="utf-8">
<!-- 网页logo -->
<link rel="shortcut icon" sizes="144x144" href="E:\Photograph\壁纸\图标.jpg" >
</head>
<body>
<!-- 页面顶部 -->
<a name="top"></a>
<!-- 字体无样式 -->
<p>普通输出</p>
<!-- 换行 -->
<hr>
<!-- 字体形式-斜体 -->
<!-- <em>属于内联元素:即元素展示没有间隙 -->
<em>斜体1</em><em>斜体2</em><em>斜体3</em><em>斜体4</em>
<!-- <p>-块级标签-默认有一定的样式显示(原因:默认的浏览器有着默认的展示<p>元素的CSS styling) -->
<p>斜体5</p><p>斜体6</p><p>斜体7</p><p>斜体8</p>
<hr>
<!-- 字体样式-加粗-"爆" -->
<p>你看我这<strong> 爆 </strong>脾气:)</p>
<hr>
<!--
图片插入:
alt:图片不能显示时显示的文本
src：图片路径
-->
<p>图片插入:</p>
<img alt="未找到该图片" src="E:\Photograph\壁纸\皮卡丘.jpg">
<!-- 页面中部标记 -->
<a name="middle"></a>
<p>点击图片跳转到百度：</p>
<a href="https://www.baidu.com">
<img alt="百度" src="E:\Photograph\壁纸\baidu.png">
</a>
<hr>
<!--
<a>标签属性:
href:声明超链接的web地址
title:超链接声明额外的信息(即链接到的地址名称)
target:指定链接如何呈现出来
target="_blank":新标签页中打开链接
-->
<!-- 声名超链接地址:直接跳转至指定链接 -->
<p>点击<a href="https:www.baidu.com" target="_blank" title="baidu">百度</a>,将在新页面打开链接</p>
<hr>
<!--
<input>标签:
type属性:输入类型
disable属性:防止用户输入
-->
<p>不可输入:
<input type="text" disabled>
可输入:
<input type="text">
</p>
<hr>
<p>实体字符:</p>
<!--
如果你想将引号当作文本显示在html中，你就必须使用实体引用
实体引用:
空格
&It; >
> <
& &
-->
<!--实体字符-->
<p>空格： END</p>
<p>左括号：<</p>
<p>右括号：></p>
<p>AND(&)符号：&</p>
<hr>
<p>表格:</p>
<!--
表格:
table标签:
broder属性:边框
cellspacing属性:单元格边框高度
cellpadding属性:单元格内边距
注意:若table设置了broder,则空单元格的border会不显示，可以通过在空单元格中添加 来解决
th:表头
rowspan:当前单元格占几行
colspan:当前单元格占几列
tr:行
aling:对其方式
td:列
-->
<!-- 有空单元格 -->
<table border="1">
<!-- 第一行 -->
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<!-- 第二行 -->
<tr>
<td>张三</td>
<td>23</td>
</tr>
<!-- 第三行 -->
<tr>
<td>李四</td>
<td>24</td>
</tr>
<tr>
<td>王五</td>
<td> </td>
</tr>
<tr>
<td>王五</td>
<!-- <td> </td> -->
</tr>
</table>
<br>
<table cellspacing="5" cellpadding="10" border="5">
<!-- -->
<tr align="right" >
<th rowspan="2">性别</th>
<td>男</td>
</tr>
<tr>
<td>女</td>
</tr>
</table>
<p>表单:</p>
<!--
表单(所有HTML表单都以一个<form>元素开始):
action:属性定义了在提交表单时,应该把所收集的数据送给谁(/那个模块)(URL)去处理
method:属性定义了发送数据的HTTP方法(它可以是“get(数据会附加在url地址后面)”或“post”).
注意:实践中最好至少要设置action属性和method属性
<input>标签:
type属性:
text:单行的文本区域
password:单行的文本区域，其值会被遮盖
checkbox:复选框
file:让用户选择文件的控件。使用accept属性规定控件能选择的文件类型。
-->
<form action="F:/HTML/html.html" method="get">
<!-- 单行文本输入框 -->
<div>
<label for="username">用户名:</label>
<input type="text" id="username" name="username">
</div>
<!-- 密码输入框 -->
<div>
<label for="password">密码:</label>
<input type="password" id="password" name="password">
</div>
<!-- 多行文本输入框 -->
<div>
<label for="Introduction">简介:</label>
<textarea id="Introduction"></textarea>
<div>
<!-- 上传图片文件 -->
</div>
<label for="avatar">上传头像:</label>
<input type="file" accept=".jpg" id="avatar">
</div>
<!-- 按钮 -->
<div>
<input type="reset"><!-- 重置按钮 -->
<input type="submit"><!-- 提交按钮 -->
</div>
</form>
<hr>
<!--
页面锚点
name属性：记录页面跳转位置
-->
<a href="html.html#middle">返回页面中部</a>
<a href="html.html#top">返回页面顶部</a>>
</body>
</html>
感谢阅读！！！
浙公网安备 33010602011771号