HTML+CSS基础

HTML+CSS基础

一.概念

HTML用来写web中需要展现的内容

二.基本写法和运用

1. 标题（自带换行）

<h1> 一级标题</h1>
<h2> 二级标题</h2>
<h3> 三级标题</h3>
···
<h6> 六级标题</h6>

2.无序/有序排列

<!--ul+li 无序-->
<ul>
	<li>ul是</li>
	<li>无序</li>
	<li>排序</li>
</ul>
=====================================================
<!--ol+li 有序-->
<ol>
	<li>ol是</li>
	<li>有序</li>
	<li>排序</li>
</ol>

3. 插入图片

<!--插入图片用img,然后用src指定图片地址,用width和height设置宽度长度属性，单位像素-->
<img src="·····" width="10px" height="15px">

4. 超链接以及href的其他运用

<!--链接地址有时候需要加http协议-->
<a href="···">点击这里跳转</a>
=======================================================
<br/> <!--换行-->
<!--除此之外，还可以写跳转到当前页的某处，如回到顶部等。先要设置一个初始位置，然后再在后面指向该位置进行跳转-->
<a name="初始位置">开始的地方</a>
···
···
···
<a href="#初始位置">点击回到顶部</a>

5.输入input

<input type="text" />  <!--文本内容-->
<input type="password" />  <!--密码，自带隐藏-->
<input type="radio" />男  <!--单选-->
<input type="button" value="按钮"/>  <!--按钮-->
<input type="submit" />  <!--提交-->
<input type="email" />  <!--邮件-->
<input type="checkbox"/>篮球  <!--复选框-->
<input type="number"/>  <!--数字-->
···

6. 表格table与表单form

1>表格

  • 用table标签，
表示表格的行，
表示表格的列 
<table>
  <tr>
    <td>我是第一列</td>
  </tr>
  <tr>
    <td>我是第一列</td>
    <td>我是第二列</td>
  </tr>
</table>

 <!--表格的合并-->
<table>
  <tr>
    <td colspan="2">我是第一列</td>
  </tr>
  <tr rowspan="2">
    <td>我是第一列</td>
    <td>我是第二列</td>
  </tr>
</table>
  • 想合并上下的行，用rowspan，合并几行就写几。想合并左右列，用colspan。
  • 表格的宽度，高度属性用width height设置。
  • 表格的边框是border，可以设置边框的颜色bordercolor，设置边框的宽度border=1px。
  • 单元格之间的距离用cellsapcing

2>表单

  • 表单在表格的基础之上，表单比表格多了提交数据的能力
<!--表单的结构-->
<form>
    <table>
        <tr>
        	<td> </td>
        </tr>
    </table>
</form>
  • 表单默认提交数据是get方法：method="get"，get方法提交数据会将数据在地址栏进行拼接，所以整个看的一目了然，但也正因如此，导致不安全，并且地址栏会变得特别长
  • 表单的另一种提交方法是：method="post"，post方法使得提交数据不可见，提高了安全性，并且对数据多少没有要求，不会使得地址栏很长，但是因此而变得不清晰
  • action="#",将表单数据传送到哪

三.运用css

css就像是给HTML做装修的，让单调的html内容变得美化起来

1. 选择器

  1. 标签选择

    顾名思义，按照不同的标签进行选择

<!--比如将所有<div>这个标签下的内容进行一些属性修改-->
div{
  	font-size=10px;
	color:wight;
}
···
  1. class选择
<!--先设置，再使用 . 进行选择。-->
···
<head>
    ···
    .a{
    	
    }
</head>
<body>
    ···
    <input class="a" type="text" placeholder="请输入用户名">
    ···
</body>
···
  1. id选择
<!--先设置，再使用 # 进行选择。id选择器，id设置的值不可以相同，达到id唯一的效果-->
···
<head>
    ···
    #a{
    	
    }
</head>
<body>
    ···
    <input id="a" type="text" placeholder="请输入用户名">
    ···
</body>
···

2. 三种写法：

①行内css：

​ 直接在一行内添加css

②内部css

​ 写在html的标签内

③外部css

<linked rel="stylesheet"  href="1.css">  <!--使用linked来连接外部css文件。rel固定写法，href指向css文件路径-->

四.一些实例

  1. 用户注册 页面
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="101CSS.css">
	</head>
	<body>
		<form method="post" action="#">
			<table>
				<tr>
					<td>
					<h2 style="padding-left: 105px;">用户注册</h2>
					</td>
				</tr>
				<tr>
					<td>
					<input class="a" type="text" placeholder="用户名"  name="username"/><br/>
					</td>
				</tr>
				<tr>
					<td class="b">
					支持中文，数字，字母，特殊符号组合，4~20字符
					</td>
				</tr>
				<tr>
					<td>
					<input class="a" type="password" placeholder="设置密码" name="pwd"/><br/>
					</td>
				</tr>
				<tr>
					<td class="b">
					字母，数字和特殊符号组合，6~20字符
					</td>
				</tr>
				<tr>
					<td>
					<input class="a" type="password" placeholder="确认密码" name="repwd"/>
					</td>
				</tr>
				<tr>
					<td class="b">
					两次密码输入不一样
					</td>
				</tr>
				<tr>
					<td>
					<input class="a" type="number" placeholder="验证手机" name="phone"/>或
					<a href="#">验证邮箱</a>
					</td>
				</tr>
				<tr>
					<td id="x">
					<input type="radio" name="1"/>我已阅读并同意
					<a href="#">《傻逼协议》</a>
					</td>
				</tr>
				<tr>
					<td>
					<input type="submit" value="立即注册"/>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

