JavaWeb(一) - - - HTML+CSS+JavaScript

最新推荐文章于 2022-04-21 10:00:50 发布

zicl

最新推荐文章于 2022-04-21 10:00:50 发布

阅读量279

点赞数

分类专栏： JavaWeb 文章标签： html

本文链接：https://blog.csdn.net/weixin_48430685/article/details/108925591

版权

JavaWeb 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了HTML的基本元素，如表单、列表和超链接的使用，以及CSS的内嵌式、链入式、行内式和导入式引入方法。此外，还讲解了CSS选择器和常见样式属性的应用。JavaScript部分则涉及DOM操作和常见事件的处理。内容全面，适合初学者入门。

摘要由CSDN通过智能技术生成

①HTML基本知识

1.表单

1.1 表单分组

<html>
<head>
    <title>表单</title>
</head>
<body>
    <fieldset><!--将表单分组-->
        <legend>注册新用户</legend><!--配合fieldst使用 定义分组的标题-->
        <form action="#" method="post"><!--表单提交的地址为# 空-->
            <table cellpadding="2" align="center">
                <tr>
                    <td align="right">用户名：</td>
                    <td>
                        <input type="text" name="username" />
                    </td>
                </tr>
                <tr>
                    <td align="right">密码：</td>
                    <td>
                        <input type="password" name="password" />
                    </td>
                </tr>
                <tr>
                    <td align="right">性别：</td>
                    <td><!--单选和多选的name每一组要相同-->
                        <input type="radio" name="gender" value="male" /> 男
                        <input type="radio" name="gender" value="fmale" /> 女
                    </td>
                </tr>
                <tr>
                    <td align="right">兴趣：</td>
                    <td>
                        <input type="checkbox" name="interest" value="film" /> 看电影
                        <input type="checkbox" name="interest" value="code" /> 敲代码
                        <input type="checkbox" name="interest" value="game" /> 玩游戏
                    </td>
                </tr>
                <tr>
                    <td align="right">头像：</td>
                    <td>
                        <input type="file" name="photo" />
                    </td>
                </tr>
                <tr>
                    <td colspan="2" align="center">
                        <input type="submit" value="注册" />
                        <input type="reset" value="重填" />
                    </td>
                </tr>
            </table>
        </form>
    </fieldset>
</body>
</html>

1.2 表单多行文本框

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form action="#" method="post">
        评论：<br />
        <!--多行文本框 每行显示10个字符 显示5行-->
        <textarea cols="60" rows="5">
            评论区：
        </textarea>
        <br />
        <br />
        <input type="submit" value="提交" />
    </form>
</body>
</html>

2.列表

2.1 无序列表

2.1.1 普通设置无序列表的不同类型

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>无序列表</title>
</head>
<body>
    <font size="10">无序列表</font>
    <br />
    <font size="9">
        <!--项目列表符号类型-->
        <ul>
            <li>无</li>
            <li type="disc">type默认值 实心圆</li>
            <li type="square">正方形</li>
            <li type="circle">空圆</li>
        </ul>
    </font>
</body>
</html>

2.1.2 CSS定义无序列表的不同类型

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS定义无序列表的不同类型</title>
</head>
<body>
    <p><b>注意：</b> 在 HTML 4中 ul 属性已废弃，HTML5 已不支持该属性，因此我们使用 CSS 代替来定义不同类型的无序列表如下：</p>
    <h4>圆点列表：</h4>
    <ul style="list-style-type:disc">
        <li>Apples</li>
        <li>Bananas</li>
        <li>Lemons</li>
        <li>Oranges</li>
    </ul>
    <h4>圆圈列表：</h4>
    <ul style="list-style-type:circle">
        <li>Apples</li>
        <li>Bananas</li>
        <li>Lemons</li>
        <li>Oranges</li>
    </ul>
    <h4>正方形列表：</h4>
    <ul style="list-style-type:square">
        <li>Apples</li>
        <li>Bananas</li>
        <li>Lemons</li>
        <li>Oranges</li>
    </ul>
</body>
</html>

2.2 有序列表

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>有序列表</title>
</head>
<body>
    <!-- 有序列表 -->
    <ol>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>
    <!-- 从50开始往下有序排列 -->
    <ol start="50">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>
    <!-- 以大写字母开始往下有序排列 -->
    <ol type="A">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>
    <!-- 以罗马数字列表开始往下有序排列 -->
    <ol type="I">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>
</body>
</html>

2.3 自定义列表

<!DOCTYPE html>

<html>
<head> 
<meta charset="utf-8"> 
	<title>自定义列表</title> 
