当前位置: 首页 > news >正文

前端-HTML-day2

目录

1、无序列表

2、有序列表

3、定义列表

4、表格-基本使用

5、表格-结构标签

6、表格-合并单元格

7、表单-input基本使用

8、表单-input占位文本

9、表单-单选框

10、表单-上传多个文件

11、表单-多选框

12、表单-下拉菜单

13、表单-文本域

14、表单-label标签

15、表单-按钮

16、无语义-div和span

17、字符实体

18、综合案例1-体育新闻

19、综合案例2-注册页面


1、无序列表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>无序列表</title>
</head>
<body><ul><li>列表条目1</li><li>列表条目2</li><li>列表条目3</li></ul>
</body>
</html>

2、有序列表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>有序列表</title>
</head>
<body><ol><li>步骤1</li><li>步骤2</li><li>步骤3</li></ol>
</body>
</html>

3、定义列表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>定义列表</title>
</head>
<body><dl><dt>服务中心</dt><dd>申请售后</dd><dd>售后政策</dd><dd>订单查询</dd><dt>线下门店</dt><dd>小米之家</dd><dd>服务网点</dd><dd>授权体验店</dd></dl>
</body>
</html>

4、表格-基本使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格-基本使用</title>
</head>
<body><table border="1"><tr><th>姓名</th><th>语文</th><th>数学</th><th>总分</th></tr><tr><td>张三</td><td>99</td><td>100</td><td>199</td></tr><tr><td>李四</td><td>98</td><td>100</td><td>198</td></tr><tr><td>总结</td><td>全市第一</td><td>全市第一</td><td>全市第一</td></tr></table>
</body>
</html>

5、表格-结构标签

 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格-结构标签</title>
</head>
<body><table border="1"><thead><tr><th>姓名</th><th>语文</th><th>数学</th><th>总分</th></tr></thead><tbody><tr><td>张三</td><td>99</td><td>100</td><td>199</td></tr><tr><td>李四</td><td>98</td><td>100</td><td>198</td></tr></tbody><tfoot><tr><td>总结</td><td>全市第一</td><td>全市第一</td><td>全市第一</td></tr></tfoot></table>
</body>
</html>

6、表格-合并单元格

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格-合并单元格</title>
</head>
<body><table border="1"><thead><tr><th>姓名</th><th>语文</th><th>数学</th><th>总分</th></tr></thead><tbody><tr><td>张三</td><td>99</td><td rowspan="2">100</td><td>199</td></tr><tr><td>李四</td><td>98</td><!-- <td>100</td> --><td>198</td></tr></tbody><tfoot><tr><td>总结</td><td colspan="3">全市第一</td><!-- <td>全市第一</td> --><!-- <td>全市第一</td> --></tr></tfoot></table>
</body>
</html>

7、表单-input基本使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>input基本使用</title>
</head>
<body><!-- 特点:输入什么就显示什么 -->文本框:<input type="text"><br><br><!-- 特点:输入什么都显示 点 -->密码框:<input type="password"><br><br>单选框:<input type="radio"><br><br>多选框:<input type="checkbox"><br><br>上传文件:<input type="file">
</body>
</html>

8、表单-input占位文本

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>input占位文本</title>
</head>
<body>文本框:<input type="text" placeholder="请输入用户名"><br><br>密码框:<input type="password" placeholder="请输入密码">
</body>
</html>

9、表单-单选框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>单选框</title>
</head>
<body><!-- 加上checked后,默认选择男 --><!-- name属性值必须相同 -->性别:<input type="radio" name="gender" checked> 男<input type="radio" name="gender"> 女
</body>
</html>

10、表单-上传多个文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>上传多个文件</title>
</head>
<body>上传文件:<input type="file" multiple>
</body>
</html>

11、表单-多选框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>多选框</title>
</head>
<body><!-- 加上checked后,默认选择 -->兴趣爱好:<input type="checkbox"> 敲代码<input type="checkbox" checked> 敲前端代码<input type="checkbox" checked> 敲前端HTML代码
</body>
</html>

12、表单-下拉菜单

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>下拉菜单</title>
</head>
<body><!-- selected 表示默认选中 -->城市:<select><option>北京</option><option>上海</option><option>广州</option><option>深圳</option><option selected>武汉</option></select>
</body>
</html>

13、表单-文本域

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本域</title>
</head>
<body><!-- 右下角有拖拽功能,未来都会禁用,未来工作中,用css设置尺寸 --><textarea>请输入评论</textarea>
</body>
</html>

14、表单-label标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>label标签</title>
</head>
<body>性别:<input type="radio" name="gender" id="man"> <label for="man">男</label><label><input type="radio" name="gender"> 女</label>
</body>
</html>

15、表单-按钮

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>按钮</title>
</head>
<body><!-- form 表单区域 --><!-- action="" 发送数据地址 --><!-- 按钮需用form包裹,才能生效 --><form action="">用户名:<input type="text"><br><br>密码:<input type="password"><br><br><!-- 如果省略type属性,功能是提交 --><button type="submit">提交</button><button type="reset">重置</button><button type="button">普通按钮</button></form>
</body>
</html>

