HTML学习笔记(二)

HTML学习笔记(二)

列表

无序列表

<ul> 
    <li>列表项1li>
    <li>列表项2li>
    <li>列表项3li>
ul>

有序列表

<ol> 
    <li>列表项1li>
    <li>列表项2li>
    <li>列表项3li>
ol>

定义列表

比如一个网页的最下面，往往会放着很多的功能，这些功能的列表就是用定义列表做的

<dl> 
    <dt>服务中心dt> 
    <dd>申请售后dd> 
    <dd>售后政策dd>
    <dd>维修服务价格dd>

    <dt>项目2dt>
    <dd>项目2的描述dd>

    <dt>项目3dt>
    <dd>项目3的描述dd>
dl>

注意事项：dl里面只能包含dt和dd；dt和dd里面可以包含任何内容

---

表格

标签：table嵌套tr，tr嵌套td/th

• table：表格
• tr：行，需要几行几个tr
• th：表头单元格
• td：内容单元格

<table border="1"> 
    <tr> 
      <th>表头1th> 
      <th>表头2th>
      <th>表头3th>
    tr>
    <tr>
      <td>数据1td> 
      <td>数据2td>
      <td>数据3td>
    tr>
    <tr>
      <td>数据4td>
      <td>数据5td>
      <td>数据6td>
    tr>
    
    <tr>
      <td rowspan="2">数据7td> 
      <td>数据8td>
      <td>数据9td>
    tr> 
    <tr>
      <td>数据10td>
      <td>数据11td>
    tr>
    
    <tr>
      <td>数据12td>
      <td colspan="2">数据13td> 
    tr>
table>

---

表单

标签：form嵌套input/select/textarea/button

input标签

input标签有type属性值，属性值不同功能不同

• text：文本框
• password：密码框
• radio：单选框
• checkbox：复选框
• file：文件上传

文本框：<input type="text" placeholder="请输入用户名" name="username"> 
<br>
密码框：<input type="password" name="password">
<br>



单选框：<input type="radio" name="gender" checked>男
<input type="radio" name="gender">女
<br>

兴趣爱好：<input type="checkbox" name="a" checked>看球赛
<input type="checkbox" name="a" checked>踢球
<input type="checkbox" name="a">听音乐
<br>

上传文件：<input type="file" multiple>

<br>

下拉菜单

select嵌套option，select是下拉菜单整体，option是下拉菜单的每一项。name和id还有value发送数据的时候会用

<select name="" id="">
      <option value="">北京option>
      <option value="" selected>上海option>
      <option value="">广州option>
      <option value="">深圳option>
    select>

添加selected默认选中

文本域

多上输入文本的表单控件

<textarea name="" id="">默认提示文字textarea>
<br>

加到中间的提示文字为初始在文本域里面的文本，输入时需要手动删除
利用placeholder=“默认提示文字” 可以实现灰色的，输入内容就覆盖的提示文字

label标签

用label标签绑定文字和表单控件的关系，增大表单控件的点击范围。
写法一：label只包裹内容，不包裹表单控件，设置label标签的for属性值和表单控件的id属性值相同

单选框：<input type="radio" name="gender" id="man" checked> <label for="man">男label>

写法二：使用label标签包裹文字和表单控件，不需要属性。一定不能包含for属性

<label><input type="radio" name="gender">女label>

label标签还可以用于增加文本框、密码框、上传文件、多选框、下拉菜单等等的点击范围

按钮

<button type="">按钮button>

type属性值:

• submit：提交按钮，点击后可以将数据提交到后台
• reset：重置按钮，点击后将表单控件恢复默认值
• button：普通按钮，默认没有功能，配合js使用
• 如果省略type属性，功能是提交

button如果要重置，必须和上面的内容放到同一个表单(form包裹)中

---

无语义的布局标签

作用：布局网页，划分我网页区域，摆放内容。
div：独占一行，也叫大盒子

<div>div标签，独占一行div>
<div>div标签，独占一行div>

span：换行展示，也叫小盒子

<span>span标签，不换行span>
<span>span标签，不换行span>

---

字符实体

在网页中显示预留字符。

空格          空格
<br>

空格          空格
<br>
小于号：<
<br>
大于号：>
<br>

在代码中敲键盘的空格，网页只识别一个