demo1

最新推荐文章于 2024-08-22 09:26:51 发布
最新推荐文章于 2024-08-22 09:26:51 发布
阅读量228 收藏
点赞数
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44556624/article/details/108087867
版权

B站黑马程序员课程 HTML demo
请各位大佬不要浪费时间看下面的内容啦，这是菜鸡自己复习用的

1.段落/图片标签

1.1 锚点标签
通过目录点击跳到目标位置
1.2内部网页跳转
通过连接，跳到另一个内部网络

<!DOCTYPE html> <!DOCTYPE><!-- 告诉浏览器使用的HTML5版本 -->
<html lang="en"> <!-- lang="当前文档的显示的语言" 中文"zh-CN"，英语"en" -->
<head>
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 移动端开发的代码 -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>案例1</title>
</head>
<body>
	<h1 >圣诞节的那些事</h1>
	<a href="#p1">1.圣诞节的由来</a><br><!-- 这里一定要有# -->
	<a href="#p2">2.圣诞老人的由来</a><br>
	<a href="#p3">3.圣诞树的由来</a><br>

	<h3 id="p1">圣诞的由来</h3>
	<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
	<img src="E:/images/answer/1.jpg">

	<h3 id="p2">圣诞树的由来</h3>
	<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
	<img src="E:/images/answer/2.jpg">

	<h3 id="p3">圣诞老人的由来</h3>
	<p>啊啊啊啊啊<a href="oldman.html">圣诞老人</a>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p><!-- oldman.html就是文件名 -->
	<img src="E:/images/answer/3.jpg">

	<p>更多内容可以<a href="http://www.baidu.com">百度</a>一下</p>
</body>
</html>

内连接的网页源码：

<!DOCTYPE html> <!DOCTYPE><!-- 告诉浏览器使用的HTML5版本 -->
<html lang="en"> <!-- lang="当前文档的显示的语言" 中文"zh-CN"，英语"en" -->
<head>
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 移动端开发的代码 -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>案例1</title>
</head>
<body>
	<h1>圣诞老人（西方文化的传说人）</h1>
	<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
	<img src="E:/images/answer/4.jpg">
</body>
</html>

2.table标签

demo1

在这里插入图片描述
align/border/weight/height
cellpadding:框里文字的内容与框的距离；
cellspacing:单元格间的距离
以上一定要放在table里面

<body>
<!-- cellpadding:框里文字的内容与框的距离；cellspacing:单元格间的距离 -->
	<table align="center" border="solid" cellpadding="10px" cellspacing="0" weight="" height = "">
		<tr><th>排名</th> <th>关键词</th> <th>趋势</th> <th>今日搜索</th> <th>最近七日</th> <th>相关链接</th></tr>
		<tr><td>1</td> <td>鬼吹灯</td> <td>down</td> <td>345</td> <td>123</td><td><a href="http://www.baidu.com">百度</a> <a href="http://www.baidu.com">百度</a> </td></tr>
		<tr><td>2</td> <td>鬼吹灯</td> <td>down</td> <td>345</td> <td>123</td><td>123</td></tr>
		<tr><td>3</td> <td>鬼吹灯</td> <td>down</td> <td>345</td> <td>123</td> <td>123</td></tr>
		<tr><td>4</td> <td>鬼吹灯</td> <td>down</td> <td>345</td> <td>123</td> <td>123</td></tr>
		<tr><td>5</td> <td>鬼吹灯</td> <td>down</td> <td>345</td> <td>123</td> <td>123</td></tr>
		<tr><td>6</td> <td>鬼吹灯</td> <td>down</td> <td>345</td> <td>123</td> <td>123</td></tr>
		<tr><td>7</td> <td>鬼吹灯</td> <td>down</td> <td>345</td> <td>123</td> <td>123</td></tr>
	</table>
</body>

合并单元格

  • 跨行合并：rowspan=“n”
  • 跨列合并：colspan=“n”

2.2 列表标签
列表分为：有序列表、无序列表、自定义列表
在这里插入图片描述

< ul >无序列表< /ul >：里面只能包含li，li里面可以包含任何标签

<ul>
	<li></li>
	<li></li>
</ul>

< ol >有序列表< /ol >：里面只能包含li，li里面可以包含任何标签
列表前面自动加上序号

<ol>
	<li></li>
</ol>

< dl >自定义列表< /dl >：里面只能包含dl和dt，dl和dt里面可以包含任何标签

<dl>
	<dt></dt>
</dl>

2.3 表单标签
在HTML中，一个完整的表单通常由表单域、表单控件（元素）和提示信息3部分组成
在这里插入图片描述
2.3.1 表单域< form >：实现把它范围内的表单元素信息收集和传递（给服务器）
在这里插入图片描述

<form action="url" method="提交方式" name="表单域名称">
	各种表单元素控件
</form>