16、无语义-div和span

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>div和span</title>
</head>
<body><!-- div:大盒子 --><!-- div标签:独占一行 --><div>这是div标签</div><div>这是div标签</div><!-- span:小盒子 --><!-- span标签:不换行 --><span>这是span标签</span><span>这是span标签</span>
</body>
</html>

17、字符实体

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>字符实体</title>
</head>
<body><!-- 在代码中敲键盘的空格,网页只识别一个 --><!-- 多空格使用 &nbsp;  -->乾坤未定,你我皆是黑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;马。<!-- <p>默认为段落标签,<p>原样显示 &lt;p&gt; -->&lt;p&gt;
</body>
</html>

18、综合案例1-体育新闻

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>体育新闻</title>
</head>
<body><ul><li><img src="./images/1.jpg" alt=""><h3>主帅安东尼奥回西班牙休假 国青抵达海口进行隔离</h3></li><li><img src="./images/2.jpg" alt=""><h3>梅州主帅:申花有强有力的教练组 球员体能水平高</h3></li><li><img src="./images/3.jpg" alt=""><h3>马德兴:00后球员将首登亚洲舞台 调整心态才务实</h3></li></ul>
</body>
</html>

 

19、综合案例2-注册页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>注册信息</title>
</head>
<body><h1>注册信息</h1><form action=""><!-- 表单控件 --><!-- 个人信息 --><h2>个人信息</h2><label>姓名:</label><input type="text" placeholder="请输入真实姓名"><br><br><label>密码:</label><input type="password" placeholder="请输入密码"><br><br><label>确认密码:</label><input type="password" placeholder="请输入确认密码"><br><br><label>性别:</label><label><input type="radio" name="gender" checked>男</label><label><input type="radio" name="gender">女</label><br><br><label>居住城市:</label><select><option>北京</option><option>上海</option><option>广州</option><option>深圳</option><option>武汉</option></select><!-- 教育经历 --><h2>教育经历</h2><label>最高学历:</label><select><option>博士</option><option>硕士</option><option>本科</option><option>大专</option></select><br><br><label>学校名称:</label><input type="text"><br><br><label>所学专业:</label><input type="text"><br><br><label>在校时间:</label><select><option>2015</option><option>2016</option><option>2017</option><option>2018</option></select>--<select><option>2019</option><option>2020</option><option>2021</option><option>2022</option></select><!-- 工作经历 --><h2>工作经历</h2><label>公司名称:</label><input type="text"><br><br><label>工作描述:</label><br><textarea></textarea><br><br><!-- 协议和按钮 --><label><input type="checkbox">已阅读并同意以下协议:</label><ul><li><a href="#">《用户服务协议》</a></li><li><a href="#">《隐私政策》</a></li></ul><br><button type="submit">免费注册</button><button type="reset">重新填写</button></form>
</body>
</html>

http://www.dtcms.com/a/265554.html

相关文章:

  • 从生活实例看:点积、内积和矩阵乘法如何玩转机器学习
  • 物联网MQTT协议与实践:从零到精通的硬核指南
  • I/O 进程 7.2
  • Mysql锁机制与优化实践以及MVCC底层原理剖析
  • TensorFlow 安装使用教程
  • 6. 常见K线形态(楔形与旗形)
  • Laravel8中调取腾讯云文字识别OCR
  • 中文语境下的视频生成革命:百度 MuseSteamer 的“产品级落地”启示录
  • 手机内存融合是什么意思
  • Redis 的特性、工作机制与性能优化全解(含搭建实战教程)
  • 用 vLLM 在两张 RTX 3090 上部署 Qwen2.5-14B BF16全量大模型的完整过程
  • 替换springboot打好jar包中的class文件
  • Python 异步爬虫(aiohttp)高效抓取新闻数据
  • 前端开发中的 Base64 图片革命:从链接到嵌入的性能优化
  • Go爬虫实时性能监控方案
  • 利用人名语言分类案例演示RNN、LSTM和GRU的区别(基于PyTorch)
  • 【学习线路】机器学习线路概述与内容关键点说明
  • git 中删除提交历史
  • 闲庭信步使用SV搭建图像测试平台:第二十七课——图像的腐蚀
  • Windows DOS CMD 100
  • PostgreSQL-XL之 序列(Sequence)
  • 深度学习2(逻辑回归+损失函数+梯度下降)
  • 基于Spring Boot + MyBatis-Plus + Thymeleaf的评论管理系统深度解析
  • Spring Boot + Screw 一键生成数据库设计文档
  • GitHub 解码指南:用 AI 赋能,五步快速掌握任意开源项目
  • WordPress 站点漏洞利用:数据库恶意注入与多重感染的案例分析
  • 大数据环境搭建指南:基于 Docker 构建 Hadoop、Hive、HBase 等服务
  • 如何在Jupyter notebook中删除内核以及添加内核
  • 大数据救公益:数字时代下的社会力量如何玩转“数据+善意”
  • CSS之基础语法一文全解析