目录
写在前面的小日记
考研失败了，才来学东西求职，投了好多家，只有一家在牛客上投的有hr打电话问了一下给放在了公司内的内推上了，剩下了有几家甚至没有给发邮件说收到了简历，祝自己成功。
报名了字节跳动的前端训练营，它的代码题要c，c++，js或python写，过段时间继续复健。
IDE按键
1.生成main()方法：psvm+回车 //也可以main+回车
2.生成输出语句：sout+回车 //无效
3.内容提示，代码补全：Ctrl+Alt+space
4.单行注释：选中代码，Ctrl+/，再一次取消
5.多行注释：选中代码，Ctrl+Shift+/，再一次取消
6.自动格式：Ctrl+Alt+L（vscode是Shift+Alt+F）
H5与CSS3
前端三剑客
结构：Html
表现：CSS
行为：JavaScript
VScode
创建 -> 存html -> !+回车创建骨架
右键直接在浏览器打开
<!DOCTYPE html>：文档类型声明标签
<html lang="en">：定义文档显示语言，即网页语言：英语en；中文zh-CN。对浏览器有作用，对其的自动翻译功能的触发生效。
<meta charset="UTF-8">：字符集，编码方式。UTF-8：万国码。
Html标签
标题：
<h1>-<h6>：<h1> 一级标题 </h1>
段落：
<p> 段落 </p>
换行：
<br />（注意中间的换行）
文本格式化标签：
| 加粗 | <strong> </strong> | <b> </b> |
| 倾斜 | <em> </em> | <i> </i> |
| 删除线 | <del> </del> | <s> </s> |
| 下划线 | <ins> </ins> | <u> </u> |
盒子标签：
<div>标签（分割，分区），<span>标签（跨度，跨距）：无语义空盒子
<div>：一个独占一行，一行一个
<span>：横向显示，一行可以放多个
图像标签：
<img>：<img src="图像url"/>
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本 |
| title | 文本 | 提示文本 |
| width | 像素 | 图像宽度 |
| height | 像素 | 图像高度 |
| border | 像素 | 图像的边框粗细 |
相对路径：
| 同一级 | |
| 下一级 | / |
| 上一级 | ../ |
绝对路径：用\取得本地地址，也可以使用网络地址。
超链接标签：
<a>：<a href="跳转目标" target="目标窗口的弹出方式" /> 文本或图像 </a>
target：_self：默认值，在当前窗口中打开；_blank：在新窗口中打开方式。
链接分类：1.外部链接，2.内部链接，3.空连接：#，4.下载链接，5.网页元素链接（对各种元素添加链接），6.锚点链接
<a href="#life"> life </a>
<!-- #号用于寻找id -->
<h3 id="life"> life </h3>注释：
<！--啊吧啊吧 -->（快捷键Ctril+/）
特殊字符：
| 空格 |   |
| 小于 | < |
| 大于 | > |
| 等于 | & |
| 人民币 | ¥ |
| 版权（圈c） | © |
| 注册商标（圈r） | ® |
| 摄氏度 | ° |
| 正负号 | ± |
| 乘号 | × |
| 除号 | ÷ |
| 平方2 | ² |
| 平方3 | ³ |
表格：
<table> <!--表格-->
<tr>
<th>表头单元格</th> <!--表头单元格，加粗，居中-->
</tr>
<tr> <!--行-->
<td>单元格内容</td> <!--单元格-->
...
</tr>
...
<table>
<!--or-->
<table> <!--表格-->
<thead>
<tr>
<th>表头单元格</th> <!--表头单元格，加粗，居中-->
</tr>
</thead>
<tbody>
<tr> <!--行-->
<td>单元格内容</td> <!--单元格-->
...
</tr>
...
</tbody>
<table>| 属性名 | 属性值 | 描述 |
| align | left，center，right | 表格相对周围元素的对齐方式 |
| boeder | 1或"" | 表格单元是否拥有边框，默认无 |
| cellpadding | 像素 | 单元格边沿与其内容之间的空白，默认1 |
| cellspacing | 像素 | 单元格之间的空白，默认2 |
| width/height | 像素值或百分比 | 表格宽度/高度 |
合并单元格：
跨行合并：rowspan="合并单元格格数"
跨列合并：colspan="合并单元格格数"
目标单元格：跨行合并->最上单元格；跨列合并->最左单元格
步骤：选择格式->找到目标单元格，写合并代码->删除多余单元格
列表：
无序列表：
<ul>
<li>表项</li>
<li>表项</li>
...
</ul>有序列表：
<ol>
<li>表项</li>
<li>表项</li>
...
</ol>自定义列表：
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
</dl>表单：
（表单域，表单控件，提示信息）<form>
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
<input type="属性值" />
</form>1.input输入表单元素
类型：
| button | 可点击按钮（结合js使用 ） |
| checkbox | 复选框 |
| file | 输入字段和“浏览”按钮，供文件上传 |
| hidden | 隐藏的输入字段 |
| image | 图像形式的提交按钮 |
| password | 密码 |
| radio | 单选按钮 |
| reset | 重置按钮 |
| submit | 提交按钮 |
| text | 文本框 |
属性：（name和value主要给后台用，name用于单选项与复选框，checker给单选和复选用）
| type | 类型 | |
| name | 由用户自定义 | input元素名称 |
| value | 由用户自定义 | input元素值 |
| id | 挂载<label> | |
| checked | checked | 此input元素首次加载时应当被选中（checked="checked"） |
| maxlength | 正整数 | 输入字段的字符最大长度 |
<label>标签：绑定一个表单元素，点击<label>标签内的文本时，浏览器自动将焦点转到原则对应的表单元素上。
<label for="sex_man"> man </label> <!--for内值对应id值-->
<input type="radio" name="sex" id="sex_man" />2.select下拉表单元素
<select>中至少包含一对<option>，<option>可以定义selected="selected"。
<select>
<option>aaa</option>
<option>bbb</option>
<option>ccc</option>
...
</select>3.textarea文本域表单元素
clos：每行中的字符数；rows：显示的行数。
查阅文档
W3C：http://www.w3school.com.cn
MDN：http://developer.mozilla.org/zh-CN/
html小案例
<!DOCTYPE html>
<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>Document</title>
</head>
<body>
<h2>黑马案例标题</h2>
<form>
<table width="600">
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" id="sex_man">
<label for="sex_man">男</label>
<input type="radio" name="sex" id="sex_woman">
<label for="sex_woman">女</label>
</td>
</tr>
<tr>
<td> 生日：</td>
<td>
<select name="year">
<option selected="selected">--请选择年--</option>
<option>y1</option>
<option>y2</option>
<option>y3</option>
<option>...</option>
</select>
<select name="month">
<option selected="selected">--请选择月--</option>
<option>m1</option>
<option>m2</option>
<option>m3</option>
<option>...</option>
</select>
<select name="day">
<option selected="selected">--请选择日--</option>
<option>d1</option>
<option>d2</option>
<option>d3</option>
<option>...</option>
</select>
</td>
</tr>
<tr>
<td> 所在地区： </td>
<td>
<input type="text" name="position" value="请输入所在地区">
</td>
</tr>
<tr>
<td> 婚姻状况： </td>
<td>
<input type="radio" name="marrige" id="no" checked="checked">
<label for="no">未婚</label>
<input type="radio" name="marrige" id="gone">
<label for="gone">离婚</label>
</td>
</tr>
<tr>
<td 学历： </td>
<td>
<input type="text" name="education">
</td>
</tr>
<tr>
<td>喜欢的类型：</td>
<td>
<input type="checkbox" name="type" id="ty1">
<label for="ty1">类型1</label>
<input type="checkbox" name="type" id="ty2">
<label for="ty2">类型2</label>
<input type="checkbox" name="type" id="ty3">
<label for="ty3">类型3</label>
<input type="checkbox" name="type" id="ty4">
<label for="ty4">类型4</label>
</td>
</tr>
<tr>
<td>自我介绍：</td>
<td><textarea>自我介绍</textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="submit" value="免费注册"></td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" name="agree">
我同意注册条款和会员加入标准</td>
</tr>
<tr>
<td></td>
<td><a href="#">我是会员，立即登录</a></td>
</tr>
<tr>
<td></td>
<td>
<h4>我承诺</h4>
<ul>
<li>年满十八岁，单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</table>
</form>
</body>
</html>
4822
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
