01_Html基本标签

Subline快捷键

快捷键	功能
html:4t 然后按下tab键	生成html的Transitional型文档结构
html:4s 然后按下tab键	生成html的Strict型文档结构
html:xt 然后按下tab键	生成xhtml的Transitional型文档结构
html:xs 然后按下tab键	生成xhtml的Strict型文档结构
! 然后按下tab键	生成html5的文档结构
tab	补全标签代码
Ctrl+Shit+d	快速复制一行
Ctrl+Shit+k	快速删除一行
Ctrl+鼠标左键	集体输入
Ctrl+h	查找替换
Ctrl+f	查找
Ctrl+/	注释
Ctrl+L	快速选择一行
Ctrl+Shit+↑（↓）	快速上移下移一行
F11	全屏
工具栏的查看---》布局	布局

sublime快捷键使用

单标签

• 注释标签
  ``
• 换行标签
  

• 水平线标签
  

  ---

双标签

• 段落标签
  特点：自动生成上下空白行，
换行不会生成空白行
  

• 标题标签
  h1~h6
  h1在一个页面中只能出现一次,因为有利于SEO优化
  
  
  
  
  
  
  
  
  
  
  

• 文本标签
  
  Web前端威武

文本格式化标签

• 文本加粗标签
  和
  strong有语气加强的作用， 工作里尽量使用strong

• 文本倾斜标签
  和
  工作里尽量使用em

• 删除线标签
  和
  工作里尽量使用del

• 下划线标签
  和
  工作里尽量使用ins

    14期威武

    
    Web前端威武

    前端威武

    
    Web前端威武

    前端威武

    
    Web前端威武

    前端威武

    
    Web前端威武

    前端威武

标签效果

注意：之所以工作里使用 是因为更有语义化。

图片标签

src： 图片的来源 必写属性
alt：图片不能正常显示的时候，会显示的文本
title：鼠标滑过图片的时候显示的文本
width：图片的宽度，只定义width，不定义height，图片不会变形，且等比例缩放
height：图片的高度，只定义height，不定义width，图片也不会变形，且等比例缩放
当width和height同时定义时，且宽高比不是原始图片的宽高比，则图片会变形

• 路径
  图片或文件在同一个目录(文件夹) ，直接写文件名。
  图片或文件在下一级目录里。文件夹名称/图片名称
  图片或文件在上一级的其他目录里，../文件夹名称/图片名称

注意：是不是在同一目录，都是相对于当前需要使用这个图片或文件的文档(包括html、css、js)而言

超链接

• a标签
  这是超链接
  a标签内必须有内容，否则无法显示
  href：去往的路径（跳转的页面） 必写属性
  title：提示文本 鼠标放到链接上显示的文字
  target：打开方式
• "_self"：默认值 在自身页面打开（关闭自身页面，打开链接页面）
• "_blank" ：打开新页面 （自身页面不关闭，打开一个新的链接页面）
• "_parent"：这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。
• "_top"：这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

锚链接

• 定义一个锚点
  

• 超链接到锚点
  回到顶部

空链

• 不知道链接到那个页面的时候，用空链
  

超链接优化写法

• 在head标签中，添加
  
  让所有的超链接都在新窗口打开

特殊字符

特殊字符

列表

无序列表

    

        
第一
        
第二
        
第三
    

type=”square” 小方块
type=”disc” 实心小圆圈
type=”circle” 空心小圆圈

有序列表

    

        
第一
        
第二
        
第三
    

• type=”1,a,A,i,I” type的值可以为
• 1：数字，表示列表项目用数字表示（1，2，3…..）
• a：字母，表示列表项目用小写字母表示（a，b，c…..）
• A：大小字母，表示列表项目用大写字母表示（A，B，C…..）
• i：罗马数字，表示列表项目用罗马数字表示（i，ii，iii…..）
• I：大写罗马数字，表示列表项目用大写罗马数字表示（I，II，III…..）
• start=”3” 决定了开始的位置。

自定义列表

    

        
班助中心
        
购物指南
        
订单操作
        
账户中心
    

dt：小标题
dd：解释标题

页面自动滚动效果之：

...
中间的内容可以为 文字，图片，也可以是由程序生成的文字或图片
属性：

• height 设置高度
• width 设置宽度
• bgcolor 设置背景颜色
• behavior：设定滚动的方式
• alternate： 表示在两端之间来回滚动。
• scroll： 表示由一端滚动到另一端，会重复。
• slide： 表示由一端滚动到另一端，不会重复。
• direction： 设置滚动的方向
• down :向下滚动
• left:向左滚动
• right:向右滚动
• up:向上滚动
• loop：设置滚动次数 -1一直滚下去

音乐标签

页面背景音乐：
属性：

• src 设置音乐路径
• hidden :隐藏播放按钮
• true 隐藏
• false 显示