关于HTML的一些基本知识(2)

day02

列表系列

  • 无序列表

    [外链图片转存失败(img-DGsLnIHg-1565270467261)(E:\老师整理\day02\笔记\media\wxlb.png)]

    [外链图片转存失败(img-JS4qrDJe-1565270467262)(E:\老师整理\day02\笔记\media\ul.png)]

    <!-- 无序列表  复合 有盒子 ul(unorder list)  列表项 li list-->
        <!-- <ul>
            <li>第一条数据</li>
            ul>li*n    div>div*n    一口气写下所有的数据
            按着鼠标滚轮选中可以同时写数据
        </ul> 
        属性:   type=“”  指的是前面标识的属性
                type=“desc” 实心圆  /  “circle” 空心圆   /square  正方形
                默认是实心圆-->
        <ul type="circle">
            <li>第一条数据/li>
            <li>第二条数据/li>
            <li>第三条数据/li>
        </ul>
    
  • 有序列表

    [外链图片转存失败(img-gK1ggPtf-1565270467263)(E:\老师整理\day02\笔记\media\yxlb.jpg)]

    <!-- 有序列表  ol(order list) > li
        type=“a/A/I(罗马数字)/1”
        start  控制标识初始的序号  只用写数字即可-->
        <ol type="I" start="6">
            <li>第n条数据</li>
            <li>第n条数据</li>
            <li>第n条数据</li>
        </ol>
    
  • 自定义列表

    [外链图片转存失败(img-DFymv6rM-1565270467263)(E:\老师整理\day02\笔记\media\zdylb.png)]

    <!-- 自定义列表  dl(最外面的大盒子 define list) 
            > dt(标题  define title)+dd( 数据 define data)-->
            <dl>
                <dt>菜单</dt>
                <dd>西红柿炒鸡蛋</dd>
                <dd>土豆丝</dd>
                <dd></dd>
          </dl>
    

超链接标签

<a> 文字 / 图片 /大盒子 </a>   anchor  锚点
链接使用

href: 链接地址

target: 控制链接的打开方式

  • _self 默认打开方式 在本页打开
  • _blank 在新建页面打开
<base target="_blank">  一次性设置超链接打开方式
必须放在head头部
锚点

[外链图片转存失败(img-nCl4SlWh-1565270467264)(E:\老师整理\day02\笔记\media\锚点功能.png)]

点击锚点链接,跳转相同界面的不同部分

  • 抛锚 船靠岸了 就是在目标跳转点的元素身上写一个属性 id=“id名” id名不要以数字开头
  • 拽锚绳子 本界面的,可以省略前面的界面地址

表格

[外链图片转存失败(img-C6SuNtrh-1565270467264)(E:\老师整理\day02\笔记\media\表格.jpg)]

table

thead 整个头部

th table head 头部里面的块

tbody 身体

tr table row 行

td table data 列

 <table>
        <!-- 表格头部   thead -->
        <thead>
            <!-- 字段  tr行 > th 字段 -->
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
        <!-- 表格身体部分  tbody -->
        <tbody>
            <!-- tr >td 列 单元格 -->
            <tr>
                <td>李峥</td>
                <td>20</td>
                <td></td>
            </tr>
            <tr>
                <td>石丛林</td>
                <td>18</td>
                <td></td>
            </tr>
            <tr>
                <td>任思锦</td>
                <td>18</td>
                <td></td>
            </tr>
            <tr>
                <td>王甜甜</td>
                <td>16</td>
                <td></td>
            </tr>
        </tbody>
    </table>

默认属性:

  • border:边框 border=“1” 边宽
  • cellpadding: 10px; 调整单元的内容与边框的距离
  • cellspacing:10px; 单元格与单元格之间的距离
  • 一般设cellpadding=“0px”,cellspacing=“0px” 双线合并成单线—>粗的 因为是两条线合并 想要变成细线边框,用CSS里面的一个属性
  • 宽度属性 width 等宽,表格里面一列里面有一个宽了,一列的其余几个也会变
  • 高度属性 height 等高,表格里一行里只要有以一个变了,其余也会改变
  • 文字所在位置, 引入CSS属性
  • bgcolor:背景色
  • align:水平对齐方式
  • background:图片背景 background=“地址”

CSS语言 CSS属性

CSS细线边框属性:border-collapse:collapse 合并 折叠
CSS文本对齐属性:text-align:center(居中)/left(左对齐)/right(右对齐)

合并单元格

[外链图片转存失败(img-Koq85hC4-1565270467265)(E:\老师整理\day02\笔记\media\表格课堂练习02.jpg)]

  • 跨行合并 从上往下合并 rowspan=“合并的行数” 写到最初始的行上 然后删除被合并的哪几行
  • 跨列合并 从左往右合并 column 列 colspan=“合并的列数” 写到最初的列上 然后删除被合并的那几列
  • 不同标签不能合并,只有相同标签词可以合并
caption 表中标题

表单

[外链图片转存失败(img-gikB9CqI-1565270467265)(E:\老师整理\day02\笔记\media\biaodan.jpg)]

[外链图片转存失败(img-SnFDq9FF-1565270467266)(E:\老师整理\day02\笔记\media\input.png)]

功能:用于收集用户数据

form 表单

表单控件 input

