我终于对前端下手了（
1.1入门
1.创建html文件，后缀名为html或者htm
2.标签分类
- 单标签
- 双标签：有开始标签和结束标签
<font>内容</font><b>内容</b>结束标签需要添加/
3.标签可以嵌套使用的（不能出现交叉嵌套）
- 正确：
<b><i>这是文字</i></b> - 错误：
<b><i>这是文字</b></i>
4.在开始标签中可以定义属性，属性由键值对组成，值需要使用引号引起来。一个标签中可以写多个属性，多个属性之间使用空格隔开。
5.html的标签不区分大小写。建议都使用小写。
示例
<html><head><title>title</title></head><body><font color='red' size = '5'>Hello World</font><br/><font color='green'>Hello World</font></body></html>
1.2 常用标签
1.2.1 文件标签
构成html网页的基本标签
1.<!DOCTYPE html> 用于指定当前文档的类型
2.html ：是文档的根标签,html文档中只有一个根标签，其他的标签都只能是根标签的子标签。
3.head ：头标签 包含了文档的咨询信息，当前文档的配置，引入其他的资源。
4.meta ：告知浏览器，使用什么方式来编码。浏览器默认的编码方式是gbk
5.title：设置网页的标题
6.body：用于定义网页的主体内容
例：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body>好好学习 天天向上</body>
</html>
1.2.2 文本标签
注释标签 <!--被注释的内容-->
标题标签 h1~h6特点：具有加粗和加黑的效果。从h1~h6大小是逐级递减。标题标签独占一行。
段落标签：<p>段落的内容</p>特点：段落与段落之间由空行隔开。换行标签：<br/> 注意：单标签的写法 <标签名/>水平线标签：<hr/>属性：1.color:设置水平线的颜色2.width:设置水平线的宽度3.align:设置水平线的对齐方式left center(默认值) rigth4.size:设置水平线的粗细加粗标签: <b>粗体文本</b> <strong>强调文本</strong>倾斜标签：<i>斜体文本</i> <em>强调斜体文本</em>下划线标签:<u>带下划线的文本</u>字体标签:fontfont标签是字体标签 默认没有任何效果，需要结合属性使用1.color:设置文字的颜色2.size:设置文字的大小范围：1~7 超过7还是7,默认值为3.3.face:设置文字的字体对应的需要在电脑中安装了对应的字体才有效果。（也可以使用css设计样式）
- 颜色的写法
1.直接写颜色单词：red green yellow blue pink purple orange
2.#6个数字 十六进制的数字（0~9a~f）#ff0000 #E91D1D
2.rgb(数字1,数字2,数字3);数字的范围是0~255.存在浏览器兼容性问题。
- 尺寸的写法
1.数值 width="600" 单位默认就是px(像素)
2.百分比：width="50%" 占比相对于父元素的比例
1.2.3 图片标签
img标签属性1.src:设置要显示的图片的路径。这是一个必须的属性。2.width:设置图片的宽度3.height:设置图片的高度为了保证图片不变形，设置了其中的一个 另一个就会等比例所缩放。4.title:设置鼠标悬浮在图片上的提示信息5.alt:设置图片不正常加载时的提示信息6.title:设置图片边框的粗细
示例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>图片标签</title></head><body><img src="1.png" width="50%" height="40%" title="这个猫猫是我的！！！" alt="麻薯图片" border="50"/></body>
</html>
1.2.4 超链接标签
<a>标签：属性：href:要链接的路径 如果要跳转到其他项目中 需要添加协议。target:设置连接打开的位置_self:在当前的窗体打开_blank ：在新窗体中打开
示例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>超链接页面</title></head><body>点击我可以 <a href="1.html" target="_self">看猫猫</a> <!--当前目录下的1.html--><a href="http://www.jd.com">跳转到京东</a><a href="#">我是一个超链接</a></body>
1.2.5 表格标签
1.2.5.1 表格标签三要素
table:定义表格
tr:定义行
td:定义单元格
1.2.5.2 表格标签的属性
1.border：用于设置表格的边框粗细，表格默认没有边框。2.cellspacing:设置单元格之间的距离3.width:设置表格的宽度4.height:设置表格高度5.align:设置表格的对齐方式：left center right6.bgcolor:设置表格的背景颜色7.cellpadding:设置内容到边框之间的距离
示例
<table border="1" cellspacing="0" width="50%" height="300px" align="center" bgcolor="orange" cellpadding="50"><!--第一行--><tr><td>序号</td><td>姓名</td><td>年龄</td></tr><!--第二行--><tr bgcolor="#ffc0cb" align="center" height="50"> <!--行标签也可以设置属性--><td>1</td><td>旺财</td><td>18</td></tr><!--第三行--><tr><td>2</td><td>小强</td><td>18</td></tr><!--第四行--><tr><td>3</td><td>小黑</td><td>18</td></tr></table>
1.2.6 表单标签（用于收集用户信息,一次性提交后端,和服务器进行交互）
1.2.6.2 表单标签
form:用于确定一个提交的范围,提交按钮在那个表单中就把那个表单提交
属性：
action:用于指定表单提交到服务器的路径
method:表单的提交方式
get:【默认的】1.数据是通过地址栏【url】提交的。2.对数据提交有大小的限制。【浏览器限制的】3.数据在地址栏中可见的，相对不安全。
post:1.数据是通过请求体提交。2.对数据的提交没有大小的限制。3.数据在地址栏中可见的，相对会更安全一些。注意：get/post都是明文传输数据。都是不安全的。1.2.6.3 表单项标签
数据要能够提交 必须给框取名 通过name属性input输入标记0. number:数值输入框1.text:普通文本输入框属性：1.placeholder 设置输入框的提示信息。2.size:设置输入框可见的宽度3.value:设置输入框的默认值【可以修改】2.password:密码输入框 输入的内容显示掩码。1.placeholder 设置输入框的提示信息。2.size:设置输入框可见的宽度3.value:设置输入框的默认值【可以修改】3.radio:单选按钮真正提交的值是value中的值。要实现多个单元按钮只能选择一个，需要保证他们的name属性是一样的。checked:设置默认选中。4.checkbox:复选按钮真正提交的值是value中的值。checked:设置默认选中。5.date:日期组件6.file:文件域7.hidden:隐藏域使用场景：服务器需要这个数据，但是希望在浏览器中不要显示出来。8.submit:提交按钮作用：将按钮所在的表单的内容提交到action指定的服务器中value:用于指定按钮上面的文字9.reset:重置按钮作用：将表单的内容还原成最初的样子value:用于指定按钮上面的文字10.button:普通按钮作用：默认没有任何作用，后期会结合点击事件使用。11.image:图片提交按钮作用：将按钮所在的表单的内容提交到action指定的服务器中
例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单标签</title>
</head>
<body><form action="#">用户名：<input type="text"><br>密码：<input type="password"><br>年龄：<input type="number"><br>性别：<input type="radio" name="sex">男 <input type="radio" name="sex">女<br>爱好：<input type="checkbox">唱歌<input type="checkbox">跳舞<input type="checkbox">睡觉<input type="checkbox">打游戏<br>头像：<input type="file"><br>生日：<input type="date"><br><input type="submit" value="提交信息"></form>
</body>
</html>