2.3.2 表单元素：
1.< input >输入表单元素：用来收集用户信息，包含一个type属性
在这里插入图片描述
想要网页一打开表单元素里就显示默认的值：

<form>
	<input type="" value="请输入密码">
</form>

如何区别不同的表单元素：通过name属性，后台通过name属性找到这个表单

用户名：<input type="text" value="请输入用户名" name="username">

radio或checkbox是一组的就要给他们相同的名字
页面一打开，单选按钮或复选框是默认选项：

男：<input type="radio" name="sex" value="男" checked="checked"/>
女：<input type="radio" name="sex" value="女" />

2.< select >下拉表单标签
在这里插入图片描述

<form>
<select>
	<option></option>
	<option></option><!-- option的selected="selected"默认为选中  -->
</select>
</form>

3.< textarea >多行文本域

<textarea cols="3" rows="2"> <!-- cols为每行中显示的字符数，rows列数 -->
	文本内容
</textarea>

demo2

在这里插入图片描述

<!DOCTYPE html> <!DOCTYPE><!-- 告诉浏览器使用的HTML5版本 -->
<html lang="en"> <!-- lang="当前文档的显示的语言" 中文"zh-CN"，英语"en" -->
<head>
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 移动端开发的代码 -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>案例1</title>
</head>
<body>
	<h4>青春不常在，抓紧谈恋爱</h4>
	<table>
	<!-- 第一行 -->
		<tr>
			<td>性别</td>
			<td>
				<label for="sex">男</label><input type="radio" name="sex" id="sex">
				<label for="sex">女</label><input type="radio" name="sex" id="sex">
			</td>
		</tr>
	<!-- 第二行 -->
		<tr>
			<td>生日</td>
			<td>
				<select name="年" id="年"><option >---请选择年份---</option><option >2021</option></select>
				<select name="月" id="月"><option >---请选择月份---</option><option >1</option></select>
				<select name="日" id="日"><option >---请选择日---</option><option >1</option></select>
			</td>
		</tr>
	<!-- 第三行 -->
		<tr>
			<td>所在地区</td><td><input type="text"></td>
		</tr>
	<!-- 第四行 -->
		<tr>
			<td>婚姻状况</td>
			<td>
				<!-- selected=""是复选框 -->
				<input type="radio" checked="checked">未婚
				<input type="radio" >已婚
				<input type="radio" >离婚
			</td>
		</tr>
	<!-- 第五行 -->
		<tr>
			<td>学历</td>
			<td><input type="text"></td>
		</tr>
	<!-- 第六行 -->
		<tr>
			<td>喜欢的类型</td>
			<td><input type="checkbox">妩媚的
				<input type="checkbox">可爱的
				<input type="checkbox">小鲜肉
				<input type="checkbox">老腊肉
				<input type="checkbox">都喜欢
			</td>
		</tr>
	<!-- 第七行 -->
		<tr>
			<td>自我介绍</td>
			<td><textarea></textarea></td>
		</tr>

		<tr>
			<td></td><td><input type="submit" value="免费注册"></td><br>	
		</tr>
		<tr><td></td><td><input type="checkbox" checked="checked">我同意注册条款和会员加入标准</td></tr>
		<tr>
			<td></td><td><a href="">我是会员，立即登录</a></td>
		</tr>
		<tr>
		<td></td>
		<td>
		<h5>我承诺</h5>
			<ul>
				<li>年满18岁、单身</li>
				<li>抱着严肃的态度</li>
				<li>真诚寻找另一半</li>
			</ul>
		</td>
			>
		</tr>
	</table>
