1.head标签

<!DOCTYPE html> <!--文档声明H5 html-->

<html lang="en">

<head>

    <meta charset="UTF-8"> <!--标签属性-->

    <title>30期皇家赌场</title> <!--浏览器标题-->

</head>

<body>

</body>

</html>

2.body中的基本标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <b>加粗</b>

    <i>斜体</i>

    <br>  <!--换行-->

    <u>下划线</u>

    <hr>  <!--长横线-->

    <s>删除</s> <!--中横线删除 -->

    <p>段落&nbsq;标签</p> <!--&nbsq;空格-->

    <h1>标题1</h1>  <!--字体最大，依次往下变小-->

    <h2>标题2</h2>

    <h3>标题3</h3>

    <h4>标题4</h4>

    <h5>标题5</h5>

    <h6>标题6</h6>

</body>

</html>

3.div标签和span标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div>xx0</div> <!--独占一行-->

    <span>xx1</span>  <!--全部都在一起-->

    <span>xx2</span>

    <span>xx3</span>

</body>

</html>

4.img标签和a标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

<!--埋点 两种方式都可以,a标签name属性，其他标签id属性，属性的值是不可重复的-->

<div id="xx">顶部位置</div>

<!-- <a name='xx'>这是顶部</a> -->

<!--相对路径引入-->

<!--title是鼠标放到图片上显示的信息-->

<!--alt是图片加载不出来给出的提示信息-->

<!--width宽度 height高度-->

<img src="0.jpg" alt="这是加载不出来显示的信息" title="蜡笔小新" width="200" height="800">

<br>

<!-- 远程路径引入 -->

<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593367686132&di=9d65ff1b339ef41f00881a988076ca0c&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_111113%2F1111131811fe8b6d1575c620d7.jpg" alt="这是一个美女" title="美女" width="300" height="300">

<!-- 超链接标签 -->

<!-- target=_blank是在另外一个窗口打开 -->

<a href="http://www.baidu.com" target="_blank">点一下试试</a>

<!-- 跳转锚点作用点击回到顶部可以跳转到对应的标签属性，herf可以绑定对应a标签中的name属性值和div标签id属性值 -->

<a href="#xx">回到顶部</a>

</body>

</html>

5.列表标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

<!--ul无序列表标签，type控制前面显示的点  -->

<ul type="disc">

    <li>小白</li>

    <li>小红</li>

    <li>小绿</li>

</ul>

<!-- 有序列表 前面标记了123等 start起始值 type属性表示前面已什么显示 -->

<ol start="2" type="1">

    <li>小白</li>

    <li>小红</li>

    <li>小绿</li>

</ol>

<!-- 标题列表 dd有缩进效果 -->

<dl>

    <dt>标题1</dt>

    <dd>内容1</dd>

    <dt>标题2</dt>

    <dd>内容2</dd>

</dl>

</body>

</html>

6.table表格标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

<!-- border边框 cellpadding内边框与内容距离 -->

<!-- cellspacing外边框和内边框距离 -->

<table border="1" cellpadding="10" cellspacing="10">

    <thead>

        <tr>

            <th>姓名</th>

            <th>年龄</th>

            <th>爱好</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>小白</td>

            <td>23</td>

            <td>男</td>

        </tr>

        <tr>

            <td>小黑</td>

            <td>25</td>

            <td rowspan="2">女</td> <!--rowspan合并行-->

        </tr>

        <tr>

            <td colspan="2">小红</td> <!--colspan合并列-->

            <!-- <td>34</td> -->

            <!-- <td>男</td> -->

        </tr>

    </tbody>

</table>

</body>

</html>

7.input标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

<!-- readonly 只读 不能写 -->

用户名:<input type="text" readonly="readonly">

<!-- disabled 表示选择框置灰 -->

密码:<input type="password" disabled="disabled">

日期选择框:<input type="date">

<br>

<!-- 多选框 也需要加name属性 表示一组 -->

<!-- checked="checked"意思是默认选中 -->

爱好:

<input type="checkbox" name="hobby" checked="checked">男人

<input type="checkbox" name="hobby">女人

<input type="checkbox" name="hobby">人妖

<br>

<!-- 单选 name属性值相同时是一组才有单选效果 -->

<!-- checked="checked"意思是默认选中 -->

性别:

<input type="radio" name="sex" checked="checked">男

<input type="radio" name="sex">女

<br>

<!-- 提交按钮 value属性可以更改，显示默认是提交 -->

<input type="submit" value="确定">

<br>

<!-- 重置按钮 放在form标签里面才有效果 -->

<input type="reset">

<br>

<!-- 普通按钮 也可以用value修改显示 -->

<input type="button" value="滚犊子">

<br>

<!-- 隐藏输入框 页面不显示 f12中可以查看 -->

<input type="hidden">

<br>

<!-- 文件选择框上传文件 -->

<input type="file">

</body>

</html>

8.下拉框select标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

<!-- 下拉框选项 -->

<select name="" >

    <option value="">男人</option>

    <option value="">女人</option>

</select>

<!-- 多选下拉框选项 multiple="multiple"多选 -->

<select name="" multiple="multiple">

    <option value="">男人</option>

    <option value="">女人</option>

</select>

</body>

</html>

9.label标签和textarea标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

