前端与移动开发---菜鸟进阶计划002

(本文都是笔者自己的学习总结,如有不正确的地方,望共勉且相互尊重)

HTML(HyperText Markup Language)超文本标记语言,作用:使文本按照所使用标签的语义来显示文字、表格、图像、声音、链接等。

一、写网页的第一步

要写一个网页很简单,新建记事本,命名,然后后缀名写为.html保存即可。保存后的文件可以以记事本的方式编辑其中要显示的内容,然后通过浏览器查看方式查看所编辑的内容。

二、使用Sublime的一些快捷键

Ctrl+N新建文件 Ctrl+S保存(保存的时候注意文件的后缀名) 另存为Ctrl+Shift+S

快速复制一整行:Ctrl+Shift+D        快速删除一整行:Ctrl+Shift+K(如果不能正常使用,可能是与键盘的快捷键发生冲突,需要关闭键盘的快捷键方式)                   

上/下移一整行:Ctrl+Shift+上/下键          打开文件:Ctrl+O     关闭当前窗口:Ctrl+W        隐藏/打开侧边栏:Ctrl+\或者Ctrl+Shift+K+B

显示HTML的基本文本头的信息: 输入html:xt然后Ctrl+E       快速显示标签:输入标签+tab键

三、一些入门的标签

<h1>主标题标签</h1>.......<h6></h6>是主标题到六级标题。(注:1、一个页面只能有一个主标题。2、拿主标题来讲,主标题标签的目的不是为了让文本显示加粗变大而是让文本具有主标题的语义。)

<p>段落标签,使这这中间的内容自成一段显示</p>

<br/>换行标签,仅换行不需要显示别的内容,所以是自闭和标签。===>break           <hr/>分割线标签,会添加一行分割线。===>Horizontal Rule

<b>我会被加粗,对应BLOD,现在已经不用这种加粗方式</b>========<strong>现在常用的文本加粗标签</strong>

<u>我下面会有一条下划线,对应Underline,现在已经很少使用</u>=========<ins>现在常用的添加下划线的标签</ins>

<i>我会变成斜体字,对应Italic,现在已经很少使用</i>===========><em>现在常用的文本成为斜体的标签</em>

<s>我中间会有一条删除线,现在已很少使用</s>===========<del>现在常用的添加删除线的标签</del>

四、图片标签和超链接标签

img标签:

<img src="图片路径 " alt="当图片显示异常的时候显示的文本内容" title="浏览时将鼠标放在图片上显示的对图片的图片描述内容"  />  (注:img标签也是自闭和标签)

在网页中添加图片的时候,必须保证图片的路径正确。一般图片路径有四种情况:
01、网页在图片的上级目录中:从与网页同级的目录开始一级一级往下写,直到遇到要显示的图片,例如:img/1.jpg
02、图片在网页的上级目录中:先退出网页的目录直到与图片在同一级,再写图片名称,例如:../../../1.jpg
03、图片与网页不是单单的上级或者下级目录的关系:首先网页所在的目录知道与图片所在的文件夹在同级目录,然后再进入图片所在的文件夹找到图片,例如:../../img/1.jpg
04、绝对路径:使用盘符查找文件所在的位置,C:文件夹01/文件夹02/文件夹03/a.jpg,不推荐使用,且在火狐浏览器中是用绝对路径不能正常显示。

a标签===(anchor锚):

<a href="跳转的网页的路径">点我跳转</a>

1、有五种跳转情况:

01、不跳转:href="#"

02、本页定位:在要定位的地方的内容处的标签中添加一个id,如果没有标签的可以添加一个标签,然后根据id跳转。例如:在某处的<p id="bieming">......</p> 则在点击的超链接处写href="#bieming"

03、跳转并定位:如果想要实现跳转到另一个网页后并定位到特定位置,则使用 href="*****.html#bieming"

04、下载文件(强烈不推荐,不安全):href="a.zip"  直接写要下载的文件的路径

05、正常跳转到某页面的顶端

2、target属性

target=”_blank"  跳转的页面会以新页面打开的方式跳转,而所点击的页面不会被关闭

target='_self “  覆盖所点击的页面跳转到目标页面,默认为这种方式

3、base标签

使本页面的所有超链接都使用同一种跳转方式,在head之间设置

<base target="_blank"/>





评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值