第一周第二天笔记

第二天笔记

html更多解读

• html只考虑标签嵌套，跟tab和空格无关，无数个空格也只算一个。

1. 图片标签

• 相对路径：以当前页面为出发点查找；
  • 返回上一级即（./或不写）
  • 返回上上级即（../）
• 绝对路径：都是以http开头，利用极简图床转换；
• 图片属性：src,alt,title;

2.a链接

• 常用属性
  • href:要跳往的地址；
    • 作用
      1. 可以填写绝对路径，跳到相应的网页
      2. 可以写#：1）不确定地址的时候 2）简单的回到顶部效果
      3. 利用锚点进行页面切换
  • title:鼠标划上时的提示文本；
  • target：打开方式（_self,_blank,_parent,_top）;
  • 这些属性中title与target都可以省略。
• a链接的锚点使用
  • 本页面各个模块之间的相互跳转

  
  ..
  

  • 实现不同页面之间，不同模块的相互跳转：相对路径+#ID; (即点击跳转到detail.html文件中id=detail1的锚链)

• class来设置样式，id来获取元素

3.列表

• 无序列表

 

    
..
    
..
 

• 有序列表

```
 

    
..
    
..
 
```

• 定义列表dl,dt,dd都是容器
  • dt:中t为title:列表题目；
  • dd:中d为detail(详述):列表详述；

    
表头
    
详情介绍
   

4.表单

• 表单用
• 输入文本框
• 输入密码框
• 单选框：单选按钮组，一定要加上name，否则无法实现单选效果；

   男
   女

• 多选框：checkbox，name值可以不同，选中用checked

   美好
   天空
   世界

• 下拉列表:select,option双标签

   
       北京
       上海
       天津
   

注：1）name和value主要用于前端向后台提交数据；
2）id:第一用来设置样式（不建议，多实用class）
第二用来在JS阶段获取元素
第三，配合a链接，进行锚点锚链设置；

• 文本域textarea:cols,rows

   在里面输入内容

• 按钮
  • 普通按钮type="button"
  • 提交按钮type="submit"
  • 重置按钮type="reset"
• label-for:(for的值为id的属性值)

  请输入姓名:

5.选择器

• 标签选择器：div p h1-h6 a span ol ul dl li dt dd input select textarea img
• 类选择器
• ID选择器

6.设置容器里面的距离用padding，设置容器外面的距离用margin；

7.知识积累

• 在一段文字中使用line-height来控制，行与行之间的间距；

第二天总结及掌握

• 必须熟练使用相对路径和绝对路径；
• 锚点:同一页面不同模块间的跳转； 不同页面不同模块间的跳转；
• 列表：无序列表 有序列表 定义列表；
• 表单：表单实例能够默写下来；
• 以上是必须掌握的，接下来，是提高的；
• 小项目练习：能够熟练掌握。