HTML学习Day2

1. 列表

(1)无序列表

ul:Unordered List        li:List Item

<ul>
     <li>列表一</li>
     <li>列表一</li>
 </ul>

特点:列表之间没有顺序 在实际工作中用的较多

(2)有序列表

ol:Ordered List

<ol>
     <li>列表一</li>
     <li>列表一</li>
 </ol>

 特点:列表之间有顺序 在实际工作中用的较少

(3)自定义列表

dl:Definition List     dt:Definition Term      dd:Definition Description

<dl>
     <dt>列表标题</dt>
     <dd>列表标题的解释说明</dd>
     <dd>列表标题的解释说明</dd>
 </dl>

 特点:可以针对一个列表标题充分解释 特定情况下使用

1. <ul></ul>或者<ol></ol>中只能嵌套<li></li>,直接在<ul></ul><ol></ol>标签中输入其他标签或者文字的做法是不被允许的。

2. <li>与</li>之间相当于一个容器,可以容纳所有元素。

3. <dl></dl>中只能嵌套<dt></dt>和<dd></dd>,直接在<dl></dl>标签中输入其他标签或者文字的做法是不被允许的。

4. <dd></dd>之间相当于一个容器,可以容纳所有元素。<dt></dt>一样

2. 注释

<!-- 在此处写注释 -->

浏览器不解析的标签 作用是用来提示开发人员或者便于开发人员理解和阅读

sublime快捷生成注释的方式:选中需要注释的文本 ctrl+/ 注释。

3. 特殊字符

特殊字符

描述

字符的代码

 

空格符

&nbsp;

<

小于号

&lt;

>

大于号

&gt;

&

和号

&amp;

人民币

&yen;

©

版权

&copy;

®

注册商标

&reg;

°

摄氏度

&deg;

±

正负号

&plusmn;

X

乘号

&times;

÷

除号

&divide;

²

平方

&sup2;

³

立方

&sup3;

4. 表格

基本格式

  <table>
    <caption></caption>
    <thead>
      <tr>
        <th></th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>

属性

描述

border

给表格加上了边框

width

给表格设置宽

height

给表格设置高

cellspacing

单元格与单元格之间的距离

cellpadding

单元格边框与其内容之间的距离(内边距)

<th></th>

表头标签,其中的文字加粗,居中。不是必须的,语义比td更好

<caption></caption>

定义表格的标题

<thead></thead>

表格的头部区域

<tbody></tbody>

表格的内容区域

<tfoot>

定义表格的页脚

合并单元格

跨行合并 rowspan 上下合并 将rowspan写在上面的单元格上, <td rowspan="2"></td>,属性值合并几个写几个,合并的单元格删除

跨列合并 colspan 左右合并 将colspan写在左边的单元格上

5.表单

标签

描述

<input>

根据不同的 type 属性值,输入字段可以是单行文本字段(text)、复选框(checkbox)、密码框(password)、隐藏域(hidden)、单选按钮(radio)、按钮(button)、文件(file)、重置(reset)、提交(submit)等等。

<textarea>

多行文本输入框

<select>

下拉列表,其中的选项用option

属性

描述

value

表单内部包含的值,radio CheckBox都需要添加上默认的value值

checked

默认选中项,应用于radio和CheckBox中,当一个属性名和属性值相等时,只写一个即可

selected

默认选中项,应用于select下拉列表中

name

表单的名称,一般用于配合表单提交使用

action 提交的后台地址
method 表单提交的方法

表单域:将其内部的表单的值都收集起来发送给后台

label标签把文字绑定到表单控件上:性别 : <input id="man" type="radio"> <label for="man">男</label>

猜你喜欢

转载自blog.csdn.net/qq_39176732/article/details/81151380