HTML5：段落、图片、链接、表格、列表、表单

刚开始接触前端的一枚小菜鸡罢了，一些无用潦草且抽象的笔记。

段落、图片、链接

表格

列表

表单

一个简单的实例

段落、图片、链接

<html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>The First Title</title>
</head>

lang表示该页面的语言，有些浏览器会根据其语言进行默认翻译，为用户提供一个语言提示，但是其中对于文字的显示没有区别

<body><h1>前端的组成</h1><p>结构html5、样式css、跳转js<br/>br/强制换行</p>我是<b>加粗</b>文字<br/> 我是<i>倾斜</i>文字<br/> 我是<del>删除线</del><br/> 我是<ins>下划线</ins><div>我是一个div标签我一个人占一行，相当于一个盒子</div> 123<br/><span>我是一个sapn</span> <span>我是一个sapn</span><div>div与span都是用来布局</div><div><h4>锚点链接：快速索引到页面位置</h4><a href="#p_d">照片下载</a><h4>图像标签的使用:</h4><img src="data:images/yang's帅照.jpg" alt=""><br/><img src="data:images/yang帅照.jpg" alt="yyk的帅照"><br/><img src="data:images/yang's帅照.jpg" title="yyk的帅照"><br/><h4>cug官网跳转链接</h4><a href="http://www.cug.edu.cn" ,target="_self">cug_self</a><br/><h4>一个无用的跳转页面（本地）</h4><a href="show.html">一个跳转页面</a><br/><h4>空页面地址</h4><a href="#">空地址</a><br/><h4 id="p_d">下载地址</h4><a href="download/yang's帅照.zip">下载yang's帅照</a><br/><h4>图片链接</h4><a href="http://www.cug.edu.cn"><img src="data:images/yang's帅照.jpg" alt=""></a><br/><!-- 这是一个注释 -->&nbsp; 这是小于号 &lt;</div>
</body>

在body中：

<h*>*表示格式为几号标题
<p>标签为段落
<b>表示加粗
<i>表示倾斜
<br/>表示换行符
<div>可以看作是一个容器，占据一行的位置，可其中添加很多其他元素
<span>则表示一个小盒子，与div不同的是，div是一个大盒子
<img>表示插入一个图片文件，src为文件路径，alt为文件显示失败的提示，title为图像提示信息，width,height,border分别为图片的宽，高，边界粗度（对于src路径有两种方式，本机图片路径，网络绝对地址）
<a>跳转链接，可以跳转至本地链接"xxx.html"相对路径或是绝对路径，外部网址链接"http://www.cug.edu.cn"，空地址"#"，网址链接在<a>后面放入图片<img>点击图片进行跳转，下载链接"xxx.zip"或者"xxx.exe"，锚点链接<#id>根据id进行页面内的跳转
&It; 特殊符号的使用，前者为小于号，后者为空格

—————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

表格

<table align="center" border="1" cellpadding="20" cellspacing="0" width="700" height="500"><!-- 第一行 --><thead><tr><!-- 行中元素 --><th>姓名</th><th>性别</th><th>成绩</th><th>照片</th><th>学校链接</th></tr></thead><tbody><tr><td>张三</td><td>男</td><td>93</td><td><img src="data:images/yang's帅照.jpg" alt="" width="100" height="170"></td><td><a href="http://www.cug.edu.cn">CUG</a></td></tr><tr><td>李四</td><td>女</td><td>96</td><td><img src="data:images/ao's帅照.jpg" alt="" width="100" height="170"></td><td><a href="http://www.cug.edu.cn">CUG</a></td></tr><tr><td>张三</td><td>男</td><td>89</td><td><img src="data:images/zy's帅照.jpg" alt="" width="100" height="170"></td><td><a href="http://www.ncu.edu.cn/">NCU</a></td></tr></tbody></table>

在表格中主体分以下几个部分：

<table>表格，其中cellspacing为表格线的宽度，cellpadding为表格中字与边界的距离,border为表格是否需要表格线
<tr>表格中的行
<td>行中存放数据的格子
<th>表格中的表头设置

在表格中，我们可以放置各种各样的元素，图片、链接、文字等等，以上是表格的最基础的部分，当然是满足不了我们需要的应用的。

而我们通常需要将表格划分为头部属性与身体信息两部分，我们可以采用<thead>和<tbody>对表格进行划分，使表格代码结构更加清晰

<tr><td rowspan="2"></td><td></td><td colspan="3"></td></tr><tr><td></td><td></td><td></td><td></td></tr>

而在表格的操作中，我们也是通常需要对表格进行跨行或者跨列进行合并的，合并代码如上，使用跨行或者跨列合并单元格，<td rowspan>或者<td colspan>进行合并，效果如下。

总结：表格主要由三部分组成：标签<th>，行<tr>，单元格<td>其中<thead>和<tbody>表示表格的头部与身体，对于表格的样式操作有cellspacing、cellpadding、border，表格合并操作有rowspan、colspan

列表

