HTML CSS 基础-CSDN博客

本文链接：https://blog.csdn.net/weixin_42610967/article/details/101707107

可结合W3school学习:https://www.w3school.com.cn/

示例一：

标题，图片，超链接

<!DOCTYPE html>
<html><!--开始-->
	     <!--头部-->
	<head>
		<meta charset="utf-8" />
		<title>标题</title>
		<!--css-->
		<!--javascript-->
	</head>
<!--内容-->
	<body>
		<!--标题>
		<h1>111</h1>
		<h2>111</h2>
		<h6>111</h6>
		
		<!--图片
			src  图片路径
			width 宽
			height 高
			alt 如果图片路径不正确时候，不显示的时候就显示 alt中的文字
		-->
		<img src="img/1.jpg" width="500px" height="200px" alt="图片名"/>
		
		<!--a超链接
			href  需要跳转到的网站路径  或自己的工程路径
		-->
		<a href="https://www.baidu.com/">我要跳了</a>
		
		<!--区域块
			style 风格  
			background-color背景颜色
		-->
		<div style="width: 200px;height: 200px;background-color: blanchedalmond;">
			dddddd
		</div>	
	</body>
	
</html><!--结束-->

示例二：

表单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>form表单</title>
	</head>
	<body>
		<!--form  表单
			action 相当于a标签中的href
		-->
		<form action="https://www.baidu.com/" method="get">
			
			<!-- input 默认    文本 type="text" -->
			用户名<input  name="name"/><br><!--<br>换行-->
			密码<input type="password" name="pwd"/><br>
				
			<!--多选   爱好  多选框  checked="checked"  默认选择-->
			爱好<input type="checkbox"  name="like" value="1" checked="checked"/> 钓鱼
			<input type="checkbox"  name="like" value="2"/> 煮鱼
			<input type="checkbox"  name="like" value="3"/> 吃鱼
			<input type="checkbox"  name="like" value="4"/> 打代码 <br>
			
			性别:<input type="radio" name="sex" value="1" />男
			<input type="radio" name="sex" value="2" />女
			<input type="radio" name="sex" value="3"  checked="checked"/>未知<br>
				
				<!--文本域-  cols 宽    rows高  行 -->
				<textarea cols="100" rows="20"></textarea>
			<!--input标签   type 为提交    value值-->
			<br>
			<input type="submit" value="提交1" />
			
		</form>
	</body>
</html>

示例三：

表格，行，列

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>table表格</title>
	</head>
	<body>
		
		<!--以后在修改过程中必用  hidden 隐藏-->
		<input type="hidden" name="" id="" value="数据库查询出来的值" />
		
		<!--只读不能修改-->
		<input type="text"  value="你不可以修改" readonly="readonly"/>
		
		
		<!--
			SELECT * FROM emp;

			SELECT * FROM dept;
			
			SELECT * FROM stu;
			把表中数据展示
		-->
		<form>
			<!--table 表格  border表格的边框 -->
			<table border="1" width="50%" cellpadding="0" cellspacing="0">
				<!--tr代表一行-->
				<tr>
					<!--td代表一列-->
					<td>sid</td>
					<td>sname</td>
					<td>age</td>
					
				</tr>
				
				<!--第二行-->
				<tr>
					<!--td代表一列-->
					<td>1列</td>
					<td>2列</td>
					<td>3列</td>
					
				</tr>
				
				<!--第三行-->
				<tr>
					<!--td代表一列-->
					<td>1列</td>
					<td>2列</td>
					<td>3列</td>
					
				</tr>
				
			</table>
			
			
		</form>
		
	</body>
</html>

示例四：

一，div定义样式的三种方法：
法1，

<--直接通过style定义样式
 width 该块宽度
 height 该块高度
 background-color 该块背景色
-->
<div style=" width: 200px; height: 200px; background-color: red">值1</div>

法2，

<--在body内写div，通过id为其命名，然后在style内为其设置样式-->
<head>
		<style>			
			#div1{
				width: 200px;
				height: 100px;
				background-color: gold;
			}
		</style>
	</head>
<body>
		<div id="div1">dddd</div>

</body>

法3，
通过link引用外部样式

    <head>
		<!--引用外部样式-->
		<link rel="stylesheet" href="../css/my.css" />
	</head>
	
    <body>
		<div id="div2">dddd</div>
	</body>

然后在css文件夹中写my.css项目，项目代码如下，通过该代码定义div2的格式

#div2{
	width: 300px;
	height: 300px;
	background-color: blue;
}

示例五：

id选择器，类选择器，标签选择器
id>类>标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>id选择器   类选择器  标签选择器</title>
		
	<style type="text/css">
		/*id选择器    是使用#   */
		#div1{
			width: 300px;
			height: 300px;
			background-image: url(../img/13339320_183302468194_2.jpg);
		}
		/*类选择器  使用.*/
		.div2{
			width: 300px;
			height: 300px;
			background-color: #0000FF;
		}
		/*标签选择器*/
		div{
			width: 100px;
			height: 200px;
			background-color: hotpink;
		}
	</style>
	</head>
		<!--<body style="background-image: url(../img/13339320_183302468194_2.jpg);">-->
	<body>
		
		<div id="div1"></div>
		
		<div class="div2"></div>
		
		
		<div >
			
		</div>
		用户名：<input  />
		密码：<input  />
		
	</body>
</html>