欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

html+css网页设计基础

程序员文章站 2022-03-07 18:21:55
2020年11月11日-星期三第一节网页设计学习课程笔记①前端HTML---后端Java、Python---数据库之间的关系///后端的Java、Python语言是作为沟通前端网页与数据库之间的桥梁②域名和IP地址的关系,域名的作用是用于便于记忆不便记忆的IP地址③的作用效果及使用方法,头文件小图标的设置方法

2020年11月11日-星期三

第一节网页设计学习课程笔记

①前端HTML---后端Java、Python---数据库之间的关系

///后端的Java、Python语言是作为沟通前端网页与数据库之间的桥梁

②域名和IP地址的关系,域名的作用是用于便于记忆不便记忆的IP地址

③<head>的作用效果及使用方法,头文件小图标的设置方法

<head>
		<link rel="shortcut icon" href="//mat1.gtimg.com/www/icon/favicon2.ico" />
		<meta charset="utf-8">
		<title>腾讯新闻</title>
	</head>

④<!-- 
单书名号包裹关键字作为标记,标记分为两类:单标记和双标记 
    标记属性=标记属性值
    可以有多个标记属性,以空格键隔开,不分先后顺序
-->

<body>
		<img src="img/2.jpg" title="在水一方" width="1080px" height="668px" />

		<a href="http://www.baidu.com" target="_blank">百度一下</a>
        <p>河南工业大学</p>
	</body>

 

2020年11月18日星期三

重点:

1、块级元素和行内元素的区分

2、有关列表有序、无序的实现方式

 

<!DOCTYPE html>
<!-- 
单书名号包裹关键字作为标记,标记分为两类:单标记和双标记 
    标记属性=标记属性值
	可以有多个标记属性,以空格键隔开,不分先后顺序
-->
<html>
	<head>
		<link rel="shortcut icon" href="//mat1.gtimg.com/www/icon/favicon2.ico" />
		<meta charset="utf-8">
		<title>腾讯新闻</title>
	</head>
	<body>

		<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
		<!-- 行内元素:高度和宽度包裹内容;不会单独成行 -->
		<img src="img/2.jpg" title="在水一方" width="1080px" height="668px" />
		<a href="http://www.baidu.com" target="_blank">百度一下</a>
		<b>郑州</b>
		<i>郑州</i>
		<del>郑州</del>
		<span style="text-align: center;">郑州</span>
		<div style="text-align: center">郑州大学</div>
		<!-- 块级元素:高度包裹内容高度,但是宽度等同于父标记;单独成行 -->
		<p style="text-align: center;">河南工业大学</p>
		<!-- hn n 1~6 -->
		<h1>郑州</h1>
		<h6>郑州</h6>
		<!-- ordered list ol 有序列表 -->
		<ol>
			<li>语文</li>
			<li>数学</li>
			<li>英语</li>
		</ol>
		<ol start="2" type="I">
			<li>语文</li>
			<li>数学</li>
			<li>英语</li>
		</ol>
		<!-- unodered list ul 无顺序列表 -->
		<ul type="square">
			<li>语文</li>
			<li>数学</li>
			<li>英语</li>
		</ul>
		<ul type="disc">
			<li>语文</li>
			<li>数学</li>
			<li>英语</li>
		</ul>
		<ul start="2" type="disc">
			<li>语文</li>
			<li>数学</li>
			<li>英语</li>
		</ul>
		
	</body>
</html>

 

2020年11月22日星期日