<body><!-- 列表 其中只能放li，但是li中可以放置任何元素--><h3>无序列表</h3><h4>编程语言</h4><ul><li>java</li><li>C++</li><li>Go</li><li>python</li></ul><h4>帅照</h4><ul><li><img src="data:images/ao's帅照.jpg" alt="" width="100" height="150"></li><li><img src="data:images/yang's帅照.jpg" alt="" width="100" height="150"></li><li><img src="data:images/zy's帅照.jpg" alt="" width="100" height="150"></li><li><img src="data:images/f's帅照.jpg" alt="" width="100" height="150"></li></ul><h3>有序列表</h3><h4>语言熟练度排名</h4><ol><li>C++</li><li>python</li><li>java</li><li>Go</li></ol><!-- dd是对dt的各种解释说明 --><h3>自定义列表</h3><h4>编程语言种类</h4><dl><dt>编程语言</dt><dd>java</dd><dd>C++</dd><dd>Go</dd><dd>python</dd></dl>
</body>

列表一共是分为三种：无序列表、有序列表、自定义列表

标签	定义	说明
<ul></ul>	无序列表	列表的陈列是无序的
<ol></ol>	有序列表	用于排名等有序操作
<dl></dl>	自定义列表	可以对字段进行说明

在无序和有序列表中，其中的列表元素都为<li>，不能为其他东西，而在<li>当中，我们可以定义文字、超链接、图片等等元素。

与以上两种不同的是，自定义列表其中的元素有<dt>与<dd>，对于<dt>其可以为一个总概的字段，例如编程语言，而之后的<dd>便是对<dt>的一个说明，编程语言有哪些？进行一个罗列。

表单

表单的用处，为了手机用户信息。表单由：表单域、表单元素、提示信息构成的。

表单域是为了将域内信息提供给后台

<body><form action="xxx.php" method="get" name="name1"><h5>input表单元素使用</h5><!-- 文本框 --><label for="id">账号：</label><input type="text" name="account" value="请输入用户名" maxlength="8" id="id"><!-- 密码框 --><br/> <label for="psw">密码：</label><input type="password" id="psw" name="password"><!-- 单选框 --><br/> 性别：<label for="男">男</label><input type="radio" name="sex" value="男" checked="checked" id="男"><label for="女">女</label><input type="radio" name="sex" id="女" value="女"><!-- 多选框 --><br/> 爱好：<label for="玩">玩</label><input type="checkbox" name="hobby" value="玩" id="玩"><label for="吃">吃</label><input type="checkbox" name="hobby" value="吃" id="吃"><!-- 注册（提交php） 重置按钮 --><br><input type="submit" name="submit" value="注册"> <input type="reset" name="reset" value="重置"><!-- 自定义按钮，利用js启动事件 --><br><input type="button" name="button1" value="事件1"><br>上传文件<input type="file" value="选择文件"><h5>select下拉表使用</h5>籍贯：<select name="籍贯" id="籍贯"><option value="山东">山东</option><option value="北京">北京</option><option value="江西" selected="selected">江西</option><option value="湖北">湖北</option></select><h5>文本域表格元素</h5>建议：<textarea name="建议" id="建议" cols="30" rows="3">一些你的建议</textarea></form>
</body>

input表单元素使用：其中有着各种各样的样式，text一行文本、password输入格式为密码、radio单选、checkbox多选、submit提交按钮（传送数据给后端）、button按钮配合js使用。

在其中每个input都可以设置相对应的id，每个input有着自己唯一的id，对于radio和checkbox可以通过name，来对多选单选进行锁定？这种说法可能不太准确，这种按钮可以使用checked进行默认选定。其中也有value值，是不同的input传给后端的值。而对于一些按钮可能想通过点击前面的文字进行选中，提高用户的体验，于是使用lable，与相对应的input元素进行锁定即可。

select下拉表：利用select，在其中有着option选项，每个option选项就是下拉框中的内容，在option选项中也可以设置value值等，也可以使用selected进行默认选定。

textarea文本输入框：可以利用cols与rows设置初始宽度的行列

一个简单的实例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>注册页面</title>
</head><body><h3>玩家注册</h3><table><tr><td>性别</td><td><input type="radio" name="sex" id="男" checked="checked"> <label for="男">男</label><input type="radio" name="sex" id="女"><label for="女">女</label></td></tr><tr><td>生日</td><td><select name="年" id="年"><option value="2000">2000</option><option value="2001">2001</option><option value="2002">2002</option><option value="2003">2003</option><option value="2004">2004</option><option value="2005">2005</option></select><select name="月" id="月"><option value="1">1</option><option value="2">2</option><option value="4">10</option><option value="5">11</option><option value="6">12</option></select><select name="日" id="日"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select></td></tr><tr><td>所在地区</td><td><input type="text" value="江西"></td></tr><tr><td>爱好</td><td><label for="玩">玩</label><input type="checkbox" name="爱好" id="玩" checked="checked"><label for="吃">吃</label><input type="checkbox" name="爱好" id="吃"><label for="看">看</label><input type="checkbox" name="爱好" id="看"></td></tr><tr><td>备注</td><td><textarea name="备注" id="备注" cols="30" rows="5"></textarea></td></tr><tr><td></td><td><input type="submit" name="提交" id="提交" value="注册"></td></tr><tr><td></td><td><input type="checkbox" name="" id="协议" checked="checked"><label for="协议">我同意该协议</label></td></tr><tr><td></td><td><h5>开始你的新世界</h5>加载1...<br/> 加载2.....<br/> 加载3.......<br/></td></tr></table>
</body></html>