html+css零基础入门过程记录2

来年春至新枝发

已于 2022-01-26 22:07:09 修改

阅读量341

点赞数

分类专栏：实践文章标签： css html css3

于 2022-01-25 17:03:12 首次发布

本文链接：https://blog.csdn.net/Adaobaozhao/article/details/122688037

版权

实践专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.效果展示
在这里插入图片描述

2.代码以及知识详细解读

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Document文档标题</title>
	<style type="text/css">
		input{
			border: 1px solid #95;//设计边框
		}
		*{
			margin: 0;//上下间距留白
			padding: 0;//左右间距
		}
		ul{
			list-style:none;//不在ul框定的事物前添加东西
		}
		li{
			margin: 0 10px;//左侧0右侧10像素
			float: left;//从左往右排列
			color: #f40;
			front-weight: bold;//字体加粗
			front-size: 14px;
			height: 25px;//背景框高度
			line-height: 25px;//字体高度
			padding: 0 5px;
		}
		li:hover{//hover指鼠标点击时候的效果
			border-radius: 15px;//加圆框
			background-color: #f40;
			color: #fff;
		}
	</style>
		
</head>//头部写给编辑器看，所以里面的东西是全局的
<body>//写给用户
	h${标题}*6//想实现一下子出现6个标题的效果，但是按tab之后没反应
	h$@-*3//同上
	<p>//段落标签
		<strong>//黑体
			<em>标题</em>//斜体
		</strong>
	</p>开始<hr>//hr：加横线
	<div style="width:100px;height: 100px;background-color:red;">芜湖,空格代表文本分隔符</div>//div是个容器，方便管理
	空格&nbsp;&nbsp;&nbsp;&nbsp;空格
	讲解一个标签div，&lt;div&gt;&nbsp;
	换行： 
	a<br>b a<br><br><br><br><br>b
	单字符：br，hr
	一条线<hr><hr>
	电影
	<ol type ='A' start=2 reversed ="reversed">1/a/A/i/I
		<li>evil</li> 
		<li>death</li>
		<li>live</li>
	//ol排列，用的少，type只有五种：1/a/A/i/I---从B开始，倒着排列
	</ol>
	<ul type="circle">
		<li>天猫</li>
		<li>天猫超市</li>
		<li>聚划算</li>
	//形式上为横着排列，具体看head里面的li？？
	</ul>
	<hr><hr>
	引入图面的3个方式
	1.网上url
	2.本地相对路径
	3.本地绝对路径
	4.alt：网页出错/title:鼠标平移
	<img src="C:\Users\vvv\OneDrive\图片\Saved Pictures\1.png"style="width: 400px;alt="Hannibal";title="Hannibal">
	<hr><hr>
	a--anchor--锚
	a标签的作作用：
	1.超链接
	2.锚点
	3.打电话（、发邮件应用不多）
	4.协议限定符
	1：<br>
	<a href="http://www.baidu.com">www.baidu.com</a>//正常
	<a href="http://www.baidu.com">www.taobao.com</a>//搞笑
	<a href="https://baike.baidu.com/item/%E6%B1%89%E5%B0%BC%E6%8B%94/6968678?fr=aladdin" style="width:100px;height:100px:background-color:red;display: block" target="_blank_"><img src="C:\Users\vvv\OneDrive\图片\Saved Pictures\1.png"style="width: 400px;alt="Hannibal";title="Hannibal">点击图片或文字跳转页面百度百科</a>
	<a href="http://www.baidu.com"target="_blank_">www.baidu.com</a>

	<div id="demo1"style="width:100px;height:100px;background-color:green;">demo1</div>
	2：<br>
	<div id="demo2"style="width:100px;height:100px;background-color:red;">demo2</div>
	<a style="
	display: block;position: fixed;bottom: 100px;right: 100px;border: 1px solid black; height: 50px;width: 200px;background-color: #fcc;" href="#demo1">find demo1</a>
	<a style="
	display: block;position: fixed;bottom: 150px;right: 100px;border: 1px solid black; height: 50px;width: 200px;background-color: #ffc;" href="#demo2">find demo2</a>
	3：<br>
	<a href="tel:156**4074**">给悦姐打电话</a>
	<a href="mailto:heshuichifan20****@163.com">给悦姐发邮件</a>
	4：<br>
	<a href="javascript:while(1){alert('让你手欠')}">点我~ come on！ 来呀！
	</a>
	<hr><hr><hr>
	<form method="get" action="">method发送数据的方式，action发送数据的对象 
		<br>本来
		username:<input type="text" name="username">//有type，有name才能实现提交功能
		password:<input type="password" name="登录">
		---------加一个回车--------
		username:<input type="text">
		<br>
		password:<input type="password">
		<br>
		---------空格新格式--------
		<p>
			username:<input type="text" name="username">
		</p>
		<p>
			password:<input type="password" name="登录">
		</p>
		<input type="submit" value="登录/login">
		<hr><hr><hr>
		//单选题，用name表示这是同一道题
		喜欢的歌曲：
		<input type="radio" name="star">ouu
		<input type="radio" name="star">liknm
		<input type="radio" name="star">m
	//name已经被占用了怎么办？使用value，这个val和前面的name是一个功能
		<input type="radio" name="star1" value="123">ouu
		<input type="radio" name="star1" value="1256">liknm
		<input type="radio" name="star1" value="5469">m
		<input type="submit" value="提交/submit">
		<hr><hr><hr>
		<p>//实现搜索框功能：1）初始状态框内文字为浅灰色-请输入用户名
		2）鼠标聚焦搜索框后文字消失，且保存框内的内容
			username:<input type="text" name="username",style="color:#999"
			value="请输入用户名" onfocus="if(this.value=='请输入用户名'){this.value='';this.style.color='#424242'}"onblur="if(this.value==''){this.value='请输入用户名'}">
		</p>

	</form>




