HTML基础知识day5

最新推荐文章于 2024-07-17 18:42:40 发布

hzbobhz

最新推荐文章于 2024-07-17 18:42:40 发布

阅读量173

点赞数

文章标签： html

本文链接：https://blog.csdn.net/hzbobhz/article/details/111872344

版权

表单验证

表单验证的好处：可以减轻服务器的压力，可以保证数据的安全性和可行性。

属性	作用
placeholder	在文本框起提示作用，提示你该条文本框该填什么内容。
required	必填项，规定文本框填写内容不能为空，如果该项没有填写任何东西，表单将无法提交。
disabled	禁用的功能，会使该条input无效。
hidden	隐藏的功能，该条input在网页上将不会被显示出来，但提交表单有效。
readonly	只读的功能，该条input无法填写，但是提交表单有效。
pattern	用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form>
		<img src="image/bg_chs.png" />
	<p><h2><strong>登录账号</strong></h2></p>
	<p>昵称<input type="text" name="username" id="" value="" required pattern="[-\w\u4E00-\u9FA5]{4,10}" disabled="disabled"/>长度为4-10个字符</p>
	<p>密码<input type="password" name="pwd" required pattern="[\dA-Za-z]{6,16}">长度为6-16个字符</p>
	<p>确认密码<input type="password" name="rpwd" required="required" pattern="[\dA-Za-z]{6,16}">长度为6-16个字符</p>
	<p>手机号码<input type="text" name="telephone" required pattern="1[3578]\d{9}" placeholder="请输入手机号码">11位数字，以13|5|7|8开头</p>
	<p>邮箱<input type="email" name="mail" required="required"></p>
	<p>年龄<input type="text" name="age" pattern="\d|[1-9]\d|1[0-2]\d" required="required" readonly="readonly"></p>
	<p><input type="image" src="image/btn.bmp"/></p>
	</form>
	</body>
</html>

运行结果：
在这里插入图片描述

从图中可以看出，在input标签里面加入的各个表单验证属性都起到了作用。

CSS

CSS的全称为Cascading Style Sheet（级联样式表）

基本语法结构

选择器{
声明1；
声明2；
…}

示例如下：

<style type="text/css"><!--style标签-->
h1<!--选择器-->{
font-size<!--属性-->=20px<!--值-->;<!--声明1-->
color<!--属性-->=red<!--值-->;<!--声明2-->
</style>
}

引入CSS样式的方式

在HTML中引入CSS样式的方式有三种：行内样式、内部样式表、外部样式表。

方式	放置部位	优先级
行内样式	写在标签内部属性style中	优先级最高。
内部样式	style标签内部（head中）	如果没有相同标签，内层标签的样式优先级更高
外部样式	写在外部的css文件中	如果有相同标签，更靠近body中html代码的优先级更高

内部样式示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{
				color: green;
			}
		</style>
	</head>
	<body>
		<h2>望庐山瀑布</h2>
		<p>日照香炉生紫烟，</p>
		<p>遥看瀑布挂前川。</p>
		<p>飞流直下三千尺，</p>
		<p>疑是银河落九天。</p>
	</body>
</html>

运行结果：
在这里插入图片描述
从图中可以看出来，内部样式使文字的颜色发生了改变。

基本选择器

基本选择器有三种：标签选择器、类选择器、ID选择器。

名称	特点	优先级
标签选择器	直接应用于HTML标签中	优先级最低
类选择器	可以在页面中多次使用	优先级居中
ID选择器	在同一个页面中只能使用一次	优先级最高

hzbobhz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础知识day5

表单验证表单验证的好处：可以减轻服务器的压力，可以保证数据的安全性和可行性。属性作用placeholder在文本框起提示作用，提示你该条文本框该填什么内容。required必填项，规定文本框填写内容不能为空，如果该项没有填写任何东西，表单将无法提交。disabled禁用的功能，会使该条input无效。hidden隐藏的功能，该条input在网页上将不会被显示出来，但提交表单有效。readonly只读的功能，该条input无法填写，但是提交表单有效。
复制链接

扫一扫