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>