WEB学习-基础知识：列表、表单、div和span、注释、字符实体、HTML废弃标签介绍

• 列表
  • 无序列表

  • 无序列表，用来表示一个列表的语义，并且每个项目和每个项目之间，是不分先后的。
    ul就是英语unordered list，“无序列表”的意思。
    li 就是英语list item ， “列表项”的意思。
    这是我们学习的第一个“组标签”，就是要么不写，要么就要写一组。
        •        <ul>
        •            <li>北京</li>
        •            <li>上海</li>
        •            <li>广州</li>
        •            <li>铁岭</li>
        •        </ul>
    也就是说，所以的li不能单独存在，必须包裹在ul里面；反过来说，ul的“儿子”不能是别的东西，只能有li。
    
    下面的是错误的，因为必须用ul包裹：
        •            <li>北京</li>
        •            <li>上海</li>
        •            <li>广州</li>
        •            <li>铁岭</li>
    
    下面的也是错误的，因为ul里面只能有li标签，而不能有别的：
        •        <ul>
        •            <h3>中国主要城市</h3>
        •            <li>北京</li>
        •            <li>上海</li>
        •            <li>广州</li>
        •            <li>铁岭</li>
        •        </ul>
    
     浏览器会默认的给无序列表小圆点的“先导符号”
    但是，我们这里再次强调，ul的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的。
    
    ul标签实际应用场景：
    导航条：
    
    li里面放置的内容可能很多：
    
    ul的儿子，只能是li。但是li是一个容器级标签，li里面什么都能放，比如：
        •    <ul>
        •            <li>
        •                <h4>谈治国理政</h4>
        •                <p>¥49.00</p>
        •                <p>《谈治国理政》谈中国、论世界，为各国读者开启了一扇观察和感知中国的窗口。阅读这本书，可以了解以同志为总书记的党中央治国理念和执政方略，品味悠长醇厚的中国历史文化，感受当</p>
        •            </li>
        •            <li>
        •                <h4>用典</h4>
        •                <p>¥23.60</p>
        •                <p>人民日报社社长杨振武主持编写并作序，人民日报社副总编辑卢新宁组织撰写解读文字，旨在对总书记重要讲话（文章）引用典故的现实意义进行解读，对典故的背景义</p>
        •            </li>
        •            <li>
        •                <h4>摆脱贫困</h4>
        •                <p>26.00</p>
        •                <p>追本溯源 融会贯通    深入学习贯彻总书记系列重要讲话精神    推动学习贯彻向广度深度拓展    总书记**部个人专著    时隔22年后重印发行</p>
        •            </li>
        •        </ul>
    
    甚至于可以再放一个ul：
        •    <ul>
        •            <li>
        •                吃的
        •                <ul>
        •                    <li>饼干</li>
        •                    <li>面包</li>
        •                    <li>
        •                        巧克力
        •                        <ul>
        •                            <li>德芙</li>
        •                            <li>费列罗</li>
        •                        </ul>
        •                    </li>
        •                </ul>
        •            </li>
        •            <li>
        •                用的
        •                <ul>
        •                    <li>笔记本</li>
        •                    <li>圆珠笔</li>
        •                </ul>
        •            </li>
        •            <li>
        •                喝的
        •                <ul>
        •                    <li>牛奶</li>
        •                    <li>可乐</li>
        •                </ul>
        •            </li>
        •        </ul>

  • 有序列表

  • ordered list  有序列表，用ol表示
        •        <ol>
        •            <li>小苹果</li>
        •            <li>月亮之上</li>
        •            <li>最炫民族风</li>
        •        </ol>
    浏览器会自动增加阿拉伯序号：
    
    也就是说，ol和ul就是语义不一样，怎么使用都是一样的。
    ol里面只能有li，li必须被ol包裹。li是容器级。
    
    ol这个东西用的不多，如果想表达顺序，大家一般也用ul：
        •    <ul>
        •        <li>. 小苹果</li>
        •        <li>. 月亮之上</li>
        •        <li>. 最炫民族风</li>
        •    </ul>

  • 定义列表

  • 定义列表也是一个组标签，不过比较复杂，出现了三个标签：
    dl表示definition list 定义列表
    dt表示definition title    定义标题
    dd表示definition description 定义表述词儿
    dt、dd只能在dl里面；dl里面只能有dt、dd
        •        <dl>
        •            <dt>北京</dt>
        •            <dd>国家首都，政治文化中心</dd>
        •            <dt>上海</dt>
        •            <dd>魔都，有外滩、东方明珠塔、黄浦江</dd>
        •            <dt>广州</dt>
        •            <dd>中国南大门，有珠江、小蛮腰</dd>
        •        </dl>
    表达的语义是两层：
    ) 是一个列表，列出了北京、上海、广州三个项目
    ）每一个词儿都有自己的描述项。
    dd是描述dt的。
    
    定义列表用法非常灵活，可以一个dt配很多dd：
        •        <dl>
        •            <dt>北京</dt>
        •            <dd>国家首都，政治文化中心</dd>
        •            <dd>污染很严重，PM2.0天天报表</dd>
        •            <dt>上海</dt>
        •            <dd>魔都，有外滩、东方明珠塔、黄浦江</dd>
        •            <dt>广州</dt>
        •            <dd>中国南大门，有珠江、小蛮腰</dd>
        •        </dl>
    北京这个项目，用了两个dd来描述。
    还可以拆开，让每一个dl里面只有一个dt和dd，这样子感觉清晰一些。
        •        <dl>
        •            <dt>北京</dt>
        •            <dd>国家首都，政治文化中心</dd>
        •            <dd>污染很严重，PM2.0天天报表</dd>
        •        </dl>
        •
        •        <dl>
        •            <dt>上海</dt>
        •            <dd>魔都，有外滩、东方明珠塔、黄浦江</dd>
        •        </dl>
        •
        •        <dl>
        •            <dt>广州</dt>
        •            <dd>中国南大门，有珠江、小蛮腰</dd>
        •        </dl>
    
    真实案例：
    京东最下方：
    
    结构：
        •    <dl>
        •        <dt>购物指南</dt>
        •        <dd>
        •            <a href="#">购物流程</a>
        •            <a href="#">会员介绍</a>
        •            <a href="#">生活旅行/团购</a>
        •            <a href="#">常见问题</a>
        •            <a href="#">大家电</a>
        •            <a href="#">联系客服</a>
        •        </dd>
        •    </dl>
        •    <dl>
        •        <dt>配送方式</dt>
        •        <dd>
        •            <a href="#">上门自提</a>
        •            <a href="#">211限时达</a>
        •            <a href="#">配送服务查询</a>
        •            <a href="#">配送费收取标准</a>
        •            <a href="#">海外配送</a>
        •        </dd>
        •    </dl>
    
    dt、dd都是容器级标签，想放什么都可以。所以，现在就应该更加清晰的知道：
    用什么标签，不是根据样子来决定，而是语义。