</head>
<body>
	<!-- 自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。
	每个自定义列表项的定义以 <dd> 开始。 -->
	<h4>一个自定义列表：</h4>
	<dl>
		<dt>Coffee</dt>
			<dd>- black hot drink</dd>
		<dt>Milk</dt>
			<dd>- white cold drink</dd>
	</dl>
</body>
</html>

3.超链接

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>超链接标记</title>
</head>
<body>
    <!-- target 打开方式 -->
    <!--1 _self 原窗口打开 默认属性 -->
    <!--2 _blank 新窗口打开 -->
    <!--3 _parent 父框架集 中打开 -->
    <!--4 _top 整个窗口中打开 -->
    HuJinya的博客网址：<a href="https://www.hujinya.com" target="_blank">www.hujinya.com</a>
</body>
</html>

②CSS基本知识

1.Div+CSS

在HTML文档中引入CSS有4种方式
优先关系是：行内样式＞内嵌式＞导入式＞链接式
外部CSS文件不能包含任何的HTML标签

1.1 内嵌式

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>div+CSS-内嵌式CSS</title>
    <!-- 内嵌式引入CSS只对其所在的HTML页面有效 -->
    <!-- style 标记一般位于 title 标记后面 -->
    <!-- 便于被提前加载和解析 -->
    <style type="text/css">
        /* 定义 h2 标记居中效果 */
        h2 {
            text-align:center;
        }
        /* 定义 div 标记的样式*/
        /*边框:1像素 实线 红色 div宽:300像素 高:80像素 文字颜色:蓝色 文字大小:28像素 外边距:80像素*/
        div {
            border:1px solid red;
            width:300px;
            height:80px;
            color:blue;
            font-size:28px;
            margin:80px;
        }
    </style>
</head>
<body>
    <h2>我会自己居中</h2>
    <div>
        div 意为：分割、区域
    </div>
</body>
</html>

1.2 链入式

外部 style.css 代码

/* 定义 h2 标记居中效果 */
h2{
	text-align:center;
}
/* 定义 div 标记的样式*/
/*边框:1像素 实线 红色 div宽:300像素 高:80像素 文字颜色:蓝色 文字大小:28像素 外边距:80像素*/
div{
	border:1px solid red;
	width:300px;
	height:80px;
	color:blue;
	font-size:28px;
	margin:80px;
}

HTML代码

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>CSS链入式</title>
    <!-- <link>元素可定义两个链接文档之间的关系 -->
    <!-- 使用link标记将外部样式表文件链接到HTML文件中 -->
    <link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <h2>我会自己居中</h2>
    <div>
        div 意为：分割、区域
    </div>
</body>
</html>

1.3 行内式

也称为内联样式

<!DOCTYPE html>

<html>
<head>
	<title>行内式CSS样式表</title>
</head>
<body>
	<!-- 当特殊的样式需要应用到个别元素时，就可以使用行内(内联)样式。 -->
	<p style="color: red; margin-left: 50px">
	his is a paragraph
	</p>
</body>
</html>

1.4 导入式

外部 style.css 代码

/* 定义 h2 标记居中效果 */
 h2{
     text-align:center;
 }
 /* 定义 div 标记的样式*/
 /*边框:1像素 实线 红色 div宽:300像素 高:80像素 文字颜色:蓝色 文字大小:28像素 外边距:80像素*/
 div{
     border:1px solid red;
     width:300px;
     height:80px;
     color:blue;
     font-size:28px;
     margin:80px;
 }

外部 red.css 代码

h2 {
	color: red;
}

HTML代码

<!DOCTYPE html>

<html>
<head>
	<title>导入式CSS样式表</title>
	<!-- 页面会先加载HTML，然后再去加载CSS，
		这样就会造成页面样式的延迟。 -->
	<style type="text/css">
		/* 导入外部的 style.css 文件 */
		@import url("style.css");
		/* 导入外部的 red.css 文件 */
		@import url("red.css");
	</style>
</head>
<body>
	<h2>我会自己居中、变红</h2>
    <div>
        div 意为：分割、区域
    </div>
</body>
</html>

2.CSS选择器

