零基础学习HTML&CSS -02

列表标签

1.无序列表

ul li配合使用  没有顺序之分

<ul>
        <li>鸡块面</li>
        <li>牛肉面</li>
        <li>刀削面</li>
    </ul>

ul的标志项可以修改  type的默认值为disc（小黑点） 还有circle（同心圆）  square（小方块）

2.有序列表

ol li配合使用  有顺序之分

<ol>
        <li>apple</li>
        <li>banana</li>
        <li>orange</li>
    </ol>

ol的标志项同样可以修改 type默认值为1 还有A（大写字母）a（小写字母）I（大写罗马数字）i（小写罗马数字）

3.自定义标签

dl dt dd配合使用（ definition list definition title definition description ）

<dl>
        <!-- 定义列表标题标签 -->
        <dt>香港</dt>
        <!-- 定义列表对标题标签的描述 -->
        <dd>是中国的</dd>
        <dt>台湾</dt>
        <dd>也是中国的</dd>
    </dl>

表格标签

表格属性

•  border 代表表格边框厚度
•   align    table, tr, td水平方向对齐方式 默认值left    center right
•   cellspacing单元格到单元格的距离
•   cellpadding单元格文字到单元格距离
•   bgcolor 表格背景颜色 table tr td都可以使用
•   background   可以给表格设置背景图片

 一个tr代表一行 一个td代表一列   th为标题标签 th自带加粗效果

    tr 属性
        bgcolor 
        align： left center right 水平对齐
        valign： top middle bottom 垂直对齐
    td th属性
        align 
        valign

细线表格

 <table bhcolor="black"  cellspacing="1">
        <tr bgcolor="white">
            <td>序号</td>
            <td>姓名</td>
        </tr>
    </table>

另一种形式的表格

<table>
        <!-- 表格标题标签 -->
        <caption>个人信息表</caption>
        <!-- 表头 -->
        <thead>
            <tr>
                <td>序号</td>
                <td>名称</td>
                <td>操作</td>
            </tr>
        </thead>
        <!-- 表体 -->
        <!-- 不写tbody浏览器自动补全 -->
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </tbody>
        <!-- 表脚 -->
        <tfoot>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </tfoot>
    </table>

单元格合并

跨行合并 rowspan='number' 跨列合并colspan='number'

表单标签

所有表单元素都要写在form表单中 action enctype method 

input输入框

input type  name='提交给表单属性名' value='提交给表单得属性值'

text 明文输入框 

password 暗文输入框 

radio 单选按钮 将所有单选按钮设置同一个name 

checkbox 复选按钮 

button 普通按钮 

image 图片按钮

reset 重置按钮    清空用户在表单输入的内容  默认选项不会被清空

submit 提交按钮

hidden 隐藏域    悄悄提交一些数据到服务器

file 上传文件

textarea 多行文本框 

fieldset 表单元素

legend 表单标题 

<form>
        <fieldset>
            <legend>请登录</legend>
            用户名：<input type="text" name="" id=""><br>
            密码：<input type="password" name="" id="">
        </fieldset>
</form>

想要点击文字让表单元素聚焦

1.label标签直接包裹表单元素

2.label for 属性 和 input id属性要一致 文字放在label中

h5新增表单元素

h5新增的表单属性

    min 最小值

    max最大值

    step 步幅

    pattern 正则匹配

    autofocus自动聚焦

    required必填项

    placeholder提示内容

    formaction 表单提交服务器的地址

    formenctype提交表单数据格式

    formmethod提交表单的方式 get post

    formnovalidate 不校验表单 提交按钮

h5新增表单元素

    progress 进度条 value max
    input type    
         range 滑块 max min value step 
         email 邮箱 提交时候会对邮箱验证 11@11 
         tel  电话 使用pattern 做正则校验
         url  url做校验 https://11
         color 取色器 
         date 日期选择器 
         datatime-local 时间日期选择器 
         number 数字表单元素 只允许输入一组数字
    想要给输入框绑定待选项 
        input list = '' 与datalist id属性一致
        datalist 
            option