javaweb html和css基础知识

最新推荐文章于 2024-07-11 23:52:48 发布

8秒记忆的鱼丶

最新推荐文章于 2024-07-11 23:52:48 发布

阅读量150

点赞数

分类专栏： javaweb

本文链接：https://blog.csdn.net/ckx12138/article/details/107830134

版权

javaweb 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

html格式化代码 cirl + shift + f

html 一些标签

<a></a>超链接 <a href = "">
<p></p>段落
<h1></h1>......标题
<table></table>表格
<img src = "">图片
<tr></tr>行
<td></td>列
<div></div>区域
<form></form>表单

<input type = "" value = "" name = "">
type{hidden(不见了) radio（单选框）checkbox（复选框）
text（文本框）password（密码框）submit（提交按钮）}

<ul>列表无序（type）决定展示的样式
<li></li>
</ul>
<ol>列表有序
<li></li>
</ol>
<br/>换行
<hr/>一条平行线

css (样式样式优先级)

行内样式 >内部样式 >外部样式

标签选择器的优先级

id选择器 >class选择器 >标签选择器

javascript

js关键字——>function

声明函数使用function关键字，不需要指定返回值类型，形参也不需要指定类型
先声明，再调用
函数也可以当作参数来传递
函数带上括号是调用，不带括号是传递。

form表单实操（加一个超链接）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
		<a href="演示.html">好美的天空</a>
		</div>
		<!-- 表单 -->
		用户名：<input type="text" name="userName" /><br />
		密码：<input type="password" name = "password" /><br />
	    性别：
		<input type="radio" name="gender" value="boy" checked="checked" />男
	    <input type="radio" name="gender" value="girl">女<br />
	    爱好：
		<input type="checkbox" name="habit" value="commputergame" />电脑游戏
		<input type="checkbox" name="habit" values="swimming" />游泳
		<input type="checkbox" name="habit" value="java" />java
	</body>
</html>

结果如下：

css样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css</title>
		<link type="text/css" rel="stylesheet" href="style.css" />
		<!-- <style type="text/css">
			p{
				color: black;
				background-color: aliceblue;
			}
		</style> -->
	</head>
	<body>
		<!-- <p style="color: aqua; font-size: 20px;">窗前明月光，疑是地上霜</p> -->
	    <p>窗前明月光，疑是地上霜</p>
	</body>
</html>

style.css

p {
	 color: blue;
	 background-color: yellow;
  }

css选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 1. -->
		<!--<style type="text/css">
		p {
			 color: blue;
			 background-color: yellow;
		}
		</style> -->
		
		<!-- 2. -->
		<!-- <style type="text/css">
		  #p1 {
			 color: blue;
			 background-color: yellow;
		  }
		  </style> -->
		  
		  <!-- 3. -->
		  <!-- <style type="text/css">
		    .p1 {
		  	 color: blue;
		  	 background-color: yellow;
		    }
		  </style> -->
		  
		<style type="text/css">
		  #p1,.selectp {
			 color: blue;
			 background-color: yellow;
		  }
		</style>
	</head>
	<body>
		<!-- <p>落霞与孤鹜齐飞，秋水共长天一色</p>
		<p>落霞与孤鹜齐飞，秋水共长天一色</p>
		<p>落霞与孤鹜齐飞，秋水共长天一色</p>
		<p>落霞与孤鹜齐飞，秋水共长天一色</p> -->
		
		<!-- <p id="p1">落霞与孤鹜齐飞，秋水共长天一色</p>
		<p id="p1">落霞与孤鹜齐飞，秋水共长天一色</p>
		<p id="p1">落霞与孤鹜齐飞，秋水共长天一色</p>
		<p id="p1">落霞与孤鹜齐飞，秋水共长天一色</p> -->
		
		<!-- <p class="p1">落霞与孤鹜齐飞，秋水共长天一色</p>
		<p class="p1">落霞与孤鹜齐飞，秋水共长天一色</p>
		<p class="p1">落霞与孤鹜齐飞，秋水共长天一色</p>
		<p class="p1">落霞与孤鹜齐飞，秋水共长天一色</p> -->
		
		<p id="p1">落霞与孤鹜齐飞，秋水共长天一色</p>
		<p>落霞与孤鹜齐飞，秋水共长天一色</p>
		<p class="selectp">落霞与孤鹜齐飞，秋水共长天一色</p>
		<p class="selectp">落霞与孤鹜齐飞，秋水共长天一色</p>
	</body>
</html>