标记选择器
类选择器
id选择器
通配符选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS选择器的使用</title>
		<style type="text/css">
			/* 标记选择器的定义 */
			h2 {
				color: pink;
				font-size: 20px;
			}
			/* 类选择器的定义 */
			.red_center {
				color: red;
				text-align: center;
			}
			.green {
				color: green;
			}
			.font18 {
				font-size: 18;
			}
			/* id 选择器的定义*/
			#bold {
				font-weight: bold;
			}
			#font24 {
				font-size: 24px;
			}
			/* 通配符选择器的定义 */
			/* 匹配页面中所有的元素，实际开发中不建议使用 */
			* {
				margin: 10px; /* 定义外边距 */
				padding: 0px; /* 定义内边距 */
			}
		</style>
	</head>
	<body>
		<!-- 通配符选择器设置整个页面10px外边距，0px内边距 -->
		<!-- 标记选择器的使用 -->
		<h2>粉色的字体，大小20px</h2>
		<!-- 类选择器的使用-->
		<!-- 同一个类选择器可以被多个标记引用，一个HTML标记也可以同时引用多个类选择器。-->
		<h1 class="red_center">设置文字为红色,居中</h1>
		<p class="green font18">设置文字为绿色，字号为18px</p>
		<p class="red_center font18">设置文字为红色，居中，字号为18px</p>
		<!-- id选择器的使用-->
		<p id="bold">设置字体为粗体</p>
		<p id="font24">设置字号为24px</p>
		<!-- 错误写法 引用了同样的id选择器，虽然浏览器没有报错，但这种做法是不被允许的，因为在JavaScript语言中id值是唯一的。
		<p id="font24">设置字号为24px</p>
		-->
		<p id="font24">设置字号为24px</p>
		<!-- 错误写法，同一个标记对象不能同时引用多个id选择器，这样写不会有任何的CSS样式产生
		<p id="font24 body">设置字号为24px，字体为粗体</p>
		-->
		<p id="font24 body">设置字号为24px，字体为粗体</p>
	</body>
</html>

3.CSS常用属性

<style type="text/css">
	/* 设置外边距属性 上右下左*/
	.margin {
		margin: 2px 2px 2px 2px;
	}
	/* 设置填充属性 上右下左 */
	.padding {
		padding: 2px 2px 2px 2px;
	}
	/* 置多个背景图像(并指定他们的位置) 可指定多个属性值，各属性值以空格分隔，没有先后顺序 */
	/* 红色背景 背景图片为1.jpg 图像不平铺 右对齐 顶部对齐 */
	.background {
		background: #FF0000 url("1.jpg") no-repeat right top;
	}
	/* font-family属性指定一个元素的字体。可以把多个字体名称作为一个"回退"系统来保存。
	如果浏览器不支持第一个字体，则会尝试下一个。 */
	.font-family {
		font-family: "宋体" "楷体";
	}
	/* 设置边框的宽度、样式、颜色 5像素，虚线，红色 */
	.border {
		border: 5px dotted red;
	}
	/* 设置字体的样式，小型的大写字体，字体粗细，文字大小 ，行高和文字的字体 */
	/* 斜体，加粗，大小12像素，行高35像素，字体为楷体 */
	.font {
		font: italic bold 12px/35px "楷体";
	}
	/* 用于指定对象的高度 auto:默认值 */
	.height {
		height: 18px;
	}
	/* 设置行间的距离(行高) normal:默认值 */
	.line-height {
		line-height: 5px;
	}
	/* 设置指定文本的颜色 */
	.color {
		color: red;
	}
	/* 设置文本的对齐方式 */
	.text-align {
		text-align: center;
	}
	/* 设置文本的显示样式 line-through(删除线) overline(上划线) 
	underline(下划线) blink(闪烁效果) none(默认) */
	.text-decoration {
		text-decoration: blink;
	} 
	/* 设置元素的垂直对齐方式 text-top(把元素的顶端与父元素字体的顶端对齐)……*/
	.vertical-align {
		vertical-align: top;
	}
	/* 用于指定对象的显示形式 inline(默认):此元素会被显示为内联元素，元素前后没有换行符。 */
	.display {
		display: ;
	}
</style>

③JavaScript基本知识

1.DOM相关知识

#
#
#

JavaScript事件

onclick鼠标单击某个对象；ondblclick鼠标双击某个对象；onmousedown某个鼠标键被按下；onmouseup某个鼠标键松开；onmousemove鼠标被移动；onmouseout鼠标从某元素移开；onmouseover鼠标被移到某个元素之上；onfocus元素获得焦点；onblur元素失去焦点；onchange用户改变域的内容；onabort图像加载被中断；onerror当加载文档或图像发生某个错误；onload某个页面或图像被完成加载；onkeydown某个键盘的键被按下；onkeypress某个加盘的键被按下或按住；onkeyup某个键盘的键被松开；onreset重置按钮被点击；onresize窗口或框架被调整尺寸；onselect文本被选定；onsubmit提交按钮被点击；onunload用户退出页