<!-- 绑定id 作用是点击用户名可以把光标显示在文本框中 -->

<label for="username">用户名:</label>

<input type="text" id="username">

<!-- 多行文本输入框 用在留言评论 -->

<textarea name="" id="" cols="30" rows="10"></textarea>

</body>

</html>

HTML学习---day01的更多相关文章

  1. python开发学习-day01 (python安装与版本、字符串、字典、运算符、文件)

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  2. Java学习day01

    1.Java的种类: JavaSE(Java标准版) JavaEE(Java企业版) JavaME(Java微型版) 其中,JavaSE是基础,以后的方向是JavaEE(Java企业版) 2.什么是J ...

  3. coco2d学习day01 精灵分析

    day01笔记 using namespace cocos2d; == USING_NS_CC; 一般用后面的 #ifndef __MYLAYER_H__ #define __MYLAYER_H__ ...

  4. zookeeper学习day01

    1.zkAPI:(借助闭锁来实现)    1)创建闭锁对象  2)创建zk对象  3)连接zk客户端(连接成功执行countDown方法)  4)执行await方法(保证链接成功) 5)zk对象调用对 ...

  5. 深度强化学习day01初探强化学习

    深度强化学习 基本概念 强化学习 强化学习(Reinforcement Learning)是机器学习的一个重要的分支,主要用来解决连续决策的问题.强化学习可以在复杂的.不确定的环境中学习如何实现我们设 ...

  6. <深圳千锋学习>day01

    2019.11.11     深圳千锋H5前端学习笔记

  7. Vue学习 Day01

    介绍 这个系列记录自己学习Vue的过程. Vue官方不推荐新手直接使用 vue-cli,所以前面这几天都是根据官方文档学习. 步骤 新建一个html文件. 在html中导入vue.js依赖. < ...

  8. c++学习day01基础知识学习

    一.代码示例解析: #include <iostream> int main() { using namespace std; cout << "come up an ...

  9. CSS学习Day01

    1.什么是CSS 如何学习 CSS是什么 CSS怎么用 CSS选择器(重点+难点) 美化网页(文字.阴影.超链接.列表.渐变) 盒子模型 浮动 定位 网页动画(特效效果) 1.1什么是CSS Casc ...

  10. vue学习day01

    什么是 vue 构建用户界面 用 vue 往 html 页面中填充数据,非常的方便 框架 框架是一套现成的解决方案,程序员只能遵守框架的规范,去编写自己的业务功能! 要学习 vue,就是在学习 vue ...

随机推荐

  1. [转帖]configure 各种配置

    https://api.dandelioncloud.cn/article/details/1487329970564485121 -build=编译该软件所使用的平台 -host=该软件将运行的平台 ...

  2. [转帖]新一代垃圾回收器ZGC的探索与实践

    1. 引入 1.1 GC之痛 很多低延迟高可用Java服务的系统可用性经常受GC停顿的困扰. GC停顿指垃圾回收期间STW(Stop The World),当STW时,所有应用线程停止活动,等待GC停 ...

  3. [转帖]Linux命令拾遗-动态追踪工具

      原创:打码日记(微信公众号ID:codelogs),欢迎分享,转载请保留出处. 简介# 这是Linux命令拾遗系列的第六篇,本篇主要介绍工作中常用的动态追踪工具strace.arthas.bpft ...

  4. 文心一言 VS 讯飞星火 VS chatgpt （187）-- 算法导论14.1 4题

    四.用go语言,写出一个递归过程 OS-KEY-RANK(T,k),以一棵顺序统计树T和一个关键字k作为输入,要求返回 k 在由 T 表示的动态集合中的秩.假设 T 的所有关键字都不相同. 文心一言, ...

  5. js中forEach的用法、forEach如何跳出循环、forEach与for之间的区别

    定义和用法 forEach() 调用数组的每个元素,并将元素传递给回调函数. 注意: forEach() 对于空数组是不会执行回调函数的. 用法: array.forEach(function(cur ...

  6. 将字符串变成数组split

    字符串变成数组,常用来获取数组中我们需要的值. var str="http://op/adfie/life.png"; let arr=str.split('.'); consol ...

  7. Loguru：Python 日志终极解决方案

    关注微信公众号:K哥爬虫,持续分享爬虫进阶.JS/安卓逆向等技术干货! 日志的重要性 日志的作用非常重要,日志可以记录用户的操作.程序的异常,还可以为数据分析提供依据,日志的存在意义就是为了能够在程序 ...

  8. tortoisesvn中看到的版本号和svn info不一致

    tortoisesvn中看到的版本号和svn info不一致 在svn命令行中通过svn info命令获得的版本号与tortoisesvn中show log看到的不一样,原因是在小乌龟中可以只更新具体 ...

  9. TienChin 活动管理-修改活动

    后端 ChannelController.java @PreAuthorize("hasPermission('tienchin:channel:edit')") @GetMapp ...

  10. MedicalGPT：基于LLaMA-13B的中英医疗问答模型（LoRA）

    MedicalGPT:基于LLaMA-13B的中英医疗问答模型(LoRA).实现包括二次预训练.有监督微调.奖励建模.强化学习训练[LLM:含Ziya-LLaMA]. **** 训练医疗大模型,实现包 ...