HTML基础知识day5

表单验证

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

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

代码如下:


<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>

运行结果:
HTML基础知识day5_第1张图片
HTML基础知识day5_第2张图片
从图中可以看出,在input标签里面加入的各个表单验证属性都起到了作用。



CSS

CSS的全称为Cascading Style Sheet(级联样式表)

基本语法结构

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

示例如下:

<style type="text/css">
h1{
font-size=20px;
color=red;
style>
}

引入CSS样式的方式

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

方式 放置部位 优先级
行内样式 写在标签内部属性style中 优先级最高。
内部样式 style标签内部(head中) 如果没有相同标签,内层标签的样式优先级更高
外部样式 写在外部的css文件中 如果有相同标签,更靠近body中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>

运行结果:
HTML基础知识day5_第3张图片
从图中可以看出来,内部样式使文字的颜色发生了改变。

基本选择器

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

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

你可能感兴趣的:(html)