html基础一
认识前端
常用快捷键
快捷键 | 名称 |
---|---|
Ctrl+c | 复制 |
Ctrl+v | 粘贴 |
Ctrl+x | 剪切 |
Ctrl+a | 全选 |
Ctrl+s | 保存 |
Ctrl+z | 撤销一步 |
Windows+d | 返回桌面 |
Windows+e | 我的电脑 |
Windows+r | 打开运行 |
Alt+tab | 切换软件 |
Ctrl+tab | 软件文档之间的切换 |
F2 | 重命名 |
F5 | 刷新页面 |
认识大前端
前端就是将效果图生成网页,利用html+css+js等技术。
认识网页
- 网页由文字、图片、输入框、视频、音频、超链接等组成。
- Web标准
Html | 结构标准 |
Css | 表现标准 |
Js | 行为标准 |
浏览器内核
浏览器内核也是浏览器所采用的渲染引擎,宣言引擎决定了浏览器如何显示网页的内容以及页面的格式。
渲染引擎是兼容性问题出现的根本原因。
Url地址
Html结构和sublime快捷键
Html结构标准
< ! doctype html> 声明文档类型
< html> 根标签
< head> 头标签
< title>< /title> 标题标签
< /head>
< body> 主体标签
< /body>
< /html>
Html 与htm是一样的。
后缀名不能决定文件格式,只能决定打开文件打开的方式。
快捷键
Html:xt+tab | Html结构代码 |
tab | 补全标签代码 |
Ctrl+shift+d | 快速复制一行 |
Ctrl+shiif+k | 快速删除一行 |
Ctrl+鼠标左键单击 | 集体输入 |
Ctrl+h | 查找替换 |
Ctrl+f | 查找 |
Ctrl+/ | 注释 |
Ctrl+L | 快速选择一行 |
Ctrl+shift+↑(↓) | 快速上移(下移)一行 |
F11 | 全屏 |
标签之单标签、双标签
单标签
注释标签 | ctrl+/ |
换行标签 | < br /> |
水平线标签 | < hr /> |
双标签
- 段落标签:< p>文本内容< /p>
特点:上下自动生成空白行。
换行不会生成空白行。 - 标题标签
h1-h6 取值到h6
h1 在一个页面里只能出现一次。 - 文本标签
< font>文本内容</ font>
size,color
文本格式化标签
- 文本加粗标签
< strong>< /strong> < b>< /b> 工作里尽量使用strong - 文本倾斜标签
< em>< /em> < i>< /i> 工作里尽量使用em - 删除线标签
< del>< /del> < s>< /s> 工作里尽量使用del - 下划线标签
< ins>< /ins> < u>< /u> 工作里尽量ins
注意:之所以工作里使用< strong>< /strong> < em>< /em> < del></ del>< ins>< /ins> 是因为更有语义化。
图片标签
- Src 图片的来源 必写属性
- Alt 替换文本 图片不显示的时候显示的文字
- Title 提示文本 鼠标放到图片上显示的文字
- Width 图片宽度
- Height 图片高度
图片没有定义宽高的时候,图片按照百分之百比例显示,如果只更改图片的宽度或者高度,图片等比例缩放。
相对路径与绝对路径
相对路径
相对于文件自身出发,就是相对路径。
- 文件和图片(html文档)在同一个目录(文件夹) ,直接写文件名。
- 图片(html文档)在文件在下一级目录里。文件夹名称+/+图片(html)名称。
- 图片(html)在文件的上一级目录里,…+/+图片(html)名称。
- 图片在文件的上一级的其他目录里,…/文件夹名称/图片名称。
总结:找到下一级目录(文件夹)的图片(文件)用 /跳出当前目录使用…/
绝对路径
超链接
- href 去往的路径(跳转的页面) 必写属性
- title 提示文本 鼠标放到链接上显示的文字
- target=”_self” 默认值 在自身页面打开(关闭自身页面,打开链接页面)
- Target=”_blank” 打开新页面 (自身页面不关闭,打开一个新的链接页面)
- 另存为 ctrl+shift+s
- 空链 不知道链接到那个页面的时候
- 超链接优化写法
< base target="_blank"> 让所有的超链接都在新窗口打开
特殊字符
列表
无序列表
< ul>
< li>< /li> 列表项
< li>< /li>
< li>< /li>
< /ul>
type=”square” 小方块
Type=”disc” 实心小圆圈
Type=”circle” 空心小圆圈
有序列表
< ol>
< li>< /li> 列表项
< li>< /li>
< li>< /li>
< /ol>
type=”1,a,A,i,I” type的值可以为1,a,A,i,I
start=”3” 决定了开始的位置。
自定义列表
< dl>
< dt>< /dt> 小标题
< dd>< /dd> 解释标题
< dd>< /dd> 解释标题
< /dl>