html标签学习笔记

最新推荐文章于 2021-05-07 19:49:23 发布

博客写好-开发CV

最新推荐文章于 2021-05-07 19:49:23 发布

阅读量194

点赞数

分类专栏： Html

本文链接：https://blog.csdn.net/weixin_44915419/article/details/105461727

版权

Html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

以下有些笔记参考b站pink老师和小马哥_老师的视频

使用VsCode编辑，应该下载的插件
1.chinese language pack for vscode中文包
2.open in browser 编辑器中右键在浏览器中打开html文件
3.Auto Rename Tag自动重命名标签名
在这里插入图片描述

1.<!D OCTYPE html>文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页
2.lang语言种类
用来定义当前文档显示语言

en定义语言为英语
zh-CN定义语言为中文
简单来说定义en为英文网站，定义为zh-CN就是中文网页

总预览思维导图
在这里插入图片描述

1.网页的分析div划分https://www.bilibili.com/video/BV1e7411j7Nx?p=33
2.from表单(表单的目的是为了收集用户信息)

表单域是一个包含表单元素的区域
在html标签中，标签用于定义表单域，以实现用户信息的收集和传递
会把它范围内的表单元素信息提交给服务器
在这里插入图片描述
表单控件input的type属性说明

input的其他属性说明

下拉框select

文本框textarea

<h1 align="center">注册信息</h1>
    <hr/>
    <form>
        <table align="center">
            <tr><!--姓名-->
                <td>姓名：</td>
                <td><input type="txet" name="username" placeholder="请输入姓名" /></td>
            </tr>
            <tr><!--邮箱-->
                <td>邮箱：</td>
                <td><input type="txet" name="email" value="@qq.com"/></td>
            </tr>
            <tr><!--密码-->
                <td>密码：</td>
                <td><input type="password" name="pass_word" maxlength="10" placeholder="请输入密码"/></td>
            </tr>
            <tr><!--确认密码-->
                <td>确认密码</td>
                <td><input type="password" name="pass_confirt" maxlength="10" placeholder="请再次输入密码"/></td>
            </tr>
            <tr><!--上传图片-->
                <td>上传照片</td>
                <td><input type="file" name="photo" placeholder="请上传你的照片" /></td>
            </tr>
            <tr><!--性别-->
                <td>性别：</td>
                <td>
                男<input type="radio" name="sex" value="man">
                女<input type="radio" name="sex" value="woman">
                保密<input type="radio" name="sex" value="unknow">
                </td>
            </tr>
            <tr><!--爱好-->
                <td>爱好：</td>
                <td>
                    打篮球<input type="checkbox" name="basketball" value="basketball">
                    游泳<input type="checkbox" name="swim" value="swim">
                    唱歌<input type="checkbox" name="sing" value="sing">
                </td>
            </tr>
            <tr>
                <td>城市：</td>
                <td>
                    <select>
                        <option>北京</option>
                        <option>上海</option>
                        <option>广东</option>
                        <option>山东</option>
                        <option>福建</option>
                        <option>广西</option>
                        <option>湖南</option>
                        <option>浙江</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>简介</td>
                <td>
                    <textarea name="jj" rows="6" cols="50" placeholder="请输入你的简介"></textarea>
                </td>
            </tr>
            <tr><!--提交-->
                <td><input type="button" name="button" size="10" value="来按我"></td>
                <td><input type="submit" name="submit" size="10" value="提交"></td>
                <td><input type="reset" name="reset"></td>
            </tr>
        </table>
    </form>

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>表单案例</title>
    </head>
    <body>
        <h4>青春不常在，抓紧谈恋爱</h4>
        <form>
            <table>
                <tr>
                    <td>性别</td>
                    <td>
                        <input type="radio" name="sex" id="sex_nan"><label for="sex_nan">男</label>
                        <input type="radio" name="sex" id="sex_nv"><label for="sex_nv">女</label>
                    </td>
                </tr>
                <tr>
                    <td>生日</td>
                    <td></td>
                </tr>
                <tr>
                    <td>所在地区</td>
                    <td>
                        <select name="address">
                            <option>北京</option>
                            <option>上海</option>
                            <option selected="selected">广州</option>
                            <option>深圳</option>
                            <option>成都</option>
                            <option>厦门</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>婚姻状况</td>
                    <td>
                        <input type="radio" name="ismarried" id="notMarry"><label for="notMarry">未婚</label>
                        <input type="radio" name="ismarried" id="married"><label for="married">已婚</label>
                        <input type="radio" name="ismarried" id="deverse"><label for="deverse">离婚</label>
                    </td>
                </tr>
                <tr>
                    <td>学历</td>
                    <td>
                        <input type="text" name="xueli">
                    </td>
                </tr>
                <tr>
                    <td>喜欢的类型</td>
                    <td>
                        <input type="checkbox" name="like" id="like1"><label for="like1">妩媚的</label>
                        <input type="checkbox" name="like" id="like2"><label for="like2">可爱的</label>
                        <input type="checkbox" name="like" id="like3"><label for="like3">小鲜肉</label>
                        <input type="checkbox" name="like" id="like4"><label for="like4">老练的</label>
                    </td>
                </tr>
                <tr>
                    <td>自我介绍</td>
                    <td>
                        <textarea name="introduce" cols="30" rows="10" placeholder="请输入10~50字内容"></textarea>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="submit" value="免费注册"></td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="checkbox" name="agree" checked="checkbox">
                        <label>我同意注册条款和会员协议</label>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <a href="#">我是会员，立即登录</a>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <dl>
                            <dt>我承诺</dt>
                            <dd>
                                <ul>
                                    <li>年满18岁、单身</li>
                                    <li>抱着严肃的态度</li>
                                    <li>真诚寻找另一半</li>
                                </ul>
                            </dd>
                        </dl>
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

展示效果
在这里插入图片描述
3.table表格一般应用订单或者股票数据
(表格不是用来布局的，而是用来展示数据的)

table标签的属性值
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <style>
        table {
            width: 500px;
            text-align: center;
        }

        table tr th {
            text-align: center;
        }
    </style>
</head>

<body>
    <table border=1; align="center">
        <caption>课程表</caption>
        <thead>
            <tr>
                <th height="50px">星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="2">数学</td>
                <td>数学</td>
                <td rowspan="2">英语</td>
                <td>语文</td>
            </tr>
            <tr>
                <td>语文</td>
                <td>数学</td>

                <td>英语</td>
                <td>数学</td>
            </tr>
            <tr>
                <td colspan="5">课间休息</td>
            </tr>
            <tr>
                <td>英语</td>
                <td>数学</td>
                <td>数学</td>
                <td>英语</td>
                <td>语文</td>
            </tr>
            <tr>
                <td>数学</td>
                <td>英语</td>
                <td>语文</td>
                <td>语文</td>
                <td>英语</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

展示的结果为
在这里插入图片描述
4.列表(表格用来显示数据的，列表是用来布局的)

无序列表
有序列表
定义列表(没有前缀)

定义列表内容对标题进行细化补充

ul ol dl dt dd 都是block元素
li是list-item元素

dt dd是同级关系，里面可以放置所有元素
li标签是一个容器，可以存放任何元素

查阅文档MDN

博客写好-开发CV

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html标签学习笔记

1.网页的分析div划分https://www.bilibili.com/video/BV1e7411j7Nx?p=332.from表单<h1 align="center">注册信息</h1> <hr/> <form> <table align="center"> <t...
复制链接

扫一扫

专栏目录