前端学习-2day

最新推荐文章于 2024-06-15 21:20:00 发布

weixin_51339105

最新推荐文章于 2024-06-15 21:20:00 发布

阅读量30

点赞数

分类专栏：前端学习文章标签： html css javascript

本文链接：https://blog.csdn.net/weixin_51339105/article/details/119357346

版权

前端学习专栏收录该内容

27 篇文章 0 订阅

订阅专栏

1.小说排行榜案例

<body>
    <table align="center" border="1" cellspacing="0" width="500">
        <tr>
            <th>排名</th>
             <th>关键词</th> 
             <th>趋势</th> 
             <th>今日搜索</th> 
             <th>最近七日</th> 
             <th>相关链接</th>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="down.jpg"></td>
            <td>456</td>
            <td>123</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>盗墓笔记</td>
            <td><img src="up.jpg"></td>
            <td>124</td>
            <td>675342</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>

    </table>
</body>
</html>

在这里插入图片描述

2.表格标签
thead标签指表格的头部区域；tbody标签指表格的主体区域;

3.合并单元格
跨行合并：rowspan=“合并单元格的个数”，最上侧单元格为目标单元格，写合并代码；
跨列合并：colspan=“合并单元格的个数”，最左侧单元格为目标单元格，写合并代码；

<body>
    <table width="500" height="249" border="1" cellspacing="0" >
        <tr>
            <td></td>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述

3.列表标签
表格是用来显示数据的，列表是用来布局的
列表分为三大类：无序列表、有序列表、自定义列表

-无序列表

无序列表各个列表项之间没有顺序级别之分，是并列的；
ul标签中只能嵌套li标签；
li标签相当于一个容器，可以容纳所有元素；
无序列表会有带有自己的样式属性，实际应用中用CSS。

<body>
    <h4>您喜欢的食物？</h4>
    <ul>
        <li>榴莲</li>
        <li>苹果</li>
        <li>香蕉</li>
    </ul>
</body>
</html>

有序列表
ol标签与li标签；
自定义列表
常用于对术语或名词进行解释和描述；
dl标签用于定义描述列表，与dt标签(定义项目名字)和dd标签(描述每一个项目名字）一起使用；
dl标签里面只能包含dt标签和dd标签。

 <body>
    <dl>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>官方微信</dd>
        <dd>联系我们</dd>
    </dl>
</body>
</html>

在这里插入图片描述

4.表单标签
表单是为了收集用户信息；
一个完整的表单由三部分组成：表单域、表单控件（表单元素）、提示信息；

表单域：包含表单元素的区域
form标签用于定义表单域，实现用户信息的收集和传递；
form会把它范围内的表单元素信息提交给服务器；
表单元素：允许用户在表单中输入或选择的内容控件
input输入表单元素；select下拉表单元素；textarea文本域元素（input标签为单标签）；

name和value是每个表单元素都有的属性值，主要给后台人员使用；
name表单元素的名字，要求单选按钮和复选框要有相同的name值
checked属性主要针对单选按钮和复选框，主要作用是一打开页面，就可以默认选中某个表单元素

<body>
    <form>
        <!--text 文本框 用户可以在里面输入任何文字-->>
        用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"> <br>
        <!--password 密码框 用户看不见输入的密码-->>
        密码：<input type="password"> <br>
        <!--radio 单选按钮 可以实现多选一-->>
        <!--name是表单元素名字，这里性别单元按钮必须有相同的名字name，才可以实现单选一-->>
        <!--单选按钮和复选框可以设置checked属性，当页面打开的时候可以默认选中这个按钮-->>
        性别：男 <input type="radio" name="sex" value="男" checked="checked"> 女 <input type="radio" name="sex" value="女"> <br>
        <!--checkbox 复选框 可以实现多选-->>
        爱好：吃饭 <input type="checkbox" name="hobby"> 听歌 <input type="checkbox" name="hobby"> 睡觉 <input type="checkbox" name="hobby">
    </form>
</body>
</html>

weixin_51339105

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习-2day

1.小说排行榜案例<body> <table align="center" border="1" cellspacing="0" width="500"> <tr> <th>排名</th> <th>关键词</th> <th>趋势</th> <th>今日搜索&l
复制链接

扫一扫