html自学

开发工具

文本工具：notepad++ 、sublime
专业工具： (IDE) webstorm

标签

版本

meta charset=“UTF-8” Unicode编码

快捷键：比如 h1+Tab，可以自动补全标签
快捷键：ctrl+/ 自动注释

文字修饰：

h1-h6 标题标签，字体加黑加粗，字号逐渐缩小
p 表示段落
br 单标签，表示换行
hr 单标签，表示水平线
b 和 strong 表示加粗括起来的 文字
i 和 em 表示斜体文字
s 和 del 划去文字
u 和 ins 加下划线

图片修饰

img 引入图片，其中 src 是图片路径，alt 是图片无法加载时的提示，title 是鼠标放置图片上时的图片提示，width 是宽，height 是高。

路径问题

绝对路径：比如盘符中文件夹下文件的路径
相对路径：默认从同级的文件夹寻找图片路径
./ 从同级目录寻找
两个. 跳入父级目录中寻找
/ 根目录

超链接

a （href=）表示 超链接，别忘记写链接名
跳转有两种指定方式：target="_self" 当前窗口打开 target="_blank" 新窗口打开

锚点

锚点anchor id=“属性”，该属性（名称）全页面唯一。使用超链接a 输入 #属性，点击超链接直接跳至锚点

列表

ul 无序列表 显示点点点 里面放置 li
ol 有序列表 显示1234…
dl 自定义列表 里面放置 dd ，dt 相当于 dl 列表中的头

快捷键：比如 ul>li5+Tab 直接补全
(ul>li5)*5 放置五组列表

表格

table tr 表示一行，里面放置 td 表示一格（一列），th 定义表格的标题栏（文字加粗）
，border=“lpx” 表示边框
合并单元格 比如添加属性 colspan=“2”，当前该格跨两列；添加属性 rowspan=“2”，当前该格跨两行。 会把其它占位挤出去。

label for=“text” 可随意附加说明
input id=“text” type=“text” 输入框(只有一行)
input type=“button” value=“说明内容” 按钮
input type=“checkbox” 勾选框
input type=“radio” 单选框，想让一组radio只能选一个，必须附加同样的 name 属性
textarea 文本输入框
select 下拉选框 内置option

表单

form 用于为用户输入创建 HTML 表单。action 内添加服务器地址
input type=“submit” 提交
input type=“reset” 清空重置