.a{
	width: 250px;
	height: 30px;
	margin: 11px;
	padding-left: 10px;
	font-size: 15px;
}
.b{
	
	color: darkgrey;
	font-size: 2px;
	padding-left: 15px;
}
a:hover{
	color: darkseagreen;
}
#x{
   padding-left: 25px;
}
input[type='submit']{
	width: 250px;
	height: 40px;
	font-size: 18px;
	background-color:crimson;
	color: white;
	margin-left: 16px;
	margin-top: 18px;
	border:1px;
}

盒子模型：我们将每个元素看成一个盒子
盒子模型

我们可以设置盒子与盒子的间距margin,内部内容与盒子的间距padding

  1. 注册表单
<form method="post" action="http://www.baidu.com">
			<table bgcolor="bisque" width="450px" border="2px" bordercolor="red" cellspacing="0">
				<tr>
					<td colspan="2">
						<h2 align="center">注册表单</h2><!-- align，选择靠左靠右或者居中 -->
					</td>
				</tr>
				<tr>
					<td>  用户名: </td>
					<td>
						<input type="text" name="username" placeholder="请输入用户名"/><!-- 要发送数据，必须配置name属性 -->
					</td>
				</tr>
				<tr>
					<td>密码:</td>
					<td>
						<input type="password" name="pwd"/>
					</td>
				</tr>
				<tr>
					<td>确认密码:</td>
					<td>
						<input type="password" name="repwd"/>
					</td>
				</tr>
				<tr>
					<td>昵称:</td>
					<td>
						<input type="text" name="nick"/>
					</td>
				</tr>
				<tr>
					<td>邮箱:</td>
					<td>
						<input type="email" name="mail"/>
					</td>
				</tr>
				<tr>
					<td>性别:</td>
					<td>
						<input type="radio" name="sex" value="1"/>男 <!-- name值相同，可以实现单选效果-->
						<input type="radio" name="sex" value="0"/>女 <!--必须配置value,否则只会提交on-->
					</td>
				</tr>
				<tr>
					<td>爱好:</td>
					<td>
						<input type="checkbox" name="like" value="1"/>篮球
						<input type="checkbox"name="like" value="2"/>足球
						<input type="checkbox"name="like" value="3"/>乒乓球
					</td>
				</tr>
				<tr>
					<td>城市:</td>
					<td>
						<select name="city" ><!-- 下拉选择框 -->
							<option value="1">北京</option><!-- 选项 -->
							<option value="2">上海</option>
							<option value="3">苏州</option>
							<option value="4">安徽</option>
							<option value="5">天津</option>
							<option value="6">杭州</option>
							<option value="7">香港</option>
							<option value="8">台湾</option>
							<option value="9">黑龙江</option>
							<option value="10">吉林</option>
							<option value="11">内蒙古</option>
							<option value="12">广州</option>
							<option value="13">四川</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>头像:</td>
					<td>
						<input type="file" name="headp"/>
					</td>
				</tr>
				<tr>
					<td>验证码:</td>
					<td>
						<input type="text" name="code"/><br/>
						<img src="a/验证码.png">
						<input type="button" value="点我换一张">
					</td>
				</tr>
				<tr>
					<td>自我描述：</td>
					<td>
						<textarea>输入内容：</textarea><!-- 文本域 -->
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center"><!-- align，选择靠左靠右或者居中 -->
						<input type="submit"/>
						<input type="button" value="重置">
					</td>
				</tr>
			</table>
		</form>
  • 要提交数据必须设置name属性
  • value值最好用数字代替，毕竟数字占用的字节小

  1. 学生信息管理系统

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="stuCSS.css" >
	</head>
	<body bgcolor="azure">
		<form  method="get">
			<table  bordercolor="black" bgcolor="beige" width="400px">
				<tr>
					<td align="center">
						<h2>学生信息管理系统</h2>
					</td>
				</tr>
				<tr>
					<td>姓名：<br/>
						<input class="a" type="text" name="sname" placeholder="请输入姓名"/><!-- placeholder提示信息 -->
					</td>
				</tr>
				<tr>
					<td>年龄：<br/>
						<input class="a" type="number" name="sage" placeholder="请输入年龄"/>
					</td>
				</tr>
				<tr>
					<td>
						性别：
						<input class="c" type="radio" name="sex" value="1" checked="checked"/>男<!--checked默认选中-->
						<input class="c" type="radio" name="sex" value="0"/>女
					</td>
				</tr>
				<tr>
					<td>
						爱好：
						<input type="checkbox" name="like" value="1"/>乒乓
						<input type="checkbox" name="like" value="2"/>足球
						<input type="checkbox" name="like" value="3"/>篮球
					</td>
				</tr>
				<tr>
					<td>
						学历：
						<select name="edu">
							<option value="1">博士</option>
							<option value="2">硕士</option>
							<option value="3">研究生</option>
							<option value="4">本科</option>
							<option value="5">专科</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>入学日期：<br/>
						<input type="date" name="time"/>
					</td>
				</tr>
				<tr>
					<td align="center">
						<input type="submit"/>
						<input type="button" value="取消"/>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>


    .a{
	height: 15px;
	width: 200px;
	border-radius: 10px;
	border: 1px solid blue;
	margin-top: 5px;
	padding:10px ;
}
input[type='submit']{
	background-color: #0000FF;
	color: white;
	width: 60px;
	height: 30px;
	font-size: 15px;
}
input[type='button']{
	background-color: #228B22;
	color: white;
	width: 60px;
	height: 30px;
	font-size: 15px;
}
.c{
	margin-right: 8px;
}
posted @ 2021-07-06 20:33  J九木  阅读(6)  评论(0)    收藏  举报