HTML
表单学习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action:表单提交的位置可以是网站,也可以是一个请求的位置
method:post,get提交方式
get方式提交:我我们可以在url中看到我们要提交的信息,不安全,高效
post:比较安全,可以传输大文件
-->
<form action="图像标签.html"method="post">
<!--文本输入框:input type = "text"-->
<!-- input type = "text"
name="username"value="周子龙好帅"
maxlength="8"最长能写几个
size="30"-->
<p>名字:<input type = "text" name="username"placeholder="请输入用户名"required maxlength="8"size="30"></p>
<!--密码框:input type = "passward"-->
<p>密码: <input type="password" name="pwd"hidden value="990110"></p>
<!-- 单选框-->
<p>性别：
<input type="radio"value="boy"name="sex"disabled/>男
<input type="radio"value="girl"name="sex"/>女
</p>
<!-- 多选框-->
<p>爱好：
<input type="checkbox"value="sleep"name="hobby">睡觉
<input type="checkbox"value="code"name="hobby"checked>敲代码
<input type="checkbox"value="chat"name="hobby">聊天
<input type="checkbox"value="game"name="hobby">游戏
</p>
<!-- 按钮
input type="button" 按钮
input type="image" 图片按钮
<input type="submit"> 提交按钮
<input type="reset"> 重置按钮
-->
<p>按钮：
<input type="button"name="btnl"value="点击变长">
<!-- <input type="image"src="../resour/image/1709706565089.jpg">-->
</p>
<!-- 下拉框-->
<p>下拉框：
<select name="列表名称">
<option value="china">中国</option>
<option value="us">美国</option>
<option value="选项的值"selected>瑞士</option>
<option value="选项的值">印度</option>
<option value="选项的值">日本</option>
</select>
</p>
<!-- 文本域-->
<p>反馈：
<textarea name="textarea"cols="30" rows="10"></textarea>
</p>
<!-- 文件域-->
<p>
<input type="file"name="files">
<input type="button"value="上传"name="upload">
</p>
<!-- 邮件验证-->
<p>邮箱：
<input type="email"name="email"required>
</p>
<!-- URL-->
<p>URL：
<input type="url"name="url"required>
</p>
<!-- 数字-->
<p>数字：
<input type="number"name="num"max="100"min="0"step="1">
</p>
<!-- 滑块-->
<p>音量：
<input type="range"min="0"max="100"name="voice"step="2">
</p>
<!-- 搜索框 -->
<p>搜索：
<input type="search"name="search">
</p>
<!-- 增强鼠标可用性-->
<p>
<label for="mark">你点我试试</label>
<input type="text"id="mark">
<!-- 与id有关系-->
</p>
<p>自定义邮箱：
<input type="text"name="diymail"pattern="^([1-9][0-9]*)+(.[0-9]{1,2})?$"></input>
</p>
<input type="submit">
<input type="reset"value="清空表单">
</form>
</body>
</html>
HTML的总结
html的基本结构
网页的基本特征标题标签title
基本标签
-
h1，h2...标题标签
-
p段落标签
-
br换行标签
-
hr水平线标签
-
strong粗体 em斜体
图像标签img
超链接
- 描链接href---需要一个标记
- 功能性链接
行内元素和块元素
列表标签
- ol有序
- ul无序
- dl自定义
表格标签
表格table
行 tr
列 td
- colspm跨列
- rowspan跨行
媒体元素
- 图片=====一定要规范分类
- 音频
网页的简单布局
- 头部header
- 主体seaction
- 脚部footer
内连框架
- lframe
表单
- 上方代码
表单应用
- 隐藏域
- 只读
- 禁用
表单的初级验证
- 用户提示placrhoder
- 非交互性requested
- 正则表达式parrent
CSS
三种导入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 内部-->
<style>
h1{
color: gold;
}
</style>
外部样式
<link rel="stylesheet"href="css/style.css">
</head>
<body>
<!--行内样式，在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: aqua">我是标题</h1>
</body>
</html>
<!--优先级：就近原则-->
/*外部样式*/
h1{
color:red;
}
扩展：外部样式两种写法
- 链接式 HTML标签
- 导入式@import是CSS2.1特有的
1.选择器
作用：选择页面上面的某一个
2.1基本选择器
-
标签选择器 h1选择一类标签
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> <!--标签选择器会选择到这个封面上全部的元素--> h1{ color: aqua; } p{ font-size: 81px; } </style> </head> <body> <h1>学Java</h1> <h1>学Java</h1> <p>听狂神说</p> </body> </html> -
类 选择器 class：选择所有class一致的
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--类选择器的格式= .class的名称{} 好处，可以多个标签归类，是同一个class，可以复用 --> <style> .zzl{ color: gold; } .kuangshen{ color: black; } .jyl{ color: aqua; } </style> </head> <body> <h1 class="zzl">标题1</h1> <h1 class="kuangshen">标题1</h1> <h1 class="jyl">标题1</h1> <p class="zzl">标题1</p> </body> </html> -
id 选择器：唯一！#id
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*id选择器
#id名称{} id必须唯一
不遵循就近原则，固定的
id选择器》class选择器》标签选择器
*/
#zzl{
color: aqua;
}
#jyl{
color: black;
}
.zsn{
color: gold;
}
h1{
color: brown;
}
</style>
</head>
<body>
<h1 class="zsn"id="zzl">标题1</h1>
<h1 id="jyl">标题2</h1>
<h1 class="zsn">标题3</h1>
<h1 class="zsn">标题4</h1>
<h1>标题5</h1>
</body>
</html>
优先级：id选择器》class选择器》标签选择器
2.2 层次选择器
-
后代选择器 ：在某个元素的后面 祖爷爷 爷爷 爸爸 你
/*后代选择器 body后面的所有p标签 */ body p{ background: brown; } </style> -
子选择器 一代仅仅后面一代
/*子选择器*/ body>p{ background: brown; } -
相邻兄弟选择器 同辈相邻
/*兄弟选择器*/只有一个 .active+p{ background: brown; } -
通用选择器
/*通用选择器对下不对上*/ .active~p{ background: brown; }