• div和span

• div和span是非常重要的标签，div的语义是division“分割”； span的语义就是span“范围、跨度”。
  这两个东西，都是最最重要的“盒子”。
  
      •        <div>
      •            <h3>中国主要城市</h3>
      •            <ul>
      •                <li>北京</li>
      •                <li>上海</li>
      •                <li>广州</li>
      •            </ul>
      •        </div>
      •
      •        <div>
      •            <h3>美国主要城市</h3>
      •            <ul>
      •                <li>纽约</li>
      •                <li>洛杉矶</li>
      •                <li>华盛顿</li>
      •                <li>西雅图</li>
      •            </ul>
      •        </div>
  div在浏览器中，默认是不会增加任何的效果改变的，但是语义变了，div中的所有元素是一个小区域。
  div标签是一个容器级标签，里面什么都能放，甚至可以放div自己
  
  span也是表达“小区域、小跨度”的标签，但是是一个“文本级”的标签。
  就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。
  span里面是放置小元素的，div里面放置大东西的：
      •                <p>
      •                    简介简介简介简介简介简介简介简介
      •                    <span>
      •                        <a href="">详细信息</a>
      •                        <a href="">购买</a>
      •                    </span>
      •                </p>
  div标签是最最重要的布局标签：
      •        <div class="header">
      •            <div class="logo"></div>
      •            <div class="nav"></div>
      •        </div>
      •        <div class="content">
      •            <div class="guanggao"></div>
      •            <div class="dongxi"></div>
      •        </div>
      •        <div class="footer"></div>
  所以，我们称呼这种模式叫做“div+css”。div标签负责布局，负责结构，负责分块。css负责样式。
  
  例如，“我在学习HTML5的课程”，这个句话想给“HTML5”添加下划线，就可以用到span把HTML5分割开来，给span添加样式即可。

