前端基础篇
相信在学习的时候碰到过很多困难，希望我的一些笔记可以帮助到大家。
标题标签
h1-h6 (双标签) 特点：
- 有小到大递减
- 有加粗效果 独占一行
- 作用：标题 代码样式：
<h1>标题标签</h1>
<h1>标题一共六级选,</h1>
<h2>文字加粗一行显。</h2>
<h3>由大到小依次减，</h3>
<h4>从重到轻随之变。</h4>
<h5>语法规范书写后，</h5>
<h6>具体效果刷新见。</h6>
</body>
p标签
- p （双标签）
- br标签 （单标签）
- hr标签(单标签)
- hr特点：水平分割线 一条横线
- br特点：文本强制换行
- p特点：独占一行
- 作用：段落 代码样式：
<p>在中国IT教育行业发展的轨迹中，<br /> 能始终秉承着初心做教育的企业为数不多，而在李开复老师的心中，传智播客就是其中之一。</p>
<hr>
<p>不久前，传智播客新加入了几位知名股东，其中包括创投圈的大咖——创新工场的李开复老师。在中国，李开复老师至少影响了70和80后两代人</p>
</body>
文本格式化标签
1.strong/b(双标签)
- 作用：加粗文本 2.em/i(双标签)
- 作用：倾斜文本 3.del/s(双标签)
- 作用：给文本添加删除线 4.ins/u(双标签)
- 作用：给文本添加下划线 代码样式：
我是<strong>加粗</strong>的文字
我是<b>加粗</b>的文字
我是<em>倾斜</em>的文字
我是<i>倾斜</i>的文字
我是<del>删除线</del>
我是<s>删除线</s>
我是<ins>下划线</ins>
我是<u>下划线</u>
</body>
div标签(双标签)
特点：独占一行 特点：独占一行 作用：可添加宽高的一个大盒子
span(双标签)
特点：可一行先是多个 作用：小盒子 代码样式：
特点：可一行先是多个
作用：小盒子
img图像标签(单标签)
作用：给盒子添加图片 属性：(可复合写法) 1.src=路径属性 2. alt=替换文本，图像显示不出来的时候用文字代替 3. title=提示文本，鼠标放在图片上时提示文本 4. width=给图片设置宽（不用写像素单位）height=高 只设置一个即可 5. border=给图片设置边框（不用写像素单位） 代码样式：
<img src="img.jpg"/>
alt 替换文本 图像显示不出来的时候用文字替换:
<img src="img1.jpg" alt="我是pink老师"/>
title 提示文本 鼠标放到图像上,提示的文字:
<img src="img.jpg" title="我是pink老师思密达" alt="我是pink老师"/>
width 给图像设定宽度:
<img src="img.jpg" alt="我是pink老师" title="我是pink老师思密达" width="500"/>
height 给图像设定高度:
<img src="img.jpg" alt="我是pink老师" title="我是pink老师思密达" height="100"/>
border 给图像设定边框:
<img src="img.jpg" alt="我是pink老师" title="我是pink老师思密达" width="500" border="15"/>
src路径
- 1.同一路劲 图片跟文件同一级
- 2.下一级路劲 ./
- 3.上一级路劲 ../
- 4.绝对路径 c:/(盘服路径) http://（网址路径）
a超链接标签（双标签）
特点：自带下划线/颜色的文本 作用：给文本添加链接 属性：
- href="www.qq.com" （ 外部链接 ）
- href="www.itcast.cn" （ 内部链接: 网站内部页面之间的相互链接 ）
- href="img.zip" （ 下载链接: 地址链接的是 文件 .exe 或者是 zip 等压缩包形式 ）
- href="www.baidu.com" （网页元素的链接）
- href="#" （空链接）
- target：打开窗口的方式 值： _self是默认的值 当前窗口打开页面 _blank 新窗口打开页面 代码样式：
graph TD
Start --> Stop
锚点定位
- 作用：点击有id名的内容 可返回锚点所在位置 代码样式：
<a href="#zuopin">主要作品</a>
<h3 id="zuopin">主要作品</h3>
</body>
注释标签和特殊字符
  ；（空格）
