刚开始接触前端的一枚小菜鸡罢了，一些无用潦草且抽象的笔记。
目录
段落、图片、链接
<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="images/yang's帅照.jpg" alt=""><br/>
<img src="images/yang帅照.jpg" alt="yyk的帅照"><br/>
<img src="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="images/yang's帅照.jpg" alt=""></a><br/>
<!-- 这是一个注释 -->
这是小于号 <
</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="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="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="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="images/ao's帅照.jpg" alt="" width="100" height="150"></li>
<li><img src="images/yang's帅照.jpg" alt="" width="100" height="150"></li>
<li><img src="images/zy's帅照.jpg" alt="" width="100" height="150"></li>
<li><img src="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>
755
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
