HTML(4)_```html(4)-CSDN博客

本文链接：https://blog.csdn.net/john_boom/article/details/77056909

列表

无序列表

无序列表，用来表示一个列表的语义，并且每个项目和每个项目之间，是不分先后的。

ul就是英语 u nordered l ist，“无序列表”的意思。
li 就是英语 l ist i tem ， “列表项”的意思。

这是一个组标签，要么不写，要么就写一组。

<ul>
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
    <li>深圳</li>
</ul>

因为MarkDown是部分兼容HTML的，所以上面的代码效果如下：

北京
上海
广州
深圳

注意：
<li> 不能单独存在，而是必须包裹在<ul>里面，反过来说，<ul> 里面的内容只能有<li>。

<li>是一个容器级标签，<li>里面什么都能放。

有序列表

ordered list 有序列表，用<ol>表示

<ol>
    <li>小苹果</li>
    <li>月亮之上</li>
    <li>最炫民族风</li>
</ol>

效果就如下：

小苹果
月亮之上
最炫民族风

浏览器会自动增加阿拉伯序号

<ol>这个东西用的不多，如果想表达顺序，大家一般也用<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>

效果如下：

北京

国家首都，政治文化中心

上海

魔都，有外滩、东方明珠塔、黄浦江

广州

中国南大门，有珠江、小蛮腰

表达的语义是两层：
1）是一个列表，列出了北京、上海、广州三个项目
2）每一个词儿都有自己的描述项。
dd是描述dt的。

定义列表用法非常灵活，可以一个dt配很多dd：

<dl>
    <dt>北京</dt>
    <dd>国家首都，政治文化中心</dd>
    <dd>污染很严重，PM2.0天天报表</dd>
    <dt>上海</dt>
    <dd>魔都，有外滩、东方明珠塔、黄浦江</dd>
    <dt>广州</dt>
    <dd>中国南大门，有珠江、小蛮腰</dd>
</dl>

北京

国家首都，政治文化中心

污染很严重，PM2.0天天报表

上海

魔都，有外滩、东方明珠塔、黄浦江

广州

中国南大门，有珠江、小蛮腰

北京这个项目，用了两个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>

北京

国家首都，政治文化中心

污染很严重，PM2.0天天报表

上海

魔都，有外滩、东方明珠塔、黄浦江

广州

中国南大门，有珠江、小蛮腰

真实案例：

京东购物页面的
这里写图片描述

<div class="mod_help_nav">
<h5 class="mod_help_nav_tit">配送方式</h5>
    <ul class="mod_help_nav_con">
        <li><a href="//help.jd.com/user/issue/list-81-100.html" target="_blank">上门自提</a></li>
        <li><a href="//help.jd.com/user/issue/list-81.html" target="_blank">211限时达</a></li>
        <li><a href="//help.jd.com/user/issue/103-983.html" target="_blank">配送服务查询</a></li>
        <li><a href="//help.jd.com/user/issue/109-188.html" target="_blank">配送费收取标准</a></li>
        <li><a href="//en.jd.com/chinese.html" target="_blank">海外配送</a></li>
    </ul>
</div>

配送方式

dt、dd都是容器级标签，想放什么都可以。
所以，现在就应该更加清晰的知道：
用什么标签，不是根据样子来决定，而是语义。

div和span

div和span是非常重要的标签，div的语义是division“分割”； span的语义就是span，范围、跨度。

CSS中，这两个东西，都是最最重要的“盒子”。

<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负责样式。

表单

表单就是收集用户信息的，就是让用户填写的、选择的。

<div>
    <h3>欢迎注册本网站</h3>
    <form>
        所有的表单内容，都要写在form标签里面
    </form>
</div>

form是英语表单的意思。form标签里面有action属性和method属性。稍微说一下：action属性就是表示，表单将提交到哪里。 method属性表示用什么HTTP方法提交，有get、post两种。

文本框

<input type="text" />
这是一个自封闭标签。

value表示“值”，value属性就是默认有的值，文本框中已经被填写好了：
<input type="text" value="默认有的值" />

密码框

<input type="password" />
input标签很神奇，又是文本框，又是密码框。到底是什么？看type属性的值是什么，来决定。
如果type=”text” 文本框
如果type=”password” 密码框

单选按钮

只能选一个，术语叫做“互斥”。

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

radio是“收音机”的意思，input的type的值，如果是radio就是单选按钮。
非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做radio。

单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。

默认被选择，就应该书写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，但是都不兼容。

小结：

    <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="30" rows="10"></textarea>

这个标签，是个标签对儿。对儿里面不用写东西。如果写的话，就是这个框的默认文字。

cols属性表示columns“列”，rows属性表示rows“行”。
值就是一个数，表示多少行，多少列。

三种按钮

按钮也是input标签，一共有三种按钮：

普通按钮

<input type="button" value="我是一个普通按钮" />

button就是英语“按钮”的意思。value就是“值”的意思，按钮上面显示的文字。

提交按钮

<input type="submit" />
submit就是英语“提交”的意思。这个按钮不需要写value自动就有“提交”文字。

这个按钮点击，表单真的能提交。这个表单就会被提交到，form标签的action属性中的那个页面中去。

前端开发工程师，只需要关心页面的美、样式、板式、交互。至于数据的保存、读取，都是后台工程师做的事情。

重置按钮

<input type="reset" />

reset就是“复位”的意思。

至此，input的类型实际上非常多，HTML5将会变得更多。现在的阶段，input的类型：

text
password
radio   
checkbox
submit
reset

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杂项

HTML注释

任何的程序、代码都有注释，注释就是给程序员看的，不影响程序的。

适当的注释，能够让我们的程序更加可读，所以用中文提示自己，这里的程序是干什么的。
HTML注释的语法

Sublime中按ctrl+/ 就是注释

字符实体

我们想在页面上输出“<h1>”这些字符，但是HTML认为这是一个标签，还没封闭。

< 就是<的字符实体，什么意思呢？
就是用常用字符表示这些符号的方式。
lt 就是英语less than 小于的意思；

>就是>的字符实体。
gt就是greater than 大于的意思。

 nbsp就是英语non-breaking spacing不打断空格的意思，就是空格。

HTML废弃标签介绍

HTML现在只负责语义，而不负责样式。但是HTML一开始，连样式也包办了。
这些样式的标签，都已经被废弃。

这些标签都是css钩子，而不是原意:

<b>加粗</b>
<u>下划线</u>
<i>倾斜</i>
<del>删除线</del>
<em>强调</em>
<strong>强调</strong>

效果如下：

加粗
下划线
倾斜
~~删除线~~
强调
强调

这些标签，是有着浓厚的样式的作用，干涉了css的作用，所以HTML抛弃了他们。

水平线：
<hr>

换行：
<br/>
网页中99.9999%需要换行的时候，是因为另起了一个段落，所以要用 <p>，不要用 <br />
br是英语 break打断的意思。

标准的div+css页面，用的标签种类很少：
div p h1 span a img ul ol dl input
知道每个标签的特殊用法、属性。比如a标签，img的属性。