前端基础学习总结

html归根到底就是一堆标签的集合从而构成网页的基本框架，但是只有html是远远不够的（因为做出来的贼丑）所以需要css进行页面的渲染

html的基础知识

html的标签书写的两种形式
– a. 自闭合标签：<标签名 />
– b. 非自闭合标签：<标签名></标签名>

---

对文本标签的学习
锚点的学习

A. 对文本处理的标签

1. h1,h2,h3,h4,h5,h6
   特点：从h1->h6 字体依次变小，字体颜色依次变浅。且会自动换行
2. 换行标签
   <br/>文本处理时可能需要换行 就是用它
3. 字体下滑线标签
   <u></u>
4. 字体倾斜标签
   <i></i>
5. 字体加粗标签
   <b></b> 不过一般使用css 的font-weight
6. 段落的标签
   <p></p>
7. 空格字符
   在进行段落处理时 首行没缩进 用空格代替
   &nbsp（跟着我念 牛逼视频）哈哈（是不是很形象）

---

B. 输入文本的标签

1. input标签
   注：<input type="text" value=""></input> type的标签是text时才是输入文本的文本框,不过缺陷的是输入的文本只会显示一行，因此适用于简短的文本输入
2. textarea标签
   <textarea></textarea> 不过要用style进行渲染下输入框的大小

---

C.图片的插入

img标签
书写格式
<img src="照片的路径" width="200px height="200px" title="照片停留时显示的文字" alt="假如路径出现问题时显示的文字"></img>

---

D.列表的引入

先看一个例子理解下什么是列表

• first
• second
• third

上面就是一个列表(我直接用代码写的就显示上面的结果 可以看出markdown支持html部分语言)
代码如下
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>

如果要显示有序列表

1. first
2. second
3. third

代码如下
<ol type>
<li>first</li>
<li>second</li>
<li>third</li>
</ol>
type可以有 a,A,1,I进行显示
如果想自定义标签的话

下面是我的标签

first

second

代码如下
<dl>
<dt>下面是我的标签</dt>
<dd>first</dd>
<dd>second</dd>
</dl>

---

E. 单选按钮

先看例子

学生
老师
属性介绍
name：当name值一样的时候只能选择一个按钮
value：是存放后台数据的标签 以便找寻对应的数据

identify=0 后台会根据0找到0对应的数据
checked 是默认的选项 上述代码默认是选择学生

---

F. 多选按钮

标签


代码如下；
<select name="address">
<option value="">--请选择--</option>
<option value ="0" selected="selected">中国</option>
<option value ="1">美国</option>
<option value ="2">英国</option>
<option value ="3">日本</option>
</select>

G .form表格的学习

类似于excel的表格

1. table标签
   属性：

   • border ：修饰边框 默认颜色为黑色 可以通过 bordercolor 设置边框的颜色
   • cellpadding 设置文字内容与内边框的距离
   • cellspacing 设置内边框与外边框的距离

2. tr2>th4 使用tab键快速生成代码
   效果：
   
   代码如下

<table border="1px" cellspacing="1 px" cellpadding="4px" bordercolor="red">
<tr height="35px">//可以设置单元格的高度
 			<th width="100px">姓名</th>  //也可以使用css对标签进行处理  因为这样写的话对每个标签都要写 宽度和高度
 			<th>性格</th><!--th加黑居中-->
 			<th>爱好</th>
 			<th>颜值</th>
 			<th>看书</th>
 		</tr>
 		<tr align="center">
 			<td>girlgod</td>
 			<td>豪爽</td>
 			<td>吃</td>
 			<td>高</td>
 			<td>java</td>
 		</tr>
</table>

当然这样肯定是不够的的 我们在word中会经常有的动作就是合并单元格
table当然可以进行这样的动作
横向合并属性 colspan 从当前位置开始向右进行合并单元格 记得合并几个就要在所在的tr标签相应的删除几个td标签
纵向合并标签 roespan 从当前位置开始向下进行合并单元格 ，记得合并多少个单元格就在向下的几个tr标签内删除一个td标签

~掌握了这个就可以做网页版的个人简历了

---

~在做的过程中一样大小的宽度 对于不同的table来说可能有部分误差

---

H .超链接的学习

标签 <a href="url（或者本地资源路径的html）">我是一个链接</a>
例子
百度
上面的链接就是用以下代码写的
<a href="http://www.baidu.com" target="_blank">百度</a>
target属性：
_blank 在新的标签页显示
_parent 在父级页面显示
_self 在当前页面显示
_top 在顶层页面显示
target本意是目标的意思 那么当然可以指定他到name指定的位置进行操作
即将当前链接显示的内容放在 name指定的位置显示 这个需要借助frame进行操作
大概形象以下就是现在的网页中有一部分就是将当前网页的连接内容显示信息在当前网页的某个位置

---

I.锚点的学习

所谓的锚点就是 抛一个锚 然后到达指定的位置
经常在读小说的时候，会经常用到锚点点击目录第几章，进而跳转到具体的页数

<a href="#名字">介绍</a>

在指定的位置加上 
<a name="名字"></a>
这样就可以通过点击介绍 进而跳转到指定位置

#表单的学习总结
作为前端最常用到的就是表单了，表单的主要任务就是实现与用户的交互。比如在登录 注册时经常遇到这样的表单。
注意在表单和后端进行交互时，要注意给表单加上name属性，后端就是根据name属性和value属性结合到一起组合成为键值对。
后端你通过name属性值获取到对应的value值。
```html
<input type="text" > <!--输入文本-->
<input type="password"> <!---输入密码-->
<input type="file"> <!--上传文本的属性 再进行长传文件和图片类时 注意在form表单上加上 enctype="multipart/form-data"-->
<input type="image"><!--上传图片-->
<input type="mail"><!--输入邮箱-->
```
后端是如何接受以上的数据的哪。下面一个完成的前端和后端的代码带你了解前后端是如何进行交互的。
对于struts2框架来说 务必确保前端的name属性值和后端保持一致
```html
<form action="http://localhost:9999/demo/interactive.action" method="post" enctype="multipart/form-data">
	<input type="text" name="username">
	<input type="password" name="password">
	<input type="image" name="photo">
	<input type="submit" value="提交"></input>
</form>
```
后端写响应的接口
首先配置好对应的struts.xml做好映射
```xml
<?xml version="1.0" encoding="UTF-8"?>
<!-- 引入约束 -->
<!DOCTYPE struts PUBLIC
	"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
	"http://struts.apache.org/dtds/struts-2.3.dtd">
<struts>
	<constant name="struts.i18n.encoding" value="utf-8"></constant>
	<package name="default" namespace="/" extends="struts-default">
		<action name="interactive" class="com.sofency.action" method="{1}">
			<result name="success">/success.jsp</result><!--成功之后跳转到成功界面-->
		</action>
	</package>
</struts>
```
写对应的action
```java
public class action extends ActionSupport{
	private String username;//对前端的属性进行对应封装
	private String password;
	private File photo;
	/*写上对应的setter 和getter*/

	public String interactive(){
		//将文件存储到服务器
		if(photo!=null){
			System.out.println("文件名称:"+photoFileName);   //abc.jpg
			System.out.println("文件MIME类型:"+photoContentType);  //image/jpeg
			//将上传的文件保存到指定位置
			photo.renameTo(new File("E:/upload/xxx.jpg"));
		}
		System.out.println(username);//这样就获取到数据了
		System.out.println(password);
	}
}
```