HTML5基础

    1.0
    - 注意点:
    - H标签是用来给文本添加标题语义的,而不是用来修改文本样式的
    H标签一共有6个,从h1~h6最多就只能到6,超过6则无效
    被H系列包裹的内容会独占一行,在H系列的标签中,H1最大,H6最小
    在企业开发中,一定要慎用H系列的标签,特别是H1标签,在企业开发中
    一般情况下一个界面中只能出现一个H1标签(和SEO有关)
  1.1
    如何在Webstorm中利用快捷键创建一个新的html文件
    - 同时安歇键盘上的ctr + Alt + Insert mac下按command + N
    - 如何在webstorm中让光标移动到当前行的末尾
    - 按下键盘上的end键即可
    
    - 如何在webstorm中让光标移动到当前行的最前面
    - 按下Home键即可(只针对当前行有效,对整个文件无效)

    - 如何在webstorm中让光标在多行中闪烁
    - 按住alt键不放,然后在按下鼠标左键不放,然后在拖动鼠标即可

    1.2 P标签(Paragraph)
    - 作用
    - 告诉浏览器那些文字是一个段落
    - 格式
    - <p>xxxxxx</p>
    
    - 注意点:在浏览器中单独占一行

    1.3
    - ### hr标签(Horizontal Rule)
    - 作用:
    - 在浏览器中实现一条分割线
    - 格式
    - <hr/>
    ----
     -注意点:
    - 在浏览器中单独占一行
    - hr标签可以写/也可以不写/,如果不写就按照HTML的规范来编写,如果写就按照XHTML的规范来编写的
    - 但是在HTML5中,由于HTML5兼容HTML和XHTML所以写不写都可以
    - 具体按照开发工具的提示来写即可
    1.4
    - 如何在webstorm中快速复制光标所在的哪一行
    - Command + D 或者control + D
    -利用command + x快速删除光标所在的哪一行
    - 如何在webstorm中让标签包裹的一段内容,也就是自动在一段内容的前后加上标签
    - 按下control + alt + T ,然后按下回车,然后输入对应的标签即可



    1.5
    HTML注释:
    1.6
    img标签中的img其实就是英文image的缩写
    所以image标签的作用就是告诉浏览器需要显示一张图片
    img标签的格式:<img src= "">
     其实img标签中的src就是source的缩写
    所以img标签中的src就是用来告诉img标签,需要显示图片的来源
    注意点:
    和H系列的标签还有hr标签不一样,img标签不会独占一行
    width height  title alt
    宽高如果不写,就会按照默认的宽高进行显示,如果编写宽高,那么就会按照写入的款公安进行显示,但是有可能会导致图片变形
    可以只写入宽或者高,这样系统默认会适配一个的宽高,并且等比例拉伸的,所以图片不会变形
    title:当鼠标停在图片上时,需要弹出描述狂中显示的内容 alt就是alternate的缩写,他的作用就是告诉浏览器,当需要显示的图片找不到时显示什么内容。

    1.7 br标签在html中起到换行的作用
    样式:<br>
    注意点:多个br标签可以连续使用,使用了多个br标签就会换多少行
    1.7.2 由于html作用就是给文本添加语义,而br标签的语义是不另起一行换行,而在企业开发中一般情况下换行都是因为需要另起一行,所以开发中很少使用br标签

    1.8
    图片的路径问题:
    1.8.1 通过相对路径赋值  --> 相对路径就是每次都从.html文件所在的文件夹开始查找  ---> 我们称之为相对路径
    1.8.2 同级 
     同级就是图片和.html文件同存储在同一个文件夹中
    下级就是存储图片的文件夹和.html文件同在一个文件夹中
    上级  :上级就是存储图片的位置和存储代码的文件夹在同一个文件夹中
    1.8.3 通过绝对路径赋值
    绝对路径就是每次都从指定的盘符开始查找
    
    注意点:
    1.路径中不要出现中文,否则可能出现未知问题
    2.如果是通过相对领来指定图片,不能跨盘符
    3.例如html文件在C盘,那么不能去查找D盘图片
    
    企业开发中,如果需要编写路径同意使员工反斜杠,不要使用正斜杠,因为将来我们开发的程序有可能部署到其他操作系统的服务器上,而在其它操作系统中路径都是/,所以如果你不写的是/,可能引发问题 ,企业开发中一般不会使用绝对路径,因为可移植性不好,也就是说你你写好的代码拷贝给别人看,别人可能就不能运行了

    1.9 a标签
    1.9.1 什么是a标签?  a标签的作用:就是用于控制页面与页面之间的跳转
    1.9.2 a标签的格式:<a href = "指定需要跳转的目标界面">需要展现给用户看的内容</a>        
    a标签不仅可以让文字点击,还可以让图片也能够被点击,a标签必须有一个href属性,否则a标签不知道跳转到什么地方,如果通过a标签的href属性指定一个url地址,那么必须加上http://或者https://

    a标签有一个target属性,这个属性的作用就是专门用于控制如何跳转
    _self:用于当前选项卡中跳转,也就是不新建界面跳转
    _blank:用于新的选项卡中跳转,也就是新建界面跳转
    a标签中还有一个属性,叫做title,a标签中title和img标签中的title一样,都是用来控制鼠标悬停时显示的提示文本的

    2.0.0 base标签就是专门用来通知的指定当前网页中的所有的超链接(a标签是如何打开)
    注意点:
    2.0.1 base 标签必需下载head标签的开始标签和结束标签之间,如果即在base中指定了target又在a标签中指定了target,那么浏览器就会按照a标签中的指定来执行


    2.0.1 假链接
    假链接,就是点击之后不会跳转的链接,我们称之为假链接,假链接的意义在于:在企业开发前期,其他界面都没有写出来,那么我们就不知道跳转到什么地方,所以就只能使用假链接来代替,当项目后期其他界面都已完成时再将加链接替换为真链接
    假链接的格式: 
    1. # 
    2.javaScript:
    两者区别:#假的链接会自动回到网页顶部,而javascript:的假链接不会自动回到网页的顶部,可以利用这个方法,进行置顶按钮的设置;
    2.0.1  
    要想通过a标签挑战到指定的位置,必须告诉a标签一个独一无二的身份证号,这样a标签才能在当前界面中找到需要跳转到的目标位置;
  如果和html中的标签绑定一个独一无二的身份证号呢?
   在html中,每一个标签都有一个名称叫做id的属性,这个属性就是用来给标签指定一个独一无二的身份证号的
    所以要想实现通过a标签跳转到指定位置分为两步:
    2.0.2 给目标的标签添加一个id属性,然后指定一个独一无二的值
    2.0.3 告诉a标签你需要跳转到的目标的标签的独一无二的身份证号码是多少
    格式:<a href="#center">跳转到中部</a>
    <h2 id="center">我是中部</h2>
    注意点:
    1.通过我们的a标签跳转到指定的位置是没有过度动画的,一下子就跳转到了指定的位置。
    2.a标签除了可以跳转到当前界面的指定位置以外,还可以跳转到其他界面的时候直接跳转到其他界面的指定位置
    格式:
    <a href  = "锚点测试界面.html#bottom" target= "_blank"> 跳转到锚点测试界面></a>
    <h2 id = "bottom" > 我是锚点测试界面3333</h2>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,132评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,802评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,566评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,858评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,867评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,695评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,064评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,705评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,915评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,677评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,796评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,432评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,041评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,992评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,223评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,185评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,535评论 2 343

推荐阅读更多精彩内容