第二天笔记

html更多解读

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

1. 图片标签<img src="相对路径/绝对路径"/>

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

2.a链接

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

  <div id="div1"></div>
  <a href="#div1" >..</a>
  

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

  <a href="detail.html#detail1"></a>
  

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

3.列表

• 无序列表

 <ul>
    <li>..</li>
    <li>..</li>
 </ul>

• 有序列表

```
 <ol>
    <li>..</li>
    <li>..</li>
 </ol>
```

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

<dl>
    <dt>表头</dt>
    <dd>详情介绍</dd>   
</dl>

4.表单

• 表单用<form action="提交的服务器" method="提交方法"></form>
• 输入文本框<input type="text" placeholder="默认提示文本"/>
• 输入密码框<input type="password" placeholder="默认提示文本"/>
• 单选框：单选按钮组，一定要加上name，否则无法实现单选效果；

   <input type="radio" name="sex"/>男
   <input type="radio" name="sex"/>女

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

   <input type="checkbox" name="meihao" />美好
   <input type="checkbox" name="tiankong" />天空
   <input type="checkbox" name="shijie" />世界

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

   <select>
       <option value="bj" name="beijing">北京</option>
       <option value="sh" name="shanghai">上海</option>
       <option value="tj" name="tianjin">天津</option>
   </select>

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

• 文本域textarea:cols,rows

   <textarea cols="10" rows="20" >在里面输入内容</textarea>

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

  <label for="mass">请输入姓名:<input type="text" placeholder="名字" id="mass"/></label>

5.选择器

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

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

7.知识积累

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

第二天总结及掌握

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