HTML - HTML其它标签

列表元素

有序列表

ol (ordered list) --- 有序列表，直接子元素只能是li

li (list item) --- 列表中的每一项

无序列表

ul (unordered list) --- 无序列表，直接子元素只能是li

li (list item) --- 列表中的每一项

自定义列表

dl (definition list) --- 定义列表，直接子元素只能是dt、dd

dt (definition term) --- term是项的意思, 列表中每一项的项目名

dd (definition description)

--- 列表中每一项的具体描述，是对 dt 的描述、解释、补充

--- 一个dt后面一般紧跟着1个或者多个dd

清除列表样式

/* 
	对于自定义列表，需要清除的样式是margin和padding
	对于有序列表和无序列表，需要清除的样式除了margin和padding, 还有前面默认的小图标
*/
ul, li {
  margin: 0;
  padding: 0;
  /* list-style是 list-style-type | list-style-postition | list-style-image的简写 */
  /* 不过因为我们一般只会清除默认的小点，所以直接使用list-style: none即可 */
  /* list-style: none; 的本质是list-style-type: none; */
 	/* list-style和list-style-* 都是可继承属性 */
  list-style: none;
}

表格元素

表格元素table是一个块级元素

table元素中只有行和单元格的概念，并没有列的概念，所以在HTML中的表格可以不是方方正正的

元素	说明
table	表格元素
tr (table row)	表格中的行
td (table data)	行中的单元格
th	表格的表头单元格
thead	表格的表头
tbody	表格的主体
tfoot	表格的页脚 --- 不常用
caption	表格的标题 --- 不常用

单元格合并

在某些特殊的情况下, 每个单元格占据的大小可能并不是固定的

一个单元格可能会跨多行或者多列来使用

这个时候我们就要使用单元格合并来完成

分类	属性	描述
跨列合并	使用`colspan`	在最左边的单元格写上colspan属性, 并且省略掉合并的td
跨行合并	使用`rowspan`	在最上面的单元格协商rowspan属性, 并且省略掉后面tr中的td

表单元素

HTML表单元素是和用户交互的重要方式之一，我们可以通过表单来收集用户输入的相关信息

元素	说明
form	表单, 一般情况下，其他表单相关元素都是它的后代元素
input	单行文本输入框、单选框、复选框、按钮等元素
textarea	多行文本框
select，option	下拉选择框
button	按钮
label	表单元素的标题

input

表单元素使用最多的是input元素

input元素是行内替换元素

属性值	说明
type	用以决定input的类型，默认值为text input的type属性有很多的可选值，具体可以查看MDN文档
readonly	只读，可以选中，但是无法输入
disabled	禁用
placeholder	默认的提示文本
checked	默认被选中只有当type为radio或checkbox时可用
autofocus	当页面加载时，自动聚焦，存在多个autofocus的时候，只会有第一个起作用
name	字段名称在提交数据给服务器时，可用于区分数据类型
value	值

布尔属性

在HTML中存在一些布尔属性，例如常见的布尔属性有disabled、checked、 readonly、multiple、autofocus、selected等

布尔属性可以没有属性值，写上属性名就代表使用这个属性

不设置，就意味着，值为false，不使用
如果有值，可以是任意值(值甚至可以是false，一般设置的值就是属性名本身)，那么就表示其值为true，也就是使用该值

  <input type="text" readonly>
  <input type="text" readonly="readonly">

表单按钮

普通按钮

<!--
	对于重置按钮，默认情况下，只能重置位于同一个表单的其它表单元素
-->
<input type="reset" value="重置按钮">
<!-- 等价于 -->
<button type="reset" >重置按钮</button>

提交按钮

<!--
	对于提交按钮，会收集同一个表单中的表单元素提交到对应的地址，并对表单元素进行重置操作
	这个对应的地址指代的是form的action属性的值
-->
<input type="submit" value="提交">
<!--
	等价于
	在表单中, button元素的type的默认值为submit
	所以在下边代码中 type属性可以省略
-->
<button type="submit" >提交</button>

重置按钮

<input type="button" value="普通按钮">

!-- 等价于 -->
<button type="button" >普通按钮</button>
<!-- button的type属性的默认值为button -->

<!-- 所以上述按钮等价于 -->
<button>普通按钮</button>

label

