day3-基础标签

上一部分主要介绍HTML标准的发展史、HTML的作用、HTML的格式等
地址：http://www.jianshu.com/p/4dc60a312e87

今天要介绍关于开发工具，各种基础标签h标签、p标签、hr标签
、img标签、br标签、base标签、a标签中关于选择文件路径问题及锚点等
如果有什么笔记中有什么错漏，或者提问技术问题都可以留言，大家进行经验分享 ---- 喵

开发工具

常见的前端开发工具

• Dreamwaver：偏向设计
• Sublime：轻量级，功能不全，插件丰富
• WebStrom：重量级，功能全，对JS支持特别好 -- 推荐
• WebStrom2016.2下载地址及破解http://www.sdifenzhou.com/?p=6941

• dss

基础标签--H标签、P标签、Hr标签

• 快捷键（本喵使用的mac WebStorm2016.2）
  • 新建html文件快捷键 command + n
  • chrome中打开开发者工具快捷键command + option + i
  • webStorm中多行输入option + 左键 往下拖
  • webStorm中快速复制单行代码 command + d
  • webStorm中快速删除单行代码 command + x
  • webStorm中快速包裹某行添加标签 command + option + t
  • 超过软件屏幕换行

自动换行.png

H系列标签

• 作用：用于给文本添加标题语义，而不是修改
  <h1>........</h1>
• 特点
  • h1~h6依次变小，只能到6
  • h系列独占一行
  • 注意：慎用h1标签，用于表示特别重要的内容，一般一个界面只有一个h1标签（SEO有关）
• 属性：align修改属居左居右居中
  • 注意：不推荐使用 改变了文字样式 推荐使用css

P标签

• 作用：用于给文本添加段落语义，而不是修改
  <p>........</p>
• 特点
  • p标签独占一行

Hr标签

• 作用：添加分割线
  

  ---

  ........
• 特点
  • hr标签独占一行
• 注意点：
  • </hr>仅限于XHTML中

  • ---

    在HTML中没有结束标签
  • HTML5规范中（XHTML和HTML兼容），两个都可以使用
  • 根据开发工具提示即可，不需要强行记

效果图

基础标签.png

注释

• 作用：不参与代码编译，写给程序员看
• 快捷键：command + / 再按一次就会取消注释

img标签

• image的缩写，图片标签，告诉浏览器展示一张图片
  <img src="">
  • scr是source缩写，即为需要显示的图片名称
• 注意点
  • img标签不会独占一行
• 属性
  • width：宽度
  • height：高度
  • 注意：没有指定宽高，则默认为图片原始尺寸
    • 同时指定高宽通常会让图片变形，但是只指定一个宽或一个高，系统会等比拉伸图片，保证不会变形
  • title：鼠标放在图片上时，显示的提示文字
  • alt：当指定图片不存时，则显示alt中内容

Br标签

• 作用：换行
  
  
• 注意点：
  • 一个br标签会换一行，多个br标签会多次换行
  • 企业开发中很少使用br标签，因为换行通常是因为该行内容已经描述完毕。br代表不另起一个段落换一行
    • 这段没描述完需要换行用br；否则可以用例如p标签之类会独占一行的标签

路径问题

• 想给src属性赋值有两种方式
  • 相对路径方式赋值：每次都从.html文件所在的文件夹开始查找
    • ①同级✨：图片和.html文件存储在同个文件
      夹中
      <img src="xiaoqi.jpg" alt="">
    • ②下级✨✨✨：存储图片的文件夹和.html文件在同个文件夹中
      <img src="images/xiaoqi副本.jpg" alt="">
    • ③上级：存储文件的文件夹和存储代码的文件在同个文件夹中
      <img src="../images副本/xiaoqi副本.jpg" alt="">
    • 不能夸盘符

• 绝对路径方式路径（了解）
  • 从指定的电脑盘符（c盘d盘之类）中开始查找
  • 用webStorm运行图片不会显示，必须手动打开.html文件
    <img src="file:///Users/milkteacat/Desktop/html自学笔记/代码--淡/day3/xiaoqi.jpg" alt="">
    <img src="/Users/milkteacat/Desktop/html自学笔记/代码--淡/day3/xiaoqi.jpg" alt="">
  • 注意点
    • 开发中不适用绝对路径：可移植性差
    • 表示路径的时候一定是反斜杠/，禁止写正斜杠\。由于操作系统间的移植。

补充点：mac中如何获取文件夹的路径

• 方法1：
• 打开浏览器
• 将要获取路径的文件拖到地址栏中
• 方法2：
• 打开终端
• 将要获取路径的文件拖到终端，再复制出来
• 其他方法：http://jingyan.baidu.com/article/380abd0a12007b1d91192c5e.html

a标签

• 作用：超链接效果。控制界面与界面的跳转。
  <a href="http://www.baidu.com"> 百度</a>
• 特点
  • href：指定需要跳转的目标界面
  • a标签中间，属性外面为用户可视内容
  • 既可以互联网跳转，也可以在本地.html文件进行跳转
  • 可以选择跳转后是否新建标签页（target属性：①_self当前跳转 默认是_self ② _blank新建标签页跳转 ）
  • title：鼠标悬停时显示的文字
• 注意点：
  • 可以超链接文字也可以超链接图片
  • a标签必须有href属性
  • url地址必须有http:// https://

base标签

• 写在head标签中间
• 属性
  • target：统一制定当前网页中所有超链接如何打开
• 注意点：若同时指定了base标签中的target和a标签中的target。就近原则：会执行a标签的target。

假链接

• 企业开发前期，调试阶段，很多界面没有完成，则利用假链接代替
  <a href="#">点我1</a>
  <a href="javascript:">点我2</a>
  -区别 #有返回当前顶部功能；javascript不具备这个功能

锚点

• 点击时，跳转到当前界面指定的位置
  • 可以使用a标签跳转，必须要绑定一个标识符id给跳转位置对应的标签
    <a href="# 跳转到某标签的id ">点我1</a>
    • 注意点：a标签跳转时没有动画效果，会很突然
    • 也可以跳转到其他.html的某个标签中，
      <a href="text.html# 跳转到某标签的id"> 百度</a >