< ; （小于号）
> ；（大于号)
表格标签（双标签）
table（定义表格）
tr（表行）
th（表头单元格）
td（表格单元格）
合并单元格
colspan （跨行合并）值：数字
rowspan（跨列合并）值：数字
代码样式：
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
ul>li无序列表（双标签）
特点：前面有小圆点
代码样式：
<li>榴莲</li>
<li>
<p>123</p>
</li>
</ul>
ol>li有序列表（双标签）
特点：前面自带数字排序
代码样式：
<li>刘德华 10000</li>
</ol>
dl>dt,dd自定义列表（双标签）
特点：无任何样式特点（使用方便）
代码样式：
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
</dl>
表单域(了解)
from（双标签）
代码样式：
</form>
表格相关属性
属性：
border（边框宽度）值：数字
width（宽）值：数字
height（高）值：数字
代码样式：
<table border="1" width="600" height="400">
<tr>
<td>姓名</td>
<td>成绩</td>
<td>评语</td>
</tr>
</table>
caption/th
| 标签名 | 名称 | 说明 |
|---|---|---|
| caption | 表格大标题 | 表示表格整体大标题，默认在表格整体顶部居中位置显示 |
| th | 表头单元格 | 表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示 |
注意点：
caption标签书写在table标签内部
th标签书写在tr标签内部（用于替换td标签）
代码样式：
<caption><strong>学生成绩单</strong></caption>
<tr>
<!-- <td></td> -->
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
<tr>
<td>张三</td>
<td>100分</td>
<td>真棒, 第一名</td>
</tr>
</table>
扩展：
表格结构标签（了解）语义化标签
| thead | 表格头部 |
|---|---|
| tbody | 表格主题 |
| tfoot | 表格底部 |
表格结构标签可包裹te标签
表格结构标签可以省略
input系列标签（单标签）
type属性值
| input | text | 文本框，用于输入单行文本 |
|---|---|---|
| input | password | 密码框，用于输入密码 |
| input | radio | 单选框，用于多选一 |
| input | checkbox | 多选框，用于多选多 |
| input | file | 文件选择，用于之后上传文件 |
| input | submit | 提交按钮，用于提交 |
| input | reset | 重置按钮，用于重置 |
| input | button | 普通按钮，默认无功能，之后配合js添加功能 |
代码样式：
<!-- text 文本框 用户可以里面输入任何文字 -->
用户名: <input type="text" name="username" value="请输入用户名" maxlength="6"> <br>
<!-- password 密码框 用户看不见输入的密码 -->
密码: <input type="password" name="pwd" > <br>
<!-- radio 单选按钮 可以实现多选一 -->
<!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
<!-- 单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮 -->
性别: 男 <input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女" checked="checked"> 人妖 <input type="radio" name="sex" value="人妖"> <br>
<!-- checkbox 复选框 可以实现多选 -->
爱好: 吃饭 <input type="checkbox" name="hobby" value="吃饭"> 睡觉 <input type="checkbox" name="hobby"> 打豆豆 <input type="checkbox" name="hobby" checked="checked">
<br>
<!-- 点击了提交按钮,可以把 表单域 form 里面的表单元素 里面的值 提交给后台服务器 -->
<input type="submit" value="免费注册">
<!-- 重置按钮可以还原表单元素初始的默认状态 -->
<input type="reset" value="重新填写">
<!-- 普通按钮 button 后期结合js 搭配使用-->
<input type="button" value="获取短信验证码"> <br>
<!-- 文件域 使用场景 上传文件使用的 -->
上传头像: <input type="file" >
</form>
单行文本控件
input type值：text password
属性：
placeholder （占位符）表示用户输入内容的文本
value （用户输入的内容，提交后会发送个哥后台）
name=“nickname” 提交之后可以告诉后端发送过去的数据的含义
name的属性值=value的属性值
单选框控件
input type值：radio
属性：
name：分组有相同name属性的为一组，一组只能同时选中一个
checked 默认选中
多选框控件
input type值：checkbox
属性：
checked 默认选中
文件选择控件
input type值：file
属性：
multiple 多文件选择
按钮控件
input type值：
submit提交按钮
reset 重置按钮
button 无功能按钮
按钮需要配合form标签使用
button按钮标签
type值：
submit提交按钮
reset 重置按钮
button 无功能按钮
按钮需要配合form标签使用 可包裹文字，图片
select下拉菜单标签（下拉菜单的整体）
属性：selected 默认选中
option 标签 下拉菜单的每一项
代码样式：
籍贯:
<select>
<option>山东</option>
<option>北京</option>
<option>天津</option>
<option selected="selected">火星</option>
</select>
</form>
textarea 文本域标签
属性：
cols：规定了文本可见宽度
rows：规定了文本域可见行数
注意点：
右下角可拖拽大小
代码样式：
今日反馈:
<textarea cols="50" rows="5">pink老师,我知道这个反馈留言是textarea来做的 </textarea>
</form>
lable标签
用于包裹input标签前面的文本
代码样式：
<input type="radio" name="sex" id="nan"> <label for="nan">男</label>
<label><input type="radio" name="sex"> 女</label>
好啦，以下是我对前端基础知识的一些笔记，希望可以帮助到大家，有什么不对的，评论区告诉我哈哈哈！！！我一定改正并学习，加强自己，前端之路艰难并快乐着，加油加油！！！祝在学习前端的各位在大前端绽放耀眼光芒。
小辉灰