</body>
</html>
阿姆斯特朗螺旋麦辣鸡
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Spring Boot 项目部署时报demo1-0.0.1-SNAPSHOT.jar中没有主清单属性错误
旭东怪的博客
01-18 6572
问题描述： demo1-0.0.1-SNAPSHOT.jar中没有主清单属性 问题分析： 1、maven在打包时没有配置主类，导致打包不完成。 <build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-resources-plugin
Java基础Demo
weixin_45180536的博客
07-24 1305
Demo 01 public class Demo1 { public static void main(String[] args) { //二元运算符 int a = 10; int b = 20; int c = 25; int d = 25; System.out.println(a+b); System.out.println(a-b); System.out.
在IDEA运行Scala项目时报错：Error:(1, 8) Demo1 is already defined as object Demo1 object Demo1 {
qq_34609633的博客
06-02 2528
因为在创建这个项目时main文件夹和java文件夹是默认为source文件夹，我在新建scala文件夹时也把它设置为source文件夹，所以运行时才会报那个错。 在Interllij IDEA中 File->Project structure（快捷键是ctr+alt+shift+s）, 选择 Module, 在Sources的页签里选择src文件夹,然后在Source Folders模块中删...
CMake Error: The source directory “/home/Demo1“ does not appear to contain CMakeLists.txt.
zhou_xiao_lei的博客
07-02 5974
尝试了好多可能正确的解决方法都不对，最后复制了一下终端报错内容中的CMakeLists.txt对自己所写的cmake文件重新命名，编译通过，想骂人....
No module named '__main__.demo1'; '__main__' is not a package
微信号：RunsenLiu
04-17 5932
这个小问题竟然没有比较好的解决的博客，因此我花下小时间教下遇到这问题的小白 这个啥回事，怎么报错了，就是导入不了，难道路径错了，没有啊， 记住了from 导入的绝对路径 不是相对路径 说白了from + .就是一个错 from 导入的是文件夹 import 可用导入文件和文件夹 不好意思，路径用的是中文，其实都是一样 不要from 一个 py 文件 导入 一个 类或方法 还不给我点赞 ...
钉钉服务端开发记录demo1
热门推荐
jizhunboss的专栏
08-23 1万+
1、注册企业账号。 2、普通企业版Demo地址： https://github.com/ddtalk/HarleyCorp 下载后导入eclipse   jdk修改为1.7 4.将您的CorpID和CorpSecret配置在Env.java文件 这2个值在钉钉OA管理后台（https://oa.dingtalk.com/）微应用》微应用设置里面 5.如果
DEMO是什么
12-27 4901
DEMO的中文含义为“示范”、“展示”、“样片”、“样稿”、“原型”，常被用来称呼具有示范或展示功能及意味的事物。
Demo含义
weixin_65728773的博客
08-31 1495
Demo源码可以理解为某种计算机语言的示例代码，是可以在相应的编译环境下直接运行的源代码，通常Demo的作用就是Demo源码开发者引导其他程序员进行二次开发所提供的模板程序代码。Demo是demonstration的缩写，其中文含意为“示范”、“展示”、“样片”、“样稿”，常被用来称呼具有示范或展示功能及意味的事。老是在资料里大佬的文件名老是Demo，就好奇是什么意思。在程序员中就是指示例代码/完整的项目代码。
内核驱动最简demo
lyndon
12-20 2843
用户空间命令 insmod 和 rmmod 使用内核空间的函数 module_init 和 module_exit
创建Vue项目(demo)教程
Kinrun的博客
09-06 2063
创建Vue项目教程
demo1.class
07-23
java面对像 幸运抽奖系统
Mrpc Demo1
02-05
我的Mrpc框架功能实现demo1的代码
demo1.java
04-18
demo1.java
DEMO1.zip_DEMO_zip
07-14
DEMO system block diagram
Demo1.java
10-24
Demo1.java
html转vue项目
qq_38880880的博客
08-19 308
总结来说，将HTML代码转换为Vue需要引入Vue框架并编写Vue组件，使用Vue的数据绑定和事件绑定语法实现页面的动态更新。当我们点击"Change Name"按钮时，changeName方法会被调用，将name属性的值改为"Vue.js"。在Vue的data选项中，我们定义了一个name属性，并将其初始值设为"Vue"。除了简单的数据绑定和事件绑定外，Vue还提供了丰富的指令和组件库，用于构建更复杂的用户界面。通过使用这些特性，我们可以将HTML代码转换为更加动态和交互的Vue应用。
响应式Web设计：纯HTML和CSS的实现技巧
vvvae1234的博客
08-18 722
互联网已经成为人们日常生活中不可或缺的一部分，随着移动设备的普及，用户访问网站的方式也发生了巨大变化。因此，响应式Web设计（Responsive Web Design, RWD）应运而生。它的目标是使Web页面能够根据不同设备屏幕的大小和分辨率自动调整布局，以提供最佳的用户体验。本文将深入探讨响应式Web设计的基本概念、实现技巧，并通过实际操作案例来展示如何使用纯HTML和CSS构建一个响应式网页。
Java学习Day33：HTML 第三章：挟魂崖
weixin_51721783的博客
08-21 695
JavaScript中，dom是一套操作文档内容的方法，可以完成查、增、删、改（先删后增）的操作。而且dom的开发效率很高，还可以用于服务器渲染、weex 开发等。本文向大家介绍JavaScript中的dom。1、什么是dom？dom，全称Document Object Model文档对象模型，是 W3C 的标准；[所有浏览器公共遵守的标准]。用于处理网页内容的方法和接口，简单的说就是一套操作文档内容的方法。2、dom组成：由HTML、CSS、事件（交互）组成。
【HTML】语义化
最新发布
DX390609的博客
08-22 173
根据内容的结构选择合适的标签。
DEMO1系统安装与硬件配置指南
"DEMO1系统操作说明" 本操作指南主要涵盖了DEMO1系统的安装、工程新建以及硬件配置等核心步骤。DEMO1系统是基于Siemens SIMATIC平台的，适用于自动化培训和学习。 首先，关于软件安装，需确保安装了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值