HTML浅学

最新推荐文章于 2024-11-01 19:13:01 发布
最新推荐文章于 2024-11-01 19:13:01 发布
阅读量147 收藏
点赞数
分类专栏： 笔记 文章标签： html web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28870891/article/details/104756446
版权 
<!DOCTYPE html> 
<html>
	<head>
		<meta charset="utf-8">
		<title>table_Test01</title>
	</head>
	
	<body>
		<!--align属性规定元素的水平对齐位置，border属性定义元素边框宽度，width规定表格的宽度-->
		<table align='center' border='1px' width="60%" height="100px">
			<tr>
				<!--th标签自动居中，自动加粗字体-->
				<th>一</th>
				<th>二</th>
				<th>三</th>
			</tr>
			<!--align属性放在此处表示对当前整行进行进行水平对齐位置规定-->
			<tr align="center">
				<td>a</td>
				<td>b</td>
				<td>c</td>
			</tr>
			<tr>
				<td>d</td>
				<!--align属性放在此处表示对当前单独单元格内的元素进行进行水平对齐位置规定-->
				<td align="center">e</td>
				<td>f</td>
			</tr>
			<tr>
				<td>h</td>
				<td>i</td>
				<td>j</td>
			</tr>
		</table>
		<table border="1px" width="50%">
			<tr>
				<td>1</td>
				<!--colspan是td标签的属性，其作用是向右合拼单元格，属性值是整数，代表需要向右合拼单元格的个数-->
				<td colspan="2">2</td>
				
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<!--rowspan是td标签的属性，其作用是向下合拼单元格，属性值是整数，代表需要向下合拼单元格的个数-->
				<td rowspan="2">3</td>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>	
			</tr>
		</table>
		
		
	    <!--有序列表,type属性规定在列表中使用的标记类型。可取值1 A a I i --->
		
		<ol type="A">
			<li>水果
			   <ol>
			   	<li>西瓜</li>
			   	<li>苹果</li>
			   </ol>
			</li>
			
			<li>蔬菜
			   <ol>
				   <li>白菜</li>
				   <li>青菜</li>
			   </ol>
			</li>
			<li>肉类
			   <ol type="I">
				   <li>牛肉</li>
				   <li>猪肉</li>
			   </ol>
			</li>
		</ol>
		
		<!--无序列表，type属性规定在列表中使用的标记类型，可取值：disc、square、circle-->
	    <ul type="disc">
			<li>中国
			    <ul type="square">
			    	<li>北京</li>
			    	<li>广州</li>
			    	<li>河北</li>
			    </ul>
			</li>
			<li>美国
			    <ul type="circle">
			    	<li>华盛顿</li>
			    	<li>墨西哥</l>
			    </ul>
			</li>
			<li>英国</li>
		</ul>
		
		
		<!--
		
		表单：
		    1、手机用户提供的信息，点击后提交至服务器；
		    2、使用form标签画表单；
		    3、一个网页中可以存在多个表单；
		    4、表单最终是需要提交给服务器，使用action属性指定地址，
			   action属性和超链接中href属性一样，都可以向服务器发送请求（request）
			
			5、   
		-->
		<!--
		form标签有一个method属性，规定用于发送 form-data 的 HTTP 方法。
		可取值：1、get   表示发送服务器的数据地址栏可见。
		       2、post   表示发送服务器的数据地址栏不可见
		-->
		<form action="http://www.baidu.com" method="get">
			
			<!--画按钮可以使用input输入域，其有type属性，可取值button、checkbox、file、hidden、image、password、radio、reset、submit、txt
			type="submit" 表示该按钮具有提交表单功能；必须使用该值才能够提交表单至服务器
			value属性：设置其按钮所显示的文本信息
			-->
			<input type="submit" value="百度"/>
		</form>
		<!--
		表单提交格式http://localhost:8080/aa/save?usename=11&usename=qwq
		其中见name则提交，否则不提交；如果不想提交数据则不需要写出name
		如果指明value属性；则用户不可以修改，
		
		form标签有一个method属性，规定用于发送 form-data 的 HTTP 方法。
		可取值：1、get   表示发送服务器的数据地址栏可见。
		       2、post   表示发送服务器的数据地址栏不可见
		-->
		<form action="http://localhost:8080/aa/save" method="get">
			<table>
				<tr>
					<td>用户</td>
					<td><input type="text" name="usename"></td>
				</tr>
				
				<tr>
					<td>密码</td>
					<td><input type="password" name="usename"></td>
				</tr>
				
				
				<tr align="center">
					<!--单选的按钮必须手动指定value , checked表示默认选中，属性name必须相同-->
					<td colspan="2">
						<input type="radio" name="gender" value="1" checked/>男
					    <input type="radio" name="gender" value="0"/>女
					</td>
				</tr>
				<tr>
					<td><font color="red">爱好</font></td>
					<td>
						<input type="checkbox" name="interest" value="smoke"/>抽烟
						<input type="checkbox" name="interest" value="drink"/>喝酒
						<input type="checkbox" name="interest" value="game"/>游戏
					</td>
				</tr>
				<tr>
					<td>学历</td>
					<td>
						<select name="grade">
								<option value="gz">高中</option>
								<option value="dz">大专</option>
								<option value="bk" selected>本科</option>
								<option value="ss">硕士</option>
						</select>
					</td>
					
				</tr>
			</table>
				
			<table>
				<tr colspan="2">
					<td>简介</td>
				</tr>
				<tr colspan="2">
					<td><textarea rows="10" cols="60" name="introduce"></textarea></td>
				</tr>
				<!--超链接也可以提交数据至服务器，但是超链接提交的都是固定的数据；
				http://localhost:8080/aa/save?usename=11&usename=wqeq&gender=1&interest=smoke&grade=bk&introduce=%E6%88%91%E7%9A%84%E9%92%B1%E5%A5%A5%E5%93%87
				
				-->
				<tr align="center">
					<td colspan="2"><input type="submit" value="登录">&nbsp;<input type="reset" value="清空"></td>
				</tr>
			</table>
			<br>
			<table>
				<tr>
					<td>水果</td>
					<td>
						<!--
						下拉列表支持多选
						select 元素可创建单选或多选菜单。
						<select&> 元素中的 <option> 标签用于定义列表中的可用选项。
						
						multiple属性表示可以进行多选，size显示的选项数
						-->
						<select multiple="multiple" size="3" name="fruits">
							<option>西瓜</option>
							<option>草莓</option>
							<option>苹果</option>
							<option>雪梨</option>
						</select>
					</td>
				</tr>
			</table>
		</form>
		<br><br>
		<form action="http://localhost:8080/aa/save" method="post">
			<!--type="hidden" 表示该标签为隐藏域，网页上不显示，但与表单一同提交-->
             <input type="hidden" name="usename" value="111"/>
			 
			 密码<input type="password" name="usepassword"/>
			 <input type="submit" value="提交">
			 <!--提交结果：http://localhost:8080/aa/save?usename=111&usepassword=123-->
		</form>
		
		<form>
			<!--
			readonly与disabled都是只读不可写，
			readonly可以提交数据至服务器
			disabled不可提交数据，即使有name属性也不行
			-->
			用户名<input type="text" name="usename" value="111" readonly />
			用户名<input type="text" name="usename" value="张三" disabled />
			<input type="submit" value="提交">
		</form>
		<br>
		
		
		<!--
		input标签maxlenth属性；限制用户输入的字数
		-->
		只能输入三个数字
		<input type="text" maxlength="3" />
		
		
		
		<br>
		<!--文件上传控件-->
        <input type="file"/>
		
		
		<!--
		1、在html文档中，任何元素都有id属性，id属性是该节点唯一的标识所以在同一html文档中id属性不能重复
		2、注意：表单提交数据的时候，只和name有关系，和id无关；
		3、id有什么用：
		      javascript语言可以对html文档当中的任意节点进想增删改操作，只能通过id对指定的元素进行操作
			  
		-->
		
		<form id="myform" action="http://localhost:8080/aa/save" method="post">
			用户名<input type="text" id="usename" name="usename" />
			密码<input type="password" id="usepassword" name="passwoed" />
			<input type="submit" value="提交" />
		</form>
		
		<!--
		1、div和span：
		       * div和span都可以成为图层
			   * 图层可以是页面可以灵活布局
			   * 图层就是一个一个的盒子，div嵌套div就是盒子套盒子
			   * div和span是可以定位的，只要定下div左上角的x轴和y轴即可
		
		2、div和span的局别	   
		     * div独自占用一行（默认情况下）
			 * span不会占用一行
		-->
		
		<div id="div"></div>
	</body>