</body>
</html>

不加注释

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Document</title>
	<style type="text/css">
		input{
			border: 1px solid #95;
		}
		*{
			margin: 0;
			padding: 0;
		}
		ul{
			list-style:none;
		}
		li{
			margin: 0 10px;
			float: left;
			color: #f40;
			front-weight: bold;
			front-size: 14px;
			height: 25px;
			line-height: 25px;
			padding: 0 5px;
		}
		li:hover{//hover
			border-radius: 15px;
			background-color: #f40;
			color: #fff;
		}
	</style>
		
</head>
<body>
	h1*6
	h$@-*3
	<p>
		<strong>
			<em>标题</em>
		</strong>
	</p>开始<hr>
	<div style="width:100px;height: 100px;background-color:red;">芜湖,空格代表文本分隔符</div>
	空格&nbsp;&nbsp;&nbsp;&nbsp;空格
	讲解一个标签div，&lt;div&gt;&nbsp;
	换行： 
	a<br>b a<br><br><br><br><br>b
	单字符：br，hr
	一条线<hr><hr>
	电影
	<ol type ='A' start=2 reversed ="reversed">1/a/A/i/I
		<li>evil</li> 
		<li>death</li>
		<li>live</li>

	</ol>
	<ul type="circle">
		<li>天猫</li>
		<li>天猫超市</li>
		<li>聚划算</li>

	</ul>
	<hr><hr>
	引入图面的3个方式
	1.网上url
	2.本地相对路径
	3.本地绝对路径
	4.alt：网页出错/title:鼠标平移
	<img src="C:\Users\vvv\OneDrive\图片\Saved Pictures\1.png"style="width: 400px;alt="Hannibal";title="Hannibal">
	<hr><hr>
	a--anchor--锚
	a标签的作作用：
	1.超链接
	2.锚点
	3.打电话（、发邮件应用不多）
	4.协议限定符
	1：<br>
	<a href="http://www.baidu.com">www.baidu.com</a>
	<a href="http://www.baidu.com">www.taobao.com</a>
	<a href="https://baike.baidu.com/item/%E6%B1%89%E5%B0%BC%E6%8B%94/6968678?fr=aladdin" style="width:100px;height:100px:background-color:red;display: block" target="_blank_"><img src="C:\Users\vvv\OneDrive\图片\Saved Pictures\1.png"style="width: 400px;alt="Hannibal";title="Hannibal">点击图片或文字跳转页面百度百科</a>
	<a href="http://www.baidu.com"target="_blank_">www.baidu.com</a>

	<div id="demo1"style="width:100px;height:100px;background-color:green;">demo1</div>
	2：<br>
	<div id="demo2"style="width:100px;height:100px;background-color:red;">demo2</div>
	<a style="
	display: block;position: fixed;bottom: 100px;right: 100px;border: 1px solid black; height: 50px;width: 200px;background-color: #fcc;" href="#demo1">find demo1</a>
	<a style="
	display: block;position: fixed;bottom: 150px;right: 100px;border: 1px solid black; height: 50px;width: 200px;background-color: #ffc;" href="#demo2">find demo2</a>
	3：<br>
	<a href="tel:156**4074**">给悦姐打电话</a>
	<a href="mailto:heshuichifan20****@163.com">给悦姐发邮件</a>
	4：<br>
	<a href="javascript:while(1){alert('让你手欠')}">点我~ come on！ 来呀！
	</a>
	<hr><hr><hr>
	<form method="get" action="">method发送数据的方式，action发送数据的对象 
		<br>本来
		username:<input type="text" name="username">
		password:<input type="password" name="登录">
		---------加一个回车--------
		username:<input type="text">
		<br>
		password:<input type="password">
		<br>
		---------空格新格式--------
		<p>
			username:<input type="text" name="username">
		</p>
		<p>
			password:<input type="password" name="登录">
		</p>
		<input type="submit" value="登录/login">
		<hr><hr><hr>
		喜欢的歌曲：
		<input type="radio" name="star">ouu
		<input type="radio" name="star">liknm
		<input type="radio" name="star">m

		<input type="radio" name="star1" value="123">ouu
		<input type="radio" name="star1" value="1256">liknm
		<input type="radio" name="star1" value="5469">m
		<input type="submit" value="提交/submit">
		<hr><hr><hr>
		<p>
			username:<input type="text" name="username",style="color:#999"
			value="请输入用户名" onfocus="if(this.value=='请输入用户名'){this.value='';this.style.color='#424242'}"onblur="if(this.value==''){this.value='请输入用户名'}">
		</p>

	</form>




</body>
</html>