一、前端基础包括哪些？如何理解
二、css，js引入_及head中其他标签
三、特殊符号
四、常见的标签
4.1，form表单
4.2，input系列（单选框、复选框、input传文件、重置）
4.3，label+input标签
4.4，多行文本框，下拉框单选，列表框多选
4.5，a标签，链接和锚点
4.6，图片img，列表（无序列表ul，有序列表ol，标题+内容列表）
4.7，表格<table>
4.8，fieldset标签，了解
------------------------------------------------------------------------------------------------
一、前端基础包括哪些？如何理解
前端：不要求多，基础的20个记住就行了。
三把利器：
HTML：赤裸裸的人
- 20个标签
一套规则，浏览器认识的规则
开发者：
学习HTML规则
开发后台程序：
-写HTML文件（充当模板的作用）
- 数据库获取数据，然后替换到HTML文件
- 本地测试，直接用浏览器去解析HTML就行了
CSS：给人穿衣服
- 颜色
- 位置
JS：让它动起来
浏览器作为客户端的时候，
一次请求，一次响应，连接断开。是无状态的
和socket不一样，socket只要两边不断，可以一直通信
socket服务端是所有web框架的本质。
一、服务器给浏览器的永远是一串字符串。
二、字符串的格式浏览器可以解析，呈现出效果，所以学的是浏览器展示的规则
可以把发送给浏览器的字符串的某部分做成活动的，从数据库中取。
那么这样HTML实际上变成了一个模板
=========================================================================
FAQ：body里直接写内容不行吗，非要用标签干嘛？
答：用标签可以找到对应包括的字符串，可以实现一些动态的东西，改属性等
FAQ：可以直观查看标签的效果吗？
答：页面上点右键“审查元素”或“检查”可以看效果。还可以查看标签的css样式
二、css，js引入_及head中其他标签
链接样式(外)：
css： <link rel="stylesheet" href="css/index.css">
js： <script type="text/javascript" src="js/other.js"></script>
链接样式(内)：
css: <style type="text/css"> ..... <style>
js: <script type="text/javascript"> .... </script>
<!DOCTYPE html> <!--这个是浏览器解释的规则，统一的解释规范 --> <!--HTML里只能有一个HTML标签。html标签里只能有一个head标签和一个body标签， html里的lang叫做标签的属性，定义语言没什么用。--> <html lang="en"> <head> <!--head里的所有标签只有title看得见 --> <!--meta是自闭合标签，自闭合标签很少，pycharm可以自动提示--> <meta charset="UTF-8">
<!-- 指定文档的内容类型为html和编码类型utf-8 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!-- <meta http-equiv="Refresh" Content="30" /> <!--过30秒自动刷新，很少用 <meta http-equiv="Refresh" Content="3;Url=http://www.baidu.com" /> <!-- 过几秒跳转到百度 --> <meta name="keywords" content="搜索引擎可以通过关键字搜出来的" /> <meta name="description" content="这里写关于网站的介绍，描述等" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- 强制IE浏览器的渲染方式，默认使用chrome来渲染，然后再按照IE该浏览器的最新版本来渲染--> <title>good boy</title> <link rel="icon" href="image/favicon.ico" /> <!--搞title处的图标--> </head> <body> 身体 </body> </html>
三、特殊符号
符号一般用来打空格，转义等。
常见符号： >等
更多符号：www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
四、常见的标签
4.1，form表单
a、放到form里面就把form里面的内容提交，否则无法提交
b、submmit才能提交表单
c、不写默认提交方式是“get”，可以改为“post”，get把数据放在请求头提交，post把数据放在body里提交
d、enctype编码类型，即表单数据进行编码的方式，允许表单将什么样的数据提交给服务器
1、application/x-www-form-urlencoded默认，允许将普通字符，特殊字符都提交给服务器，不允许提交文件
2、multipart/form-data,允许被将文件提交给服务器
3、text/plain 只允许提交普通字符，特殊字符。文件等都无法提交
注意：如果有文件需要提交给服务器，method必须为post，enctype必须为multipart/form-data
<form action="http://localhost:8888/index" method="get" enctype="application/x-www-form-urlencoded"> 输入用户名：<input type="text" name="user" /> 密码： <input type="password" name="pwd" /> 单纯的按钮：<input type="button" value="提交"/> 提交form表单：<input type="submmit" value="登录"/> <form/>
4.2，input系列（单选框、复选框、input传文件、日期/时间选择框、重置）
---------------
补：日期时间选择框
选日期： <input type="date">
选日期-时间： <input type="datetime-local">
----------------
type="text" type="password" type="button" type="submmit"含义
value：默认值
placeholder： 这是阴影显示
disabled="disabled"：按钮变灰色
name属性：服务端取数据的时候用
单选框：checked="checked"默认选中 name一样的标签互斥。将value的值提交到后台 男：<input type="radio" name="gender" value="1" checked="checked"> 女：<input type="radio" name="gender" value="2"> 保密：<input type="radio" name="gender" value="3"> 复选框：checked="checked"默认选中 爱好提交到后台，后台根据favor批量得到列表 <p>爱好<p/> 篮球：<input type="checkbox" name="favor" value="1" checked="checked"> 足球：<input type="checkbox" name="favor" value="2"> 橄榄球：<input type="checkbox" name="favor" value="3"> <p>技能<p/> Linux：<input type="checkbox" name="skill" value="1"> Python：<input type="checkbox" name="skill" value="2"> 上传文件 必须form里加上 enctype="multipart/form-data"才能上传文件, <form enctype="multipart/form-data"> <p>文件<p/> <input type="file" name="file_name"/> <input type="submmit" value="提交"/> <form /> 重置按钮：把表单里的数据还原成一开始的状态 <form> <input type="reset" value="重置"/> <form/>
4.3，label+input标签
点文字使得关联的标签获取光标
<label for="username">用户名：</label>
<input id="username" type="text" name="user">
4.4，多行文本框，下拉框单选，列表框多选
多行文本输入：后台通过name拿数据，默认值放中间,cols设置行,rows设置列
placeholder="请填自我介绍" <textarea cols="20" rows="5" name="meno">默认值</textarea>
下拉框一：选择北京或上海,通过name拿数据，把value提交上去,selected默认选中，size>1为滚动列表，否则为下拉框 <select name="city"> <option value="1">北京</option> <option value="2" selected="selected">上海</optiion> </select> 列表框单选： <select name="city" size="10"> <option value="1">北京</option> <option value="2" selected="selected">上海</optiion> </select> 列表框多选： <select name="city" multiple="multiple" size="2"> <option value="1">北京</option> <option value="2" selected="selected">上海</optiion> </select> 对下拉框分组显示：组名不能选 <select name="city"> <optgroup label="河北省"> <option value="1">石家庄</option> <option value="2">邯郸</optiion> </optgroup> <optgroup label="山西省"> <option value="1">吕梁</option> <option value="2">长治</optiion> </optgroup> </select>
4.5，a标签，链接和锚点
a标签做跳转和做锚点(跳到某个章节)。_black是打开新标签页，_self是默认值在当前页面打开，title是鼠标放上去显示的内容 <a href="www.baidu.com" target="_black" title="百度一下">百度</a> <a href="a.zip">下载压缩包</a>
<a href="#">跳转到顶部</a>
<a href="#p1">跳转到id为p1的标签</a> <a href="javascript:alert(1)">点击弹窗</a>
4.6，图片img，列表（无序列表ul，有序列表ol，标题+内容列表）
src为图片路径，如果图片过大style设置高度宽度，如果图片找不到，会显示alt的内容，鼠标放上去会提示title的内容。如果想点击图片跳转就用a标签把图片包起来 <a href="www.aaa.com"> <img src="c:\user\1.jpg" style="height:200px;200px;" alt="美女" title="大美女"> </a>
ol标签的属性：
type:列表标识的类型
1：数字
a：小写字母
A：大写字母
i：小写罗马字符
I：大写罗马字符
ul标签属性：
type：列表标识的类型
disc：实心圆
circle：空心圆
square：实心矩形
none：不显示标识 无序列表,前面显示“点” <ul> <li>第一章</li> <li>第二章</li> <li>第三章</li> </ul> 有序列表，前面显示数字 <ol> <li>首先</li> <li>其次</li> <li>最后</li> </ol> 列表，标题-内容的形式 <dl> <dt>水果</dt> <dd>橘子</dd> <dd>香蕉</dd> <dt>蔬菜</dt> <dd>菠菜</dd> <dd>洋葱</dd> </dl>
4.7，表格<table>
表格，thead是表头，tbody是内容。
border显示边框，cellspacing边框宽度 <table border="1" cellspacing="0"> <thead> <tr> <th>主机名</th> <th>端口</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1.1.1.1</td> <td>80</td> <td>查看</td> </tr> </tbody>
<tfoot>
<tr>
<td>表格底部</td>
<td>表格底部</td>
<td>表格底部</td>
</tr>
</tfoot>
</table> 横向进行2列合并：在td里加 colspan="2" 纵向进行2行合并：在td里加 rowspan="2"
4.8，fieldset标签，了解
<fieldset> <legend>登陆</legend> 用户名：<input> 密码：<input> </fieldset>