HTML5 学习笔记20170210 am

注释

格式 ``````

<!--下面一行代码, 代表着告诉浏览器郑伊健这三个字是标题-->
                                    
<h1>郑伊健</h1>

快捷键:ctrl + /

img 标签

img 是 Image 的缩写

作用:告诉浏览器我们需要显示一张图片

img 标签的格式

<img src="">**

img 标签中的 src 是英文 source 的缩写
所以 img 标签中的 src 就是用来告诉 img 标签,需要显示的图片名称

注意点

  • img 不独占一行
  • 如果我们手动指定了 img 标签显示图片的宽度和高度,有可能会导致图片变形,那么如果又想指定宽高,又不想图片变形,我们可以指定宽度和高度其中一个值
  • 只要指定了高度,系统会自动根据告诉计算出宽度,等比拉伸不会变形

img 中的其他属性

  • width 宽度

  • height 高度
    <img src=""* width="211">*

  • 这两个属性用来告诉 Img 标签将来显示的图片有多宽有多高,如果 img 标签没有指定需要显示的图片的宽高,那么系统会按照图片默认的宽高来显示;如果 img 标签指定了宽高,那么系统会按照指定的宽高来显示

  • title: 用于告诉浏览器,当鼠标悬停在图片上时需要在弹出的描述框中显示什么内容
    <img src=""* title="这是什么图片">*

  • alt 其实时英文 alternate 的缩写,它的作用就是用于告诉浏览器,当需要显示的图片找不到时显示什么内容
    <img alt="这没有图片">

br 标签

br 标签的作用: 换行
br 标签的格式: <br>
br 标签的注意点

  • 多个 br 标签可以连续使用,使用了多少个 br 标签就会换多少行
  • 由于 html 的作用就是用来给文本添加语义,而 br 标签的语义是不另起一个段落换行,而在企业开发中一般情况下需要换行都是因为需要另起段落,所以在企业开发中很少使用 br 标签

路径问题

想给 src 赋值有两种方式

  • 通过相对路径赋值(掌握),相对路径就是每次都从 .html 文件所在的文件夹开始查找,我们称之为相对路径
  • 同级
    同级就是“图片”和“ .html 文件”存储在同一个文件夹中
    格式
    src="QRCode.jpg"
    含义
    在 .html 文件所在的文件夹中查找名称叫做 QRCode.jpg 的图片
  • 下级
    下级就是“存储图片的文件夹”和“ . html 文件” 在同一个文件夹中
    格式:
    src="images/QRCode.jpg"
    含义
    在 .html 文件所在的文件夹中找到名称叫做 images 的文件夹 然后再在 Images 文件夹中找到名称叫做 QRCode.jpg 的图片
  • 上级
    上级就是“存储图片的位置”和“存储代码的文件夹”在同一个文件夹中
    格式
    src="../QRCode.jpg"
    含义
    在 .html 文件所在的文件夹中找到这个文件夹的上一级文件夹,然后再在上一级文件夹中找到名称叫做
    QRCode.jpg 其中 ../ 代表找到当前文件夹的上一级文件夹
  • 通过绝对路径赋值(了解)
    绝对路径就是每次都从指定的盘符开始查找
    格式
    src="C:\Users\Jonathan_Lee\Desktop\HTML基础\QRCode.jpg"
    含义:在 C 盘下找到 Users文件夹,然后在 Users 文件夹中找到 Jonathan_Lee 文件夹,然后在 Jonathan_Lee 文件夹中找到 Desktop 文件夹,然后在 Desktop 文件夹中找到 HTML 基础文件夹,然后在 HTML基础文件夹中找到名称叫阻碍哦 QRCode.jpg 的图片
    注意
  • 路径中不要出现中文,否则可能出现为止问题
  • 如果是通过“相对路径”来指定图片,不能跨盘符

例如 .html 文件在 C 盘,那么不能去查找 D 盘图片

img src="QRCode.jpg"

img src="images/QRCode.jpg"


img src="../QRCode.jpg"

img src="C:\Users\Jonathan_Lee\Desktop\HTML基础\QRCode.jpg"

a 标签的基本使用