表格的建立

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			table{
				border:1px solid black;
				border-spacing: 0px;
				border-collapse: collapse;
			}
			td,th{
				border:1px solid black;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<th>序号</th><th>姓名</th><th>手机号</th><th>家庭地址</th>
			</tr>
			<tr>
				<td>1</td><td>Tony</td><td>110</td><td>郑州高新区派出所</td>
			</tr>
			<tr>
				<td>2</td><td>Tom</td><td>120</td><td>郑州中心医院</td>
			</tr>
			<tr>
				<td>3</td><td>Pony</td><td>119</td><td>郑州高新区消防中心</td>
			</tr>
	</table>	
	</body>
</html>

 

表格作业

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			table {
				border: 1px solid black;
				border-spacing: 0px;
				border-collapse: collapse;
			}

			td,
			th {
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<th colspan="9">2013年度图书销量统计</th>
			</tr>
			<!-- 第一行 -->
			<tr>
				<td rowspan="2">图书分类</td>
				<td colspan="2" style=text-align:center>一季度</td>
				<td colspan="2" style=text-align:center>二季度</td>
				<td colspan="2" style=text-align:center>三季度</td>
				<td colspan="2" style=text-align:center>四季度</td>
			</tr>
			<!-- 第二行 -->
			<tr>
				<th>销售量</th>
				<th>销售额</th>
				<th>销售量</th>
				<th>销售额</th>
				<th>销售量</th>
				<th>销售额</th>
				<th>销售量</th>
				<th>销售额</th>
			</tr>
			<!-- 第三行 -->
			<tr>
				<td>小说</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>6</td>
				<td>7</td>
				<td>8</td>
				<td>9</td>
			</tr>
			<!-- 第四行 -->
			<tr>
				<td>文艺</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>6</td>
				<td>7</td>
				<td>8</td>
				<td>9</td>
			</tr>
			<!-- 第五行 -->
			<tr>
				<td>励志/成功</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>6</td>
				<td>7</td>
				<td>8</td>
				<td>9</td>
			</tr>
			<!-- 第六行 -->
			<tr>
				<td>童书</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>6</td>
				<td>7</td>
				<td>8</td>
				<td>9</td>
			</tr>


		</table>
	</body>
</html>

 

本节主要讲述内容

1、文本输入框、按钮、单选项栏、选择框、文件选择按钮的实现方式

2、form表单的使用方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- form form表单,用于向服务器提交数据 -->
		<form action="">
			<!-- 隐藏框 -->
			<input type="hidden" />
			<!-- 文本框 -->
			<input type="text" placeholder="请输入用户名" /><br />
			<!-- 密码框 -->
			<input type="password" placeholder="请输入密码" /><br />
			<input type="button" value="登录"><br />
			<!-- 文件框 -->
			<input type="file"/><br />
			<!-- 下拉列表 -->
			<select>
				<option>--请选择--</option>
				<option>河南省</option>
				<option>河北省</option>
			</select><br />
			<!-- 文本框 -->
			<textarea></textarea><br />
			
			<!-- 单选项 -->
			<input type="radio" name="sex" id="male"><label for="male">男</lable>
			<input type="radio" name="sex" id="female"><label for="female">女</lable><br />
			<input type="radio" name="hobby" id="zuqiu"><label for="zuqiu">足球</lable>
			<input type="radio" name="hobby" id="lanqiu"><label for="lanqiu">篮球</lable>
			<input type="radio" name="hobby" id="pingpangqiu"><label for="pingpangqiu">乒乓球</lable><br />
			
			<input type="submit" value="提交">
			<input type="reset" value="取消">
			
			
			</form>
	</body>
</html>

 

本节讲述的内容是表格的合并单元格的实现方式

rowspan、colspan的使用方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			table {
				border: 1px solid black;
				border-spacing: 0px;
				border-collapse: collapse;
			}

			td,
			th {
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<th>序号</th>
				<th>姓名</th>
				<th>手机号</th>
				<th>家庭地址</th>
			</tr>
			<tr>
				<td>1</td>
				<td>Tony</td>
				<td>110</td>
				<td rowspan="3">郑州高新区派出所</td>
			</tr>
			<tr>
				<td>2</td>
				<td>Tom</td>
				<td>120</td>
			</tr>
			<tr>
				<td>3</td>
				<td colspan="2">Pony</td>
			</tr>
		</table>
	</body>
</html>

 

 

 

 

2020年11月25日星期三

CSS的基础使用方法(初步认识CSS语法)

!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			/*div
			{
				background-color: aquamarine;
			}*/
		</style>
		<link rel="stylesheet" href="css/CSS语法文件.css" />
	</head>
	<body>
		<!--border: 1px solid red-->
		<!--CSS样式属性: CSS样式属性值;  CSS样式声明-->
		<div style="border: 1px solid red;text-align: center;">河南工业大学</div>
		<!--
			CSS定义位置:
			a、style标签属性中
			b、style标签中
			c、css 文件中,使用link标签引入该文件
		-->
	</body>
</html>

 以下为上面的css

div{
	background-color: deepskyblue;
}

 

 

 

常用标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		a{
			text-decoration: none;
			}
			#btn{
				width: 200px;
				height: 30px;
				line-height: 30px;
				color: white;
				text-align: center;
				letter-spacing: 15px;
				cursor: pointer;
				border: 1px solid #e85356;
				background-color: #00BFFF;
				}
	</style>
	<body>
		<a href="http://www.baidu.com"> 百度</a>
		
		<div id="btn">登录</div>
		
		<!--
			有些css样式在行内元素中无效,添加display: block
		-->
		<span style="width: 500px;display: inline-block;">hello</span>
		<span style="width: 500px;display: block;">hello</span>
		<div style="display: inline-block;">world</div>
		
		<div style="display: block">高新区</div>
		<div style="display: block">高新区</div>
		<span style="display: block;">郑州</span>
	</body>
</html>

 

选择器的使用方法

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		div {
			/*标签选择器*/
			letter-spacing: 12px;
		}
		
		.text-size {
			/*选择器*/
			font-size: 36px;
		}
		
		#intent {
			text-indent: 43px;
		}
	</style>

	<body>

		<!--为什么?
			     使用style标签属性可以为HTML标签添加样式,
			   但是这种方式和HTML标签进行耦合,不便于后期维护代码
		-->
		<div>郑州高新区</div>
		<span class="text-size">郑州</span>
		<i class="text-size">高新区</i>
		<input id="indent" />
	</body>

</html>

 

font的各种用法(包括缩写)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		p{
			/*font-style:italic;
		    font-weight: bold;
		    font-size: 35px;
		    font-family: pristina;*/
		   font: italic bold 35px "edwardian script itc";
		   /*font
		    * a、顺序:style、weight、size、family
		    * b、必须包含:size  family
		    */   
		}
		a{
			/*font-style:italic;
		    font-weight: bold;
		    font-size: 35px;
		    font-family: pristina;*/
		   font: 35px 华文行楷;}
	</style>
	<body>
		<p>This is a apple.</p>
		<a>这是一个苹果</a>
	</body>
</html>

 

本文地址:https://blog.csdn.net/m0_52291155/article/details/110199111

相关标签: html css html5