开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第16天，点击查看活动详情
嗨，大家好，我是异星球的小怪同志
一个想法有点乱七八糟的小怪
如果觉得对你有帮助，请支持一波。
希望未来可以一起学习交流。
HTML入门零基础教程到此就结束了，如果以后有学习新的关于HTML知识，会继续更新的。
下面是关于HTML知识的总结。
一、 路径
1. 绝对路径 带有盘符，完整的网络地址 eg：F:/day01/1.jpg www.baidu.com。
2. 相对路径 不带有盘符，不能跨盘符。 eg：../day01/1.jpg。
（../跳出上一级文件夹 ../../跳出上两级文件夹）
实际工作中我们经常使用相对路径，也会使用完整的网络地址。
二、 HTML中的注释
< !--要注释的内容-->
三、 链接
< a href=“lianjie” >< /a>
< a href=“链接的路径或者地址”>< /a>
属性：target=“_blank” 新窗口打开
链接的种类
1. 文字链接
2. href中写本地文件路径
3. href中写完整的网络地址，注意http://必须是反斜杠
4. 图片链接
在img外套a标记
5. 空链接，假链接 href=“#”
链接不知道要跳转到哪去
四、 列表
1. 无序列表
<ul>
<li>123456</li>
<li></li>
</ul>
Ul里有type类型
<ul type>
<li></li>
<li></li>
</ul>
2. 有序列表
<ol>
<li></li>
<li></li>
</ol>
3. 定义列表（自定义）
一个项目名称+描述
<dl>
<dt>游戏</dt> ---> 项目的名称
<dd>王者荣耀</dd> ---> 对项目的描述
<dd>和平精英</dd>
<dd>跑跑卡丁车</dd>
<dt>
</dl>
五、 表格
<table> ---> 声明表格
<tr> ---> 行
<td></td> --->1.1 列（单元格）
<td></td>1.2
</tr>
<tr> --->2 行
<td></td> --->2.1 列（单元格）
</tr>
</table>
table里的属性
1.border 边框
2.width/height 宽 高
3.align 水平对齐方式
4. bgcolor 背景色
5. background 背景图片
6. cellspacing 单元格与单元格之间的距离
7. cellpadding 内容与单元格之间的距离
tr里的属性
1. height 高
2.aligh c l r
3. bgcolor 背景色
4.background 背景图片
5. valign 垂直对齐方式 top 顶部 middle 中间 bottom底部
td里的属性 跨行是从左往右从上到下
1. width/height 宽 高
2. align 水平对方式
3. bgcolor 背景色
4. background 背景图片
5. valign 垂直对齐方式 top 顶部 middle 中间 bottom底部
6. colspan 跨列
7. rowspan 跨行
th标记 表格表头，相当于加粗且居中的td
Caption标记 表格标题
表格的结构
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
表格中真正存放内容的地方只有td
细线表格
1.表格的边框为0 border=0
2.表格的单元格与单元格之间的距离为1 cellspacing=“1”
3.设置表格的背景色 表格背景色=细线的颜色
4.设置单元格的背景色 建议背景色与浏览器背景色一致
tab键 快捷补全代码
六、 表单
表单是用来收集用户信息的。
< form action=”表单要提交的地址” method=”表单的提交方式” name=“”>
< /form>
每一个input标签都需要有一个name属性，才能进行提交
表单元素
1. 文本框 < input type=“text” name=“” />
value=“”值
readonly 只读
size 文本框的宽度
maxlength 字符长度
disabled 禁用
2. 密码框 < input type=“password” name=“” />
3. 单选按钮 < input type=“radio” name=“名字要统一” value=“men/nv” />
label标记
针对单选按钮和多选按钮，点击文字选框被选中
为input标记定义标注
格式分为两种
1. 直接用label标记包含input元素和文字
2. 在input元素中创建id属性，用label标记包含文字并创建for属性，注意id和for属性的值必须一致
< input type=“radio” name=“” value=“” id=“nv” />< label for=“nv”>女< /label>
3. 多选按钮（复选框）
< input type=“checkbox” name=“名字要统一” value=“” />
checked=“checked” 默认被选中
4. 上传文件 < input type=“file” name=“” />
5. 下拉菜单
< select name=“”>
< option value=“”>< /option>
选项
< select>
6. 按钮
（1） 提交按钮 < input type=“submit” value=“” /> 提交功能
（2） 重置按钮 < input type=“reset” value=“” /> 重置功能
（3） 普通按钮 < input type=“button” value=“” /> 没有功能 不用记
（4）图片按钮 < input type=“image” src=“” /> 提交功能
7.逻辑思维：
1. 从上往下，从前往后写代码
2. 代码出错检查标签。检查属性是否空格。顺序
3. 搭结构要从大往小。从外往里搭
七、 什么是web标准
Web标准不是某一种标准，它是一系列标准的集合。
八、 Web标准的构成
结构(html) + 表现（css） + 行为（js）
九、 结构与表现相分离
在实际工作中html中不控制样式，（不用属性来控制样式），页面的渲染都由CSS实现。
十、 结构表现分离的好处
1. 节省代码的尺寸
2. 节约资源
3. 缩短改版时间
好啦，以上就是全部的HTML入门零基础教程，到此结束啦。
