1. 表单
2. input元素
2.1 密码框 同 文本框
<tr><td width = "100px" > 密码 </td><td><input type = "password" size = "10" maxlength = "10" placeholder = " 请输入密码 " /></td></tr>
2.2 单选按钮:radio
name
属性必须写,标记为一组单选
value
值必须有,
提交区分
checked:
特殊属性: 默认被选中
<td>男 <input type = "radio" name = "sex" value = "1" />女 <input type = "radio" name = "sex" value = "2" checked /></td>
2.3 复习框: checkbox
name
属性必须写,标记为一组多选
value
值必须有,
提交区分
checked:
特殊属性: 默认被选中
<td> 游戏 </td><td><input type = "checkbox" name = "games" value = "LOL" checked/> LOL<input type = "checkbox" name = "games" value = "CSGO" /> CSGO<input type = "checkbox" name = "games" value = "DNF" /> DNF</td>
2.4 各种按钮
2.4.1 submit: 用于提交的按钮
value
:
按钮的内容
2.4.2 button: 普通按钮,不能提交
2.4.3 image: 图片按钮,可以提交
2.4.4 button标签: 也是可以提交
2.4.5 reset: 重置按钮
<input type = "submit" value = " 提交 " /> 能提交<input type = "button" value = " 按钮 " /> 不能提交<input type = "image" src = "../imgs/btn.gif" /> 能提交<button> button 标签按钮 </button> 能提交<input type = "reset" value = " 重置 " > 重置到页面初始状态
2.5 其他input:的type: 新增
color
: 选色器
:
value=#FF00FF
number:
数值
min
最小值,
max
最大值,
step
增量
range:
数值范围
min
最小值,
max
最大值,
step
增量
date:
日期
time:
时间
search:
搜索框,多个了
x
email
: 邮箱的验证
url: url
的验证
<tr><td> 喜欢颜色 </td><td><input type = "color" value = "#00FF00" /></td></tr><tr><td> 数值 1 </td><td><input type = "number" min = "0" max = "100" step = "2" />range范围0 <input type = "range" min = "0" max = "100" step = "2" /> 100</td></tr><tr><td> 生日 </td><td><input type = "date" value = "2000-01-01" /><input type = "datetime" /><input type = "time" /></td></tr><tr><td> 搜索 </td><td><input type = "search" /></td></tr><tr><td> 邮箱 </td><td><input type = "email" /></td></tr><tr><td> 主页 </td><td><input type = "url" /></td></tr>
3. textarea: 多行文本输入框
rows:
显示的行数
cols:
显示的列数, 和
text
的
size
不准
textarea
的内容就是
value;
注意不写内容
·
<tr><td> 个人的简介 </td><td><textarea rows = "10" cols = "10" ></textarea></td></tr>
4. 下拉框: select>option
4.1 select
size:
显示的个数
multiple
: 多选
4.2. option:
value
: 用于提交的值
label:
等同于内容
selected:
最后一个特殊属性。默认被选中
4.3. optgroup: 分组
<tr><td>省 </td><td><select name="p"><select name="p" size="5" multiple="multiple"><option value="-1">请输入</option><option value="1">辽宁</option><option value="2" selected label="吉林"></option><option value="3">黑龙江</option><option value="4">内蒙古</option><option value="5">河北</option></select></td></tr><tr><td>国家 </td><td><select name="p"><optgroup label="亚洲"><option value="1">中国</option><option value="2">日本</option><option value="3">韩国</option><option value="4" selected>新加波</option></optgroup><optgroup label="非洲"><option value="5">南非</option><option value="6">尼日利亚</option><option value="7">坦桑尼亚</option><option value="8">喀麦隆</option></optgroup></select></td></tr>
5. 其他的
5.1 Label:
for
: 属性关联某个
input
的
id
。 点击获取焦点
<td width = "100px" ><label for = "psd" > 密码 </label></td><td><input type = "password" id = "psd" size = "10" maxlength = "10"placeholder = " 请输入密码 " /> </td>
5.2 fieldset> legend包裹输入项
<fieldset><legend align = "center" > 这是注册内容 </legend>。。。。
5.3 form属性关联formid:
<form id = "form0" >...</form>这个 form0 中提交会带着 输入项<input type = "text" name = "outform" form = "form0" />
6.HTML5语义标签
块的语义标签:
article :
文章, 强调独立性
section:
章节, 并列性
aside:
侧边栏
main:
主体
header:
头部
footer:
脚
nav:
导航
<header>header<nav> nav </nav></header><main>main</main><aside>aside</aside><article>article</article><section>section</section><footer>footer</footer>
7. 框架和内联框架
7.1. frameset: 没有body
rows:
定义分行
cols:
定义分列
7.1.1 fram标签
src
;
关联子页面
<frameset rows = "10%, *" ><frame src = "top.html" /><frameset cols = "200px, *" ><frame src = "left.html" /><frame src = "main.html" name = "a1" /></frameset></frameset>
left.html中的链接的target=”a1" 框架中的a1发送跳转
<ul><li><a href = "https://www.baidu.com" target = "_top" > 百度 </a></li><li><a href = "./lesson09.html" target = "a1" > 表单 </a></li><li><a href = "./lesson10_ 语义 .html" target = "a1" > 语义块 </a></li></ul>
7.2 iframe .内联框架
main <a href = "https://www.bilibili.com/" target = "if" > B 站 </a><a href = "https://www.37.com/" target = "if" > 37 玩 </a><iframe src = "https://www.bilibili.com/" frameborder = "0" width = "100%"height = "600" name = "if" ></iframe>
8 CSS: Cascading Style Sheet 层叠样式表
8.1 css能放在哪?
1.
内联样式,行内样式: 写在
style
属性上
2.
内部样式:
style
标签定义
3.
外部样式: 通过
link
标签引入
4. @import url();
页面加载完标签之后再加载样式
<!DOCTYPE html><html lang = "en" ><head><meta charset = "UTF-8" ><meta http-equiv = "X-UA-Compatible" content = "IE=edge" ><meta name = "viewport" content = "width=device-width, initial-scale=1.0" ><title> Document </title><!-- 外部样式 --><link rel = "stylesheet" href = "lesson12.css" type = "text/css" /><style type = "text/css" >@import url ( './lesson12_1.css' );/* 内部样式 */h1 {border : 1px solid black ;}</style></head><body><!-- 内联样式,行内样式 --><h1 style = "color: red" > hello css </h1></body></html>lesson12.cssh1 {background-color: rgba(255, 0, 0, 0.5);}lesson12_1.cssh1 {border-radius: 16px;}
9 选择器:
元素选择器
: *
通配 。
权重
1
类选择器: 用
.
定义,
权重
10
id
选择器,用
#
定义,
权重
100
!important
; 可以忽略权重
<style>/* id 选择器 */#a1 {color : saddlebrown ;}/* 元素选择器 */* {color : red ;}h1 {color : green !important ;}/* 类选择器 */.bgg {color : yellow ;}.bgr {background-color : green ;}</style></head><body><div><h1 id = "a1" class = "bgg bgr" > hello world h1 </h1><span class = "bgg" > 行内元素 </span> <h1> hello world h1 </h1><h1> hello world h1 </h1><span> 行内元素 </span><span> 行内元素 </span><strong> strong 强调 </strong></div><div><h1> hello world h1 </h1><span> 行内元素 </span></div></body>
派生选择器,后代选择器。用空格
空格,
后代就可以
>
一代子,一级子。
+:
同辈
,
相邻,弟弟。
~
: 同辈,
弟弟
<!DOCTYPE html><html lang = "en" ><head><meta charset = "UTF-8" ><meta http-equiv = "X-UA-Compatible" content = "IE=edge" ><meta name = "viewport" content = "width=device-width, initial-scale=1.0" ><title> Document </title><style>/* id 选择器 *//* #a1 {color: saddlebrown;} *//* 元素选择器 *//* * {color: red;}h1 {color: green !important;} *//* 类选择器 *//* .bgg {color: yellow;}.bgr {background-color: green;} *//* div h1 {font-style: italic;} *//* 一级子 *//* div > h1 {font-style: italic; }/* 相邻的弟弟 *//* h1 + div {text-decoration: underline;} *//* 所有的弟弟 */div ~ h1 {text-shadow : 10px 10px 1px red ;}</style></head><body><h1> div 外的 h1 </h1><hr /><div><h1 id = "a1" class = "bgg bgr" > hello world h1 </h1><xxx><h1 id = "a1" class = "bgg bgr" > DIV 的孙子 </h1></xxx><span class = "bgg" > 行内元素 </span><h1> hello world h1div 的哥哥 </h1><div> hello world h1 的 弟弟 </div><div> hello world h1 二弟弟 </div><h1> div 的 1 弟弟 </h1><span> 行内元素 </span><h1> div 的 3 弟弟 </h1><span> 行内元素 </span><strong> strong 强调 </strong><h1> div 的 15 弟弟 </h1></div><div><h1> hello world h1 </h1><span> 行内元素 </span></div></body></html>