• 表单

• 表单就是收集用户信息的，就是让用户填写的、选择的。
      •        <div>
      •            <h3>欢迎注册本网站</h3>
      •            <form>
      •                所有的表单内容，都要写在form标签里面
      •            </form>
      •        </div>
  form是英语表单的意思。form标签里面有action属性和method属性，在《Ajax》课程上给大家讲解。稍微说一下：action属性就是表示，表单将提交到哪里。 method属性表示用什么HTTP方法提交，有get、post两种。

• 文本框

•  文本框
      •    <input type="text" />
  
  input表示“输入”，指的是这是一个“输入小部件”，
  type表示“类型”，
  text表示“文本”，指的是类型是一个文本框的输入小部件。
  这是一个自封闭标签，自此，我们学习的自封闭标签有：
      •    <meta name=”Keywords” content=”” />
      •    <img src=”” alt=”” />
      •    <input type=”text” />
  
  value表示“值”，value属性就是默认有的值，文本框中已经被填写好了：
      •    <input type="text" value="默认有的值" />
  
   密码框
      •    <input type="password" />
  也就是说，input标签很神奇，又是文本框，又是密码框。
  到底是啥？看type属性的值是什么，来决定。
  如果type=”text”  文本框
  如果type=”password” 密码框
  
   单选按钮
  
  只能选一个，术语叫做“互斥”，类型是“radio”。
      •    <input type="radio" name="xingbie" /> 男
      •    <input type="radio" name="xingbie" /> 女
  radio是“收音机”的意思，input的type的值，如果是radio就是单选按钮。
  非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做radio。
  
  单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。
      •    <input type="radio" name="xingbie" /> 男
      •    <input type="radio" name="xingbie" /> 女
  默认被选择，就应该书写checked=”checked”
      •    <input type="radio" name="sex" checked="checked">
  
   复选框
  
  也是input标签，type是checkbox。
      •    <p>
      •        请选择你的爱好：
      •        <input type="checkbox" name="aihao"/> 睡觉
      •        <input type="checkbox" name="aihao"/> 吃饭
      •        <input type="checkbox" name="aihao"/> 足球
      •        <input type="checkbox" name="aihao"/> 篮球
      •        <input type="checkbox" name="aihao"/> 乒乓球
      •        <input type="checkbox" name="aihao"/> 打豆豆
      •    </p>
  复选框，最好也是有相同的name（虽然他不需要互斥，但是也要有相同的name）
  
  HTML5中，input的类型又增加了很多（比如date、color，但是都不兼容，所以我们是在专门的HTML5课程中学）。
  不过现在，我们就先学习这四个。
      •    <input type="text" /> 文本框
      •    <input type="password" /> 密码框
      •    <input type="radio"> 单选按钮
      •    <input type="checkbox" /> 复选框
   下拉列表
  select就是“选择”，option“选项”。
  select标签和ul、ol、dl一样，都是组标签。
      •    <select>
      •        <option>北京</option>
      •        <option>河北</option>
      •        <option>河南</option>
      •        <option>山东</option>
      •        <option>山西</option>
      •        <option>湖北</option>
      •        <option>安徽</option>
      •    </select>
  
   多行文本框（文本域）
  text就是“文本”，area就是“区域”。
      •    <textarea cols="" rows=""></textarea>
  这个标签，是个标签对儿。对儿里面不用写东西。如果写的话，就是这个框的默认文字。
  
  cols属性表示columns“列”，rows属性表示rows“行”。
  值就是一个数，表示多少行，多少列。
  
   label标签
  本质上讲，“男”、“女”这两个汉字，和input元素没有关系，那么点击 “男或者女”的时候，单选框不会被选中。
      •    <input type="radio" name="sex" /> 男
      •    <input type="radio" name="sex" /> 女
  
  label就是解决这个问题的。
      •    <input type="radio" name="sex" id="nan" /> <label for="nan">男</label>
      •    <input type="radio" name="sex" id="nv"  /> <label for="nv">女</label>
  
  input元素要有一个id，然后label标签就有一个for属性，和id相同，就表示绑定了，这个label和input就有绑定关系了。那么点击“男或者女”的时候单选框也会被选中。
  
  复选框也有label：
      •    <input type="checkbox" id="kk" />
      •    <label for="kk">10天内免登陆</label>
  什么表单元素都有label。