<body>
    <!-- 大盒子   表单 -->
    <form>
        <caption>
            <b>
                招亲!!!
            </b>
        </caption>
        <br>
        <!-- 表单控件 input type=“类型”
        type:
            text  文本框 
            password  密码框  文字隐藏
            radio  单选框
            checkbox  多选框
            file 文件上传域
            文本域 <textarea></textarea>
            普通按钮 button  不能提交
            提交按钮 submit  功能就是作为表单提交的按钮  form里面必须包含一个提交按钮
            重置按钮 reset 
            图片按钮 image

            name 属性名 属性作用  指明当前用户输入的是什么数据
            value  属性值 提交给后台的属性值
         -->
        姓名:<input type="text" name="username"><br>
        密码:<input type="password" name="userpassword"><br>
        <!-- 要想实现选择框成为一道单选题,必须保证这几个表单元素身上的name属性值相同 -->
        性别:男:<input type="radio" name="sex" value="0">
             女:<input type="radio" name="sex" value="1">
            保密:<input type="radio" name="sex" value="2">
            <br>
        爱好:
        游泳 <input type="checkbox" name="hobby" value="0">
        唱歌 <input type="checkbox" name="hobby" value="1">
        运动 <input type="checkbox" name="hobby" value="2">
        打游戏 <input type="checkbox" name="hobby" value="3">
        <br>
        <!-- 下拉列表  select > option 选项-->
        工作地:
        <select name="city" id="">
            <option value="0">北京</option>
            <option value="1">河北</option>
            <option value="2">天津</option>
            <option value="3">山西</option>
        </select><br>
        上传自拍(不要美颜):
        <input type="file" name="photo"><br>
        评价你自己:
        <textarea name="desc" id="" style="widows: 30px;height: 30px"></textarea>
        <br>
        <!-- <input type="button" value="普通按钮"> -->
        <input type="submit">
        <input type="reset">
        <br>
        <!-- 图片按钮是为了弥补默认提交按钮样式上的缺陷 CSS是不是万能的 -->
        <input type="image" src="./image/long.jpg">
    </form>
</body>

鼠标放进去叫聚焦过程

鼠标拿开叫离交过程

表单的提交

作业代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>世纪佳缘</title>
</head>

<body style="background-color:bisque; background: url(./image/婚庆.jpg) no-repeat; background-size: 100%" >
    <table style="background-color:rgba(228, 228, 228, 0.8); margin-top: 100px" align="center" 
    width="25%" height="40%"> 
    <!-- no-repeat   不允许拉伸 -->
    <!-- rgba(red,green,blue,透明度) -->
        <tr style="height: 40px">
            <td colspan="2" style="text-align: center; font-size: 23px; color:slategrey">
                    1分钟注册,享一辈子幸福!
                    <hr color="grey" width="98%">
            </td>
        </tr>
        <tr style="height: 40px">
            <td style="text-align: right; width: 80px">性别</td>
            <td align="left">
                &nbsp;&nbsp;
                <input type="radio" name="sex" value="1" checked>
                <img src="./image/nan.PNG" style="width: 18px;height: 18px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="radio" name="sex" value="0">
                <img src="./image/nv.PNG"  style="widows: 18px;height: 18px"></td>
        </tr>
        <tr style="height: 40px">
            <td style="text-align: right">生日</td>
            <td align="left">
                    &nbsp;&nbsp;
                <select name="year" id="" style="width: 73px">
                    <option value="a" selected>请选择</option>
                    <option value="0">1997</option>
                    <option value="1" >1998</option>
                    <option value="2">1990</option>
                    <option value="3">1996</option>
                </select>
                <select name="month" id="" style="width: 73px">
                    <option value="a" selected>请选择</option>
                    <option value="0">1</option>
                    <option value="1">2</option>
                    <option value="2">3</option>
                    <option value="3">4</option>
                    <option value="3">5</option>
                    <option value="3">6</option>
                    <option value="3">7</option>
                    <option value="3">8</option>
                    <option value="3">9</option>
                    <option value="3">10</option>
                    <option value="3">11</option>
                    <option value="3">12</option>
                </select>
                <select name="day" id="" style="width: 73px">
                    <option value="a" selected>请选择</option>
                    <option value="0">1</option>
                    <option value="1">10</option>
                    <option value="2">20</option>
                    <option value="3">30</option>
                </select>
            </td>
        </tr>
        <tr style="height: 40px">
            <td style="text-align: right">所在地区</td>
            <td align="left">
                    &nbsp;&nbsp;
                <select name="place" id="" style="width: 230px">
                    <option value="0" selected>河北</option>
                    <option value="1">北京</option>
                    <option value="2">天津</option>
                    <option value="3">广州</option>
                    <option value="4">山西</option>
                    <option value="5">山东</option>
                </select>
            </td>
        </tr>
        <tr style="height: 40px">
            <td style="text-align: right">婚姻状况</td>
            <td align="left">
                &nbsp;&nbsp;
                <input type="radio" name="hunyin" value="0" checked>未婚&nbsp;&nbsp;
                <input type="radio" name="hunyin" value="1">离婚&nbsp;&nbsp;
                <input type="radio" name="hunyin" value="2">丧偶
            </td>
        </tr>
        <tr style="height: 40px">
            <td></td>
            <td style="text-align: left">
                <a href="https://baike.baidu.com/item/朱一龙" target="_blank">
                        <input type="image" src="./image/提交按钮.png">
                </a>
            </td>
        </tr>
        <tr>
            <td></td>
            <td style="text-align: center">
                <a href="http://baidu.com" target="_blank" style="color:gray">
                    我是会员,立即登录
                </a>
            </td>
        </tr>
    </table>
</body>

</html>

代码截图

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值