HTML学习002

最新推荐文章于 2022-11-22 10:59:21 发布

原创最新推荐文章于 2022-11-22 10:59:21 发布 · 274 阅读

0 ·

CC 4.0 BY-SA版权

HTML 专栏收录该内容

6 篇文章

订阅专栏

列表

无序列表

无序列表，用来表示一个列表的语义，并且每个项目和每个项目之间，是不分先后的。
ul 就是英语的 unordered list. ”无序列表“的意思
li 就是英语 list item. ”列表项“的意思

<ul>
     <li>武汉</li>
     <li>上海</li>
     <li>成都</li>
 </ul>

li 不能单独存在，必须包裹在 ul 里面；
反之，ul 的”儿子“不能是别的东西，只能是 li
li是一个容器级标签，li 里面什么都能放

有序列表

ordered list 有序列表，用ol表示

<ol>
    <li>香蕉</li>
    <li>苹果</li>
    <li>奇艺果</li>
</ol>

ol里面只能有li,li必须被ol包裹，li是容器级。
ol 用得不多，如果想表达顺序，一般用 ul;

<ul>
    <li>1.苹果</li>
    <li>2.香蕉</li>
    <li>3.梨子</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>
</dl>

表达的语义是两层，
1. 是一个列表，列出了武汉，上海两个项目
2. 每个词都有自己的描述项

dd 是描述 dt的。

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

<dl>
    <dt>北京</dt>
    <dd>污染严重，PM2.0天天爆表</dd>
    <dd>没什么好吃的。</dd>
    <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>

dt、dd都是容器级标签，想放什么都可以。

div 和 span

div 和 span 是非常重要的标签，

div 的语义是 division ”分割“
span 的语义是 span ”范围，跨度“

<div>
    <h3>中国主要城市</h3>
    <ul>
        <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 action="">
        所有的表单内容，都要写在form标签里面
    </form>
</div>

form 标签里面有 action 属性和 method 属性，

action 属性表示表单将提交到哪里。
method 属性表示用什么HTTP 方法提交，有get ,post 两种

文本框

<input type="text" />

input 表示 “输入”，指的是这是一个“输入小部件”
type 表示“类型”
text 表示“文本‘,指是的类型是一个文本框的输入小部件。
value 表示”值“，value 属性就是默认有的值，文本框中已经被填写好了

<input type="text" name="" value="默认有的值">

这是一个自封闭标签。

密码框

<input type="password" name="">

type=”text” 文本框
type=”password” 密码框

单选按钮

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

radio是”收音机“的意思，input的type值，如果是radio就是单选按钮

单选按钮，天生不能互斥。如果想互斥，必须要有相同的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）

下拉列表

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" value="确认">

submit 是提交。这个按钮不需要写value自动就有提交文字
这个按钮点击，表单真的能提交，这个表单会被提交到form标签的action属性中的那个页面中去。

重置按钮

<input type="reset" name="">

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>

HTML杂项

字符实体

hr 水平线
br 换行