• HTML注释和字符实体
  • 注释

  • 任何的程序、代码都有注释，注释就是给程序员看的，不影响程序的。
    
    适当的注释，能够让我们的程序更加可读，所以用中文提示自己，这里的程序是干什么的。
        •        <!--这里是头部，还没有做完，准备加两天班弄完-->
        •        <div>头部</div>
        •        <!--这里是xxx写的-->
        •        <div>主要内容</div>
        •        <!--这里是xxx负责的-->
        •        <div>页尾</div>
    HTML注释的语法
        •    <!--注释的内容-->

  • 字符实体

  • 我们想在页面上输出“<h1>”这些字符，但是HTML认为这是一个标签，还没封闭。
        •    好高兴啊，今天我们学习了<h1>标签，老师说这个标签是主标题的语义。
    所以，
        •    &lt;
    就是<的字符实体，什么意思呢？就是用常用字符表示这些符号的方式。
    lt 就是英语less than 小于的意思；
    
        •    &gt;
    就是>的字符实体。
    gt就是greater than 大于的意思。
    
        •    &copy;
    就是©  版权符号。
    
        •    &nbsp;
    nbsp就是英语non-breaking spacing不打断空格的意思，就是空格。
    
    所以：
        •    哈&nbsp;&nbsp;&nbsp;&nbsp;哈
    空出了4个字的格，可以防止空白折叠现象。

• HTML废弃标签介绍

• HTML现在只负责语义，而不负责样式。但是HTML一开始，连样式也包办了。
  这些样式的标签，都已经被废弃。
  
  2004年之前的东西了：
      •    <font size="" color="red">哈哈</font>
  
  这些标签都是css钩子，而不是原意：
      •        <b>加粗</b>
      •        <u>下划线</u>
      •        <i>倾斜</i>
      •        <del>删除线</del>
      •        <em>强调</em>
      •        <strong>强调</strong>
  这些标签，是有着浓厚的样式的作用，干涉了css的作用，所以HTML抛弃了他们。
  
  水平线：
      •    <hr />
  
  换行：
      •    <br />
  不另起一个段落，进行换行。
      •        <p>
      •            哈<br />哈哈
      •        </p>
  网页中99.%需要换行的时候，是因为另起了一个段落，所以要用p，不要用<br />
  br是英语break打断的意思。
  
  标准的div+css页面，用的标签种类很少：
      •    div  p  h1  span   a   img   ul   ol    dl    input
  知道每个标签的特殊用法、属性。比如a标签，img的属性。
  HTML结构、字符集。