HTML5笔记

  • 　　Webstorm 创建html5 文件快捷键 Ctrl+alt+Insert
  • 如何在WebStorm中光标移到最后最前：End 和 Home
  • 如何迅速在多行同位置插入相同内容？ 点击，Alt，按住往下拖
  • 如何快速复制 / 删除光标所在行内容？Ctrl + D / Ctrl + X
  • 选中文字，Ctrl + alt + T，会r自动生成tag
  • <!-- xxxxxxxxxxxxxxx --> HTML注释格式
  1. H 标签
    • 用来给文本添加标题语义的，不是用来修改文本样式的
    • H 标签共有六个，h1-h6，大小逐渐变小
    • 被H标签包裹的内容会独占一行
    • 在企业开发中，神勇H标签，特别是H1标签，在企业开发中一般一个界面只能出现一个H1标签（和SEO）有关
  2. P标签
    • <p> </p>
    • 在浏览器会独占一行
  3. Hr标签
    • 　　<hr />
    • 添加一条分隔线
    • HTML5兼容HTML和XHTML规范，所以<hr>（HTML） <hr/>（XHTML）都可以显示分割线
  4. img标签
    • 作用：告诉浏览器我们需要显示一张图片
    • 格式：<img src=" ">, src用来告诉img标签需要显示的图片名称
    • img标签不会独占一行，和H，p，hr标签不一样
    • width：宽度　　height： 高度。如果想指定宽度高度但是不想变形，只需指定一个。
    • title：用于鼠标悬停时的title显示
    • alt: 当图片不见了的时候alt的内容告诉用户这个事实
  5. br标签
    • 换行，<br>加在语句之后
    • br标签的语义时不另起一个段落换行，而企业开发中一般需要换行是因为要另起一个段落，所以商业开发用的少
    • 一般用<p></p>换行
  6. 路径问题
    • 相对路径：下三点
    • 和html文件同级，文件名即可
    • 下级：图片的文件夹和,html文件在一个文件夹 格式：src="images/1.png"
    • 上级：图片位置在上一级文件夹 格式：<img src="../1.png">
    • 绝对路径
    • 从盘符开始查找，
  7. a标签
    • 控制页面与页面之间跳转
    • 格式：<a href="指定需要跳转的目标界面"> 　需要展现给用户的内容(图片或文字）　</a>
    • a标签必须要有href属性，href属性也可以指到本地地址
    • a标签中有一个叫target的属性，控制如何跳转
      • 　　target = _self  在自己跳转
      •        target = _blank 新建空白页
    • a标签也有title属性，鼠标悬停时的通知

8. base标签

  • 统一制定当前网页中的超链接，必须写在head标签开始和结束之间
  • <base target = "_blank">
  • 如果别的网页要self打开，直接在a标签里修改为self就行了。

9. 假链接

  • 点击之后不会跳转的链接叫假链接
  • 意义：企业开发前期其他界面没写出来，我们不知道该跳转到什么地方，所以只能用假链接来代替
    • 格式：1. # 自动回到顶部
    • 　　2. javascript:     不会自动回到顶部

10. 锚点

  • 如果要指示a标签跳到指定的位置，必须告诉a标签一个独一无二的身份证。
  • 如何？ 在HTML中每一个标签都有一个叫id的属性，这个属性就是给标签指定一个独一无二的身份证
  • 所以想通过a标签跳转到指定位置分两步。1. 给目标位置的标签添加一个id属性，然后制定一个独一无二的值2. 告诉a标签要跳转到的目标标签对应的身份证号是多少
  • e.g. <h2 id = "Center"> 我是中部</h2>-----------------<a href="#Center">跳转到中部</a>
  • 直接这样写的话跳转的时候没有过渡动画（直接就跳转了）
  • 这种方法也可以实现跳到另一个页面的指定位置

11. 列表标签

  • 作用：给一堆数据添加列表语义，告诉浏览器这一堆数据是一个整体
  • 无序列表（unorder list）、
    • 给一堆数据添加列表语义，并且这一堆数据中所有的数据都没有先后之分
          • 先后之分： 排行榜。没有先后之分：并列
    • 格式：<ul>　　<li>需要显示的条目内容</li>　　</ul>
    • 注意：ul标签应该只是用来给一堆数据添加列表语义的，而不是用来添加小圆点的（后面通过css实现）
    • ul和li标签是一个整体，一个组合，一般情况下一起出现，不会单独出现
    • 由于ul和li标签是一个组合，所以ul标签不推荐包含别的标签
    • 应用场景：1.新闻列表 2. 商品列表 3. 导航条
    • li标签中的内容可能会很复杂， 所以我们可以继续在li标签中添加其他的标签来丰富界面
      • 　　虽然ul标签中只有li标签，但是li标签还可以放其他标签。 比如<li>　<h2>　<p>  </p>　</h2>　</li>
      • 　　li中还可以添加ul
      • ul>li*n + "Tab"快速生成 <ul> <li> </li> </ul>，其中li标签生成了n个

    •  

  • 有序列表（ordered list）
    • 顾名思义，前后顺序表示顺序关系
    • <ol>　　<ul> </ul>　　</ol>
  • 定义列表（definition list）
    • <b>bold粗体</b>　　 <u>下划线</u>　　<i>斜体</i>　　<del>删除线（或s标签，但要少用）</u>　　<pre>预格式，code用</pre>
posted @ 2019-01-30 14:38  Schwifty  阅读(157)  评论(0)    收藏  举报