label元素一般跟表单元素一起结合使用，用于在表单元素的标题被点击的时候，自动聚焦对应的表单元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <div>
  <br class="Apple-interchange-newline"><div></div>

    <label for="username">
      用户: 
      <input id="username" type="text">
    </label>
    
  </div>
  <div>
    <label for="password">
      密码: 
      <input id="password" type="password">
    </label>
  </div>
        <!--
        只要表单元素的title包含在label元素内即可
        对应的表单元素是可以不被包含在label元素内的
        -->
    <label for="age"> 年龄: </label>
    <input id="age" type="number">
</body>
</html>

radio

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <!-- url: http://www.baidu.com/s?age=18&height=1.88&sex=male -->
  
  <!-- 
      在类型为radio的input中, 
      如果name一样, 
      那么两个radio就会互斥
      也就是说只有name值相同的radio才具备单选功能
      name属性的值 --- 传递给服务器的key -- 字段名
      value属性的值 --- 传递给服务器的value --- 对应字段的值
  -->
  <form action="/abc">
    <label for="male">
      <input id="male" type="radio" name="sex" value="male">男
    </label>
    <label for="female">
      <input id="female" type="radio" name="sex" value="female">女
    </label>

    <button type="submit">提交按钮</button>
  </form>

</body>
</html>

checkbox

<!-- 和radio一样，我们可以使用name将checkbox进行分组 -->
<!-- 可以通过checked属性 来设置单选按钮或多选按钮是否默认选中 -->
  <form action="/cba">
    <div>
      您的爱好:
      <label for="basketball">
        <input id="basketball" type="checkbox" name="hobby" checked value="basketball">篮球
      </label>
      <label for="football">
        <input id="football" type="checkbox" name="hobby" value="football">足球
      </label>
    </div>
    
    <input type="submit">
  </form>

textarea

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    textarea {
       /*
        resize 用于设置textarea能否被拖拽改变尺寸

        禁止缩放: resize: none
        水平缩放: resize: horizontal
        垂直缩放: resize: vertical
        水平垂直缩放: resize: both --- 默认值
      */
      resize: vertical;
    }
  </style>
</head>
<body>
  
  <form action="">
    <label for="info">
      个人描述:
        <!--
            cols --- 一行可以输入多少个字符
            rows --- 可以输入多少列
        -->
      <textarea name="info" id="info" cols="10" rows="6"></textarea>
    </label>
  </form>

</body>
</html>

select

select元素用于表示下拉列表，option是select的子元素，一个option代表一个选项

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <select name="fruits" id="" multiple size="2">
        <!--
                selected表示当前下拉列表可以多选
                如果一个下拉列表是多选的，那么默认情况下所有的值都会被显示出来
                用户可以结合shift键来进行多选
                size属性可以用来设置 展示的option的个数
        -->
    <option value="apple" selected>苹果</option>
    <option value="banana">香蕉</option>
    <option value="orange">橘子</option>
  </select>

</body>
</html>

form

form通常作为表单元素的父元素:

form可以将整个表单作为一个整体来进行操作 (例如重置操作和提交操作)

属性	说明
action	用于提交表单数据的请求URL
method	请求方法(只支持get和post请求方式)，默认是get
target	使用什么方式打开URL `规则和a元素的target属性一致`

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <form action="http://hongyuancoder.com/abc" method="post" target="_blank">
    <div>
      <label for="username">
        用户: <input id="username" type="text" name="username">
      </label>
    </div>
    <div>
      <label for="password">
        密码: <input id="password" type="password" name="password">
      </label>
    </div>

    <!-- 性别 -->
    <div>
      性别: 
      <label for="male">
        <input id="male" type="radio" name="sex" value="male">男
      </label>
      <label for="female">
        <input id="female" type="radio" name="sex" value="female">女
      </label>
    </div>

    <!-- 爱好 -->
    <div>
      爱好:
      <label for="basketball">
        <input id="basketball" type="checkbox" name="hobby" checked value="basketball">篮球
      </label>
      <label for="football">
        <input id="football" type="checkbox" name="hobby" value="football">足球
      </label>
    </div>

    <!-- 提交按钮 -->
    <button type="reset">重置内容</button>
    <button type="submit">提交内容</button>
  </form>

</body>
</html>

08_HTML高级元素