HTML基础

LM.-

已于 2024-06-15 22:11:05 修改

阅读量152

点赞数 5

文章标签： html 前端

于 2024-06-15 22:08:41 首次发布

本文链接：https://blog.youkuaiyun.com/m0_71185372/article/details/139709742

版权

1.HTML

html语言就是一种标记语言，提供许多的标签，不同的标签功能不同，网页就是通过这些描述出来的。最终由浏览器

<!--
html注释
<!DOCTYPE html>  声明html语言的版本信息，为html5版本，告诉浏览器以html5标准解释运行
-->
 
<!DOCTYPE html>
<!--HTML骨架标签-->
<!--
html标签是网页中的根标签，所有的内容都应该写在此标签中-->
<html>
	<!--头标签-->
	<head>
		<meta charset="utf-8" />  <!--网页字符集-->
		<meta name="keywords"  content="家电,手机,网络"/> <!--设置网页关键字，让搜索索引查找-->
		<title>我的第一张网页</title> <!--网页标题-->
		<link  href="img/qq.ico" rel="icon"/>
			<body text ="red"><!--字体颜色-->
			<body bgcolor="green" > <!--背景颜色-->
	</head>
	<!--身体标签，用来写网页内容-->
	<body>
		网页内容
		<!--
		标签结构和写法
		<开始标签>标签体</结束标签>
		<b>...</b>字体加粗
		<br/>换行
		-->
	</body>
</html>

表格创建

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--
		<table>	</table> 表示一个表格
				cellpadding 设置内容到边框的间距
				cellspacing 设置单元格与单元格之间的边框距
			<tr></tr>表示一个行
			<td></td>表示一个普通单元格
			<th></th>表示一个单元格还是表头,会加粗
			表格中的数据都只能写在单元格中
	-->
		
		<table border="6" width="400" cellpadding="10" cellspacing="0">
			<tr height="40">
				<th width="200">姓名</th>
				<th width="100">java</th>
				<th width="100">c</th>
				</tr>
				
				<tr>
					<td>苟浩亮</td>
					<td>100</td>
					<td>90</td>
				</tr>
				
				<tr>
					<td>朱师磊</td>
					<td>90</td>
					<td>95</td>
				</tr>
				
				<tr>
					<td>窦鑫锐</td>
					<td>90</td>
					<td>80</td>
				</tr>
				</table>
	</body>
</html>

colspan="" 合并列从哪列开始合并,在那添加colspan="合并数量" 记得删除多余的单格 rowspan="" 合并行从哪列开始合并,在那添加rowspan="合并数量" 记得删除多余的单格

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!--colspan="" 合并列 从哪列开始合并,在那添加colspan="合并数量" 记得删除多余的单格-->
        <!--rowspan="" 合并行 从哪列开始合并,在那添加rowspan="合并数量" 记得删除多余的单格-->
    </head>
    <body>
        <table border="1"  width="800" cellpadding="10" cellspacing="0">
            <tr align="center">
                <td colspan="2">品&nbsp;&nbsp;牌</td>
                <td colspan="3">春&nbsp;&nbsp;装</td>
                <td colspan="3">夏&nbsp;&nbsp;装</td>
            
            </tr>
            <tr align="center">
                <td colspan="2"></td>
                <td>男&nbsp;&nbsp;装</td>
                <td>女&nbsp;&nbsp;装</td>
                <td>童&nbsp;&nbsp;装</td>
                <td>男&nbsp;&nbsp;装</td>
                <td>女&nbsp;&nbsp;装</td>
                <td>童&nbsp;&nbsp;装</td>
            </tr>
            <tr align="center">
                <td rowspan="2">JC</td>
                <td>牛仔系列</td>
                <td>116</td>
                <td>98</td>
                <td>68</td>
                <td>88</td>
                <td>86</td>
                <td>46</td>
            </tr>
            <tr align="center">
                <td>休闲系列</td>
                <td>120</td>
                <td>100</td>
                <td>80</td>
                <td>98</td>
                <td>88</td>
                <td>50</td>
            </tr>
        </table>
    </body>
</html>

表单

表单就一个区域,拥有许多输入和选择组件,让用户可以输入选择信息最终将数据提交到服务器

<form action="server.html" method="get">
		  
		  action="服务器地址" method="请求方式"
			
			<input type="text"  单行文本输入框
			
			 name="account"/>  定义组件的名字 向后端提交
			
			 value=""  组件的值
			
			 readonly  设置组件可读,但不可修改
			 
			 placeholder="请输入用户名" 输入框提示信息
			 
			 disabled  禁用组件,不会提交内容到服务器
			
			input type="radio" 单选框  选择项组件需要给value值   单选框需要通过name进行分组,name相同为一组
				
				checked属性可以默认选定一项
				
			 input type="checkbox" 多选框 选择项组件需要给value值
			 
			 input type="file" 文件框
			 
			 <select name="province">
			 	<option>请选择</option>
			 	<option value="101">北京</option>
			 	<option value="102">上海</option>
			 	<option value="103">广东</option>
			 	<option value="104">浙江</option>
			 	<option value="105">陕西</option>
			 </select>
			 
			 <input type="reset"/>重置键
			 
			 <input type="submit" />  提交键
			 
			 input type="button"  触发键 用来触发某些设定好的事件
			 
		</form>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<form action="server.html" method="get">
			账号:<input type="text" name="account" value="" placeholder="请输入用户名"/><br/>
			密码:<input type="password" name="password" placeholder="请输入密码"/><br/>
			性别:<input type="radio" name="gender" value="男"/>男
				 <input type="radio" name="gender" value="女"/>女<br/>
				 
			课程:<input type="checkbox" name="course" value="java"/>java
				 <input type="checkbox" name="course" value="python"/>python
				 <input type="checkbox" name="course" value="html"/>html<br/>
			附件:<input type="file" name="file"/> <br/>
			省份:<select name="province">
				<option>请选择</option>
				<option value="101">北京</option>
				<option value="102">上海</option>
				<option value="103">广东</option>
				<option value="104">浙江</option>
				<option value="105">陕西</option>
			</select><br/>
			地址:<textarea rows="1" cols="50" name="address"></textarea><br/>
			<input type="submit" value="保存"/><br />
			<input type="reset"/><br />
			<input type="button" name="登录" onclick="alert('登录成功')" value="登录"/>
		</form>
	</body>
</html>