a 标签
作用
就是用于控制页面与页面之间跳转的
a 标签的格式
<a href="指定需要跳转的目标界面">需要展现给用户查看的内容</a>
<a href="https://www.nuomi.com/?cid=002540">糯米</a>

  • a 标签中有一个叫做 target 属性,这个属性的作用就是专门用于控制如何跳转的,包含两个值
  • _self
    用于在当前选项卡中跳转,也就是不新建界面跳转,默认值为 _self
    <a href="xxx" target="_self"></a>
  • _blank
    用于在新的选项卡中跳转,也就是新建界面跳转
    <a href="xxx" target="_blank"></a>
  • a 标签中还有一个属性,叫做 title ,a 标签中的 title 和 img 标签中的 title 一样,都是用来控制鼠标悬停时显示的提示文本的
    <a href="https://nuomi.com/?cid=002540" target="_blank" title="江哥提示会转到百度糯米首页">糯米</a>

注意点

  • a 标签不仅可以让文字可以点击,还可以让图片也能够被点击
    <a href="images/QRCode.jpg" width="150"></a>
  • 一个 a 标签必须有一个 href 属性,否则 a 标签不知道要跳转到什么地方
  • 如果通过 a 标签的 href 属性指定一个 URL 地址,那么 必须在地址前面加上 http:// 或者 https://
  • a 标签的 href 属性除了可以指定一个网络地址以外,还可以指定一个本地地址
    <a href="08-br标签.html">08-br标签</a>
    <a href="text/demo/10-路径练习.html">10-路径练习.html</a>

base 标签

因为目前网页多为超链接所以在给所有超链接设置是新窗口打开还是在本窗口打开会造成繁杂的工作
base标签就是专门用来统一的指定当前网页中所有的超链接 (a 标签)需要如何打开
注意点

  • base 标签必须写在 head 标签的开始标签和结束标签之间
  • 如果即在 base 中制订了 target 又在 a标签中指定了 target ,那么浏览器会按照 a 标签中指定的来执行
<head>
        <meta charset="UTF-8" />
        <title>11-base 标签</title>
        <base target="_blank">
</head>

假链接

  • 点击之后不会跳转的链接我们称之为假链接
  • 假链接的意义
    在企业开发前期,其它界面都没有写出来,那么我们就不知道应该跳转到什么地方,所以就只能使用假链接来代替,当项目后期其它界面都已经完成时,再将假链接替换为真链接
  • 假链接的格式
  • <a herf="#">xx</a>
  • <a herf="javascript:">xx</a>
  • 两者之间的区别:# 的假链接会自动回到网页的顶端,而 Javascript: 的假链接不会自动会到网页顶端

锚点

  • 要想通过 a 标签跳转到指定的位置,那么必须告诉 a 标签一个独一无二的身份证号码,这样 a 标签才能在当前界面中找到需要跳转的目标抢位置
  • 在 html 中,每一个标签都有一个名称叫做 id 的属性,这个属性就是用来给标签指定一个独一无二的身份证号码的
  • 所以要想实现通过 a 标签跳转到指定的位置分为两步
  • 给目标位置的标签添加一个 id 属性
    然后制定一个独一无二的值
  • 告诉 a 标签你需要跳转到的飙标签对应的独一无二的身份证号码是多少
    格式
<a href="#center">跳转到中部</a>
<h2 id="center">我是中部</h2>

注意点

  • 通过我们的 a 标签跳转到指定的位置是没有过度动画的,是直接一下子就跳转到了指定位置
  • a 标签除了可以跳转到当前界面的指定位置外,还可以跳转到其他界面的时候直接跳转到其他界面的指定位置
    格式
<a href="13-锚点测试界面.html#bottm" target="_blank">跳转到锚点测试界面</a>
<h2 id="bottom">我是锚点测试界面3333</h2>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,830评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,992评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,875评论 0 331
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,837评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,734评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,091评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,550评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,217评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,368评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,298评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,350评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,027评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,623评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,706评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,940评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,349评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,936评论 2 341

推荐阅读更多精彩内容

  • 内容LongLongLong是一种情怀 本文是针对刚学编程的小白,都是一些基础知识,如果想了解更多深层一点的东西,...
    西巴撸阅读 975评论 0 0
  • 什么是浏览器 常见主流浏览器有5种: IE、谷歌、火狐、Safarri、欧朋; 浏览器主要有2个功能 1:将网页渲...
    Sky_Boss阅读 564评论 0 0
  • HTML需要掌握标签 标签(空格分隔): H5+CSS [TOC] 常用标签 img 注意点 和H系列标签/p标签...
    袁俊亮技术博客阅读 2,044评论 1 8
  • img标签 功能:告诉浏览器需要显示一张图片; 参数:width、height、src、title、alt;wid...
    Latte_Bear阅读 539评论 0 0
  • 笔尖勾勒出的 不是图画,是童心
    俞壹阅读 217评论 1 5