html基础一

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等技术。

认识网页

  1. 网页由文字、图片、输入框、视频、音频、超链接等组成。
  2. Web标准
Html结构标准
Css表现标准
Js行为标准

浏览器内核

浏览器内核也是浏览器所采用的渲染引擎,宣言引擎决定了浏览器如何显示网页的内容以及页面的格式。
渲染引擎是兼容性问题出现的根本原因。

Url地址

在这里插入图片描述

Html结构和sublime快捷键

Html结构标准

< ! doctype html> 声明文档类型
< html> 根标签
< head> 头标签
< title>< /title> 标题标签
< /head>
< body> 主体标签
< /body>
< /html>

Html 与htm是一样的。
后缀名不能决定文件格式,只能决定打开文件打开的方式。

快捷键

Html:xt+tabHtml结构代码
tab补全标签代码
Ctrl+shift+d快速复制一行
Ctrl+shiif+k快速删除一行
Ctrl+鼠标左键单击集体输入
Ctrl+h查找替换
Ctrl+f查找
Ctrl+/注释
Ctrl+L快速选择一行
Ctrl+shift+↑(↓)快速上移(下移)一行
F11全屏

标签之单标签、双标签

单标签

注释标签ctrl+/
换行标签< br />
水平线标签< hr />

双标签

  1. 段落标签:< p>文本内容< /p>
    特点:上下自动生成空白行。
    换行不会生成空白行。
  2. 标题标签
    h1-h6 取值到h6
    h1 在一个页面里只能出现一次。
  3. 文本标签
    < font>文本内容</ font>
    size,color

文本格式化标签

  1. 文本加粗标签
    < strong>< /strong> < b>< /b> 工作里尽量使用strong
  2. 文本倾斜标签
    < em>< /em> < i>< /i> 工作里尽量使用em
  3. 删除线标签
    < del>< /del> < s>< /s> 工作里尽量使用del
  4. 下划线标签
    < ins>< /ins> < u>< /u> 工作里尽量ins

注意:之所以工作里使用< strong>< /strong> < em>< /em> < del></ del>< ins>< /ins> 是因为更有语义化。

图片标签

  1. Src 图片的来源 必写属性
  2. Alt 替换文本 图片不显示的时候显示的文字
  3. Title 提示文本 鼠标放到图片上显示的文字
  4. Width 图片宽度
  5. Height 图片高度

图片没有定义宽高的时候,图片按照百分之百比例显示,如果只更改图片的宽度或者高度,图片等比例缩放。

相对路径与绝对路径

相对路径

相对于文件自身出发,就是相对路径。

  1. 文件和图片(html文档)在同一个目录(文件夹) ,直接写文件名。
  2. 图片(html文档)在文件在下一级目录里。文件夹名称+/+图片(html)名称。
  3. 图片(html)在文件的上一级目录里,…+/+图片(html)名称。
  4. 图片在文件的上一级的其他目录里,…/文件夹名称/图片名称。

总结:找到下一级目录(文件夹)的图片(文件)用 /跳出当前目录使用…/

绝对路径

超链接

  1. href 去往的路径(跳转的页面) 必写属性
  2. title 提示文本 鼠标放到链接上显示的文字
  3. target=”_self” 默认值 在自身页面打开(关闭自身页面,打开链接页面)
  4. Target=”_blank” 打开新页面 (自身页面不关闭,打开一个新的链接页面)
  5. 另存为 ctrl+shift+s
  6. 空链 不知道链接到那个页面的时候
  7. 超链接优化写法
    < 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>

滚动

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值