</html>
Q小庄
关注
专栏目录
浅学html
weixin_52102518的博客
05-12 84
介绍 由于工作需要学习html，css，js。在此记录第一天学习。 包含的是html的一些的标签含义。 <!DOCTYPE html> => 声明为html5文档 <html>=> 完整的html页面由该标签包括起来 <head> => 头部，包含了所有的头部标签元素 <meta charset="utf-8"> <title>标题名字</t...
浅学HTML5
InnocentBoYYY的博客
10-18 291
HTML5是最新一代的HTML标准，它不仅拥有HTML中所有的特性，而且增加了许多实用的特性，如视频、音频、画布（canvas）等。2012年12月17日，万维网联盟（W3C）正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称：“HTML5是开放的Web网络平台的奠基石。” HTML5 1. 基本标签介绍 DOCTYPE：告诉浏览器，我们要使用什么规范 head： head代表网页头部 meta： 描述性标签，他用来描述我们网站的一些信息,一般用
浅学HTML（day2)
人民广场不吃炸鸡的博客
05-29 106
关键词：超链接、表格（列表）、表单
浅学HTML（day1）
人民广场不吃炸鸡的博客
05-17 108
- 设置内容水平居中 -->-- 标题 h1~h6；数字越大，优先级越低，h1最多只能出现一次，常用标题h1~h3特点：默认样式：数字越大，字体越小，加粗每个标签独占一行-->一级标题二级标题·······六级标题-- 段落 p特点：默认样式：垂直方向有距离每个段落独占一行-->-- span 包裹文字，不独占一行 -->-- br:强制转行，br后面的元素另起一行 -->【没代码，太乱】
那些年浅学html的事
Y426_A的博客
04-08 104
来到华清学习已经一个月了，记得刚开始来的时候，我很多关于前端的知识都不了解，用一句比较滑稽的话来说，就是一张白纸。第一周的时候，因为大家统一补课Java的知识，所以我自然进入为期一周的Java学习中。相较HTML5而言，爪哇的逻辑更加强，因此学起来会难一点，但有着197身高的李剑老师依然很鼓励学习前端的伙伴们，让我们好好学习java的逻辑，这对于我们后期学习数据结构是有好处的。不忙不慢的一周时间悄然过去。 崭新的一周，我们引来了新的分班以及开班仪式。从此正式开启H5的学习，任课的熊远老师，在了解到我...
浅学CSS
m0_63640914的博客
08-06 1980
自己浅学css
浅学JavaWeb
Love_cangXin的博客
12-29 219
这里写目录标题web概念概述HTMLHTML标签：表单标签CSS：页面美化和布局控制 web概念概述 JavaWeb： 使用Java语言开发基于互联网的项目 软件架构： C/S: Client/Server 客户端/服务器端 在用户本地有一个客户端程序，在远程有一个服务器端程序 如：QQ，迅雷… 优点： 用户体验好 缺点： 开发、安装，部署，维护 麻烦 B/S: Browser/Server 浏览器/服务器端 只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服
浅学一下JavaScript
axbhealj的博客
03-09 243
JS、弹窗、运算、函数
浅学 ES6
weixin_39891473的博客
07-21 190
ECMAScript6.0(以下简称ES6)是JavaScript语言的下一代标准.使得JavaScript语言可以用来编写复杂。
文科生浅学HTML5基础的部分笔记
DL168105的博客
05-18 257
html5部分基础知识的笔记，如标签分类，锚点定位，input输入框等
xml浅学笔记
05-15
4、每个标记都允许自定义属性，格式与HTML一致，但属性值，必须用""括起来 5、每个XML文档中必须要有一个跟元素 3、使用AJAX 请求 XML 文档 1、要遵循AJAX的请求步骤 1、创建/获取 xhr 2、创建请求 xhr.open...
浅学JavaScript01
Lamour99的博客
07-18 422
世界不止0和1 还有...
浅学一下分布式事务
阳光宅男的博客
06-13 252
分布式事务
HTML 元数据标签 ＜meta＞ 全面解析：如何利用字符集、描述、关键字和视口提升网站质量
Allen-
11-01 71
标签通常位于文档的部分。它用于定义文档的元数据，包括字符编码、文档描述、关键字、作者信息等。这些信息可以帮助浏览器正确解析和显示文档，同时还可以提供搜索引擎索引所需的信息。
炫酷的登录框!(附源码)
m0_50864141的博客
10-29 1864
【代码】炫酷的登录框!(附源码)
HTML小阶段二维表和思维导图
2301_79075752的博客
10-29 820
下面是对标签、元素、属性的对比二维表，通过对比3w1h（what是什么、where用在哪、why为什么要用、how如何用）来学习区分学习标签、元素、属性标签元素属性what（Tags）标签是用来标记内容块或标明元素内容意义（Element）网页内容是由元素组成的，一个元素通常由一个开始标签、内容、其他元素及一个结束标签组成。（Attribute）与元素相关的特性，用于提供额外的信息或配置选项。where开始标签：位于元素的开头，用于标记一个元素的开始。
Html编写发射粒子爱心
m0_58419490的博客
10-31 568
【代码】Html编写发射粒子爱心。
HTML入门教程22：HTML文件路径
软考鸭
10-30 485
相对路径是相对于当前HTML文件所在位置的路径。它不会包含协议、域名或完整的文件路径，而是根据当前文件与目标文件之间的相对位置来确定路径。
标签之文字排版,图片,链接,音视频(HTML) 基础版
最新发布
m0_75035023的博客
11-01 183
标签之文字排版,图片,链接,音视频(HTML) 基础版,javaweb
静态方法中使用jdbctemplate_JdbcTemplate浅学
06-13
可以在静态方法中使用JdbcTemplate，只需在方法中创建JdbcTemplate对象即可。以下是一个简单的示例： ```java import org.springframework.jdbc.core.JdbcTemplate; import org.springframework.jdbc.datasource....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值