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. [转帖]初探Linux CPU动态调频与实测

    https://zhuanlan.zhihu.com/p/33753019 关于 本文主要涉及Linux CPUFreq子系统是什么,为什么需要,怎么用. 并解决在实际测试中遇到的三个问题: scal ...

  2. [转帖]linux 调优各项监控指标小记

    https://z.itpub.net/article/detail/8A4E4E96522BD59D45AB5A4CA442EDB3 自开始负责生产环境部署,中间遇到了若干线上环境内存以及CPU的问 ...

  3. 当爬虫工程师遇到 CTF丨B 站 1024 安全攻防题解

    答案参考 第一题:a1cd5f84-27966146-3776f301-64031bb9 第二题:36c7a7b4-cda04af0-8db0368d-b5166480 第三题:9d3c3014-6c ...

  4. Vue基础系列文章11---router基本使用

    1.系统中引入路由js文件,加两个连接,分别到用户管理和用户注册页面 <router-link to="/user">用户列表</router-link> ...

  5. statsvn只支持到svn1.3

    怎样找出svn修改次数最多的文件? 我想统计配置表中,那个配置文件修改次数最多,但经过实践发现statsvn只支持到1.3的版本. 通过svn的命令行接口,把提交记录保存到xml中,再通过自己写代码解 ...

  6. gRPC学习小札

    gRPC 前言 为什么使用gRPC 传输协议 传输效率 性能消耗 gRPC入门 gRPC流 证书认证 使用根证书 gRPC实现token认证 和Web服务共存 验证器 REST接口 grpcurl工具 ...

  7. PGL图学习之图游走类metapath2vec模型[系列五]

    PGL图学习之图游走类metapath2vec模型[系列五] 本项目链接:https://aistudio.baidu.com/aistudio/projectdetail/5009827?contr ...

  8. Python 实现指定窗口置顶激活

    通过Python实现对特定窗口的置顶操作以及对特定窗体发送按键,这里需要安装一个第三方pip包,执行命令pywin32安装好以后,我们运行试试. 第一个案例,遍历所有句柄,然后对特定窗口进行最大化或最 ...

  9. Arduino语言基础(萌新)

    Arduino语言基础(萌新) Arduino语言注解Arduino语言是建立在C/C++基础上的,其实也就是基础的C语言,Arduino语言只不过把AVR单片机(微控制器)相关的一些参数设置都函数化 ...

  10. Vulkan学习苦旅05:马不停蹄地渲染(创建交换链VkSwapchainKHR)

    通俗地说,渲染图像就是为图像的每个像素选择合适的颜色.例如,如果图像的分辨率为1920x1080,表示图像中有1920x1080个像素,渲染的过程,就是为每个位置的像素计算出合适的颜色.具体来说,假设 ...