admin 管理员组文章数量: 887021
web day01(html,form,table)
课前讲解
HTML
1、HTML的概述
a.HTML不是一门编程语言是一门标签语言
b.HTML本质是一个文档
c.HTML是由标签组成的文档
d.HTML Hyper Text Markup Language(超文本语言)
2、HTML的基本结构
<!DOCTYPE HTML>
<HTML><HEAD><title>我的第一个页面</title><meta http-equiv="Content-type" content="text/html; charset=UTF-8" />头部分：书写配置信息，书写在head中的内容会优先加载</HEAD><BODY>体部分：<br/>书写页面 构成的标签<!--空格和回车在页面中显示的是一个空格--><hr/><hr>是一个画线标签<br/><font color="red">我是一个font</font><br/>'曹阳'老师"一米五"</BODY>
</HTML>
3、HTML语法
a.标签可以书写成标签对的形式，由起始标签和结束标签组成<起始标签></结束标签>
b.标签可以书写成自闭标签的形式
<br/>------换行符
<hr/>------画一条线
c.html中的多个空格、制表符和回车都会合并成一个空格在页面中显示
d.标签属性由属性名和属性值组成
属性名=“属性值”
注意：单引号和双引号都可以使用，必须使用英文的符号
e.转义字符
< <
> >
" "
' '
空格
f.HTML注释
<!--HTML注释-->
4、HTML标签
a.字体标签
<font>font标签</font>
属性：
| color属性 | 颜色名称red green |
|---|---|
| Hex | #AAAAAA六位十六进制数值 |
| rgb | rgb(0,255,255) |
| size属性 | 1~7 默认大小为3 |
b.标题
<!DOCTYPE HTML>
<HTML><HEAD><title>html标签</title><meta http-equiv="Content-type" content="text/html; charset=UTF-8" /></HEAD><BODY><font color="red" size='7'>我是一个font</font><br/><h1 align="left">我是一级标题</h1><h2 align="center">我是二级标题</h2><h3 align="right">我是三级标题</h3><h4>我是四级标题</h4><h5>我是五级标题</h5><h6>我是六级标题</h6><h7>我是七级标题</h7><ol><li>刘备</li><li>关羽</li><li>张飞</li></ol><ul type="disc"><li>春</li><li>夏</li><li>秋</li><li>冬</li></ul><ul type="square"><li>春</li><li>夏</li><li>秋</li><li>冬</li></ul><ul type="circle"><li>春</li><li>夏</li><li>秋</li><li>冬</li></ul><img src="C:/Users/16902/Desktop/img/1.jpg" alt="此处是个女孩" width="500px" height="500px"/><br/><img src="C:/Users/16902/Desktop/img/20.jpg" alt="此处是个头像" width="50%" height="50%"/></BODY>
</HTML>
属性：
| align | 对齐方式 |
|---|---|
| left | 左对齐 |
| center | 居中对齐 |
| right | 右对齐 |
| justify | 自适应 |
c.列表标签
有序列表
<ol>
<li></li>
<li></li>
<li></li>
</ol>
无序列表
<ul>
<li></li>
<li></li>
<li></li>
</ul>
属性：
| type | 图标类型 |
|---|---|
| disc | 实心圆 |
| square | 实心方块 |
| circle | 空心圆 |
d.img图片标签
<img src="" alt=""/>
属性：
src 图片路径
alt 代替图片出现的文字
e.a 锚标签
a标签可以作为一个超链接的标签使用
a标签的功能
1）在页面内部跳转—书签
a）埋下书签（创建一个包含id或者name属性的a标签）
<a name="tag"></a>
b）提供跳转标签（创建一个包含href属性的a标签，href属性值为#name）
<a href="#tag"></a>
属性：
| name | 标签名称 |
|---|---|
| href | 跳转的目标地址 |
| target | _self在当前窗口打开页面 _blank新打开窗口创建页面 |
2）在页面间跳转=
<a href="">百度一下</a>
<!DOCTYPE HTML>
<HTML><HEAD><title>html标签2</title><meta http-equiv="Content-type" content="text/html; charset=UTF-8" /></HEAD><BODY><a href="" target="_blank">百度一下</a><a name="tag"></a><h1 align="center">曹阳历险记</h1><p>曹阳只身潜入荒岛，开始找找<br/>找<br/>找<br/>找<br/>找<br/>找<br/>找<br/>找<br/>找<br/>找<br/>找<br/>找<br/>找<br/>找<br/>找<br/>找<br/>找<br/>找<br/>饿死了<br></p><a href="#tag">点击返回上层</a></BODY>
</HTML>
table的重要属性
border 边框宽度
cellspacing 单元格之间的空白距离
cellpadding 边框与单元格内容之间的空白距离
bgcorlor 背景颜色
bordercolor 边框颜色
width 宽度
align 对齐方式
tr的重要属性
align 对齐方式
bgcolor 背景颜色
th/td的重要属性 (th字体加粗且居中)
align 对齐方式
bgcolor 背景颜色
width 宽度
height 高度
colspan 可横跨列数
rowspan 可横跨的行数
caption 定义表格的标题
<!DOCTYPE HTML>
<HTML><HEAD><title>table表格</title><meta http-equiv="Content-type" content="text/html; charset=UTF-8" /></HEAD><BODY><table border="2px" cellspacing="0" cellpadding="5px" bgcolor="#FF3456" bordercolor="yellow" width="500px"><caption align="bottom">web</caption><tr align="right" bgcolor="#5566DD"><td>大数据</td><td rowspan="2">Java</td></tr><tr><td align="center" bgcolor="#3FFCCD" width="100px" height="100px">曹阳</td><!--<td>李帅</td>--></tr><td colspan="2">曹阳2</td><!--<td>李帅帅</td>--></tr></table></BODY>
</HTML>
form表单标签
1、form表单标签
提交数据的方式
a、在地址栏中手动拼接参数。这种方式如果遇到较多的参数和较复杂的参数就会难以拼接，但是拼接很有可能出现错误所以不推荐直接在地址栏中书写参数
b、利用form表单提交数据，在form表单中书写的内容，提交时会自动拼接在浏览器的地址栏中
2、form使用
属性;
form 提交的地址
method 提交的方式
method：一共有7种，常用的由两种get 和post
get提交 ：
参数拼接在地址栏中
安全系数低，参数拼接的长度一般不超过1KB
post提交：
在底层以流的形式提交，安全系数较高，在理论上传递的参数长度不受限制
input输入框
type属性：
name 标签名称。并且在form表单中需要被提交的数据标签身上必须要包含一个name属性。否则不会被提交
value 当前标签具有的值
下拉框：
select option
文本域：textarea
<!DOCTYPE HTML>
<HTML><HEAD><title>form表单</title><meta http-equiv="Content-type" content="text/html; charset=UTF-8" /></HEAD><BODY><form action="" method="get">姓名：<input type="text" name="username" value="1123" readonly="readonly" disabled="disabled"/><br/>密码：<input type="password" name="password"/><br/>性别：<input type="radio" name="gender" value="male">男<input type="radio" name="gender" value="female" />女<br/>爱好：<input type="checkbox" name="like1" value="sing" />唱<input type="checkbox" name="like2" value="dance" />跳<input type="checkbox" name="like3" value="playball" />打篮球<br/>上传：<input type="file"/><br/>按钮：<input type="button" value="点击变帅" />提交：<input type="submit"/>重置：<input type="reset"/><br/>隐藏框：<input type="hidden"/ value="3">图片提交框：<input type="image" src="img\1.jpg"/><br/>城市信息：<select name="city" size="2" multiple="multiple"><option value="bj">北京</option><option selected="selected" value="sh">上海</option><!--具有select属性不管其值是什么都会默认选择--><option value="tj">天津</option></select><br/>自我介绍：<textarea rows="10" cols="10"></textarea></form></BODY>
</HTML>
练习：
<!DOCTYPE HTML>
<HTML><HEAD><title>注册表单练习</title><meta http-equiv="Content-type" content="text/html; charset=UTF-8" /></HEAD><BODY><form action="" method="post"><table border="2" bordercolor="#FF1493" bgcolor="#F5BEB3" cellspacing="0" cellpadding="5PX" align="center"><caption><h1><font color="#FF1493">注册表单</font></h1></caption><tr><td>用户名：</td><td><input type="text" name="username"/></td></tr><tr><td>密码：</td><td><input type="password" name="password"/></td></tr><tr><td>确认密码：</td><td><input type="password" name="password2"/></td></tr><tr><td>昵称：</td><td><input type="text" name="nickname"/></td></tr><tr><td>邮箱：</td><td><input type="text" name="email"/></td></tr><tr><td>头像：</td><td><input type="file" name="head"/></td></tr><tr><td>性别：</td><td><input type="radio" name="gender" value="male"/>男<input type="radio" name="gender" value="female"/>女</td></tr><tr><td>所在城市：</td><td><select name="city"><option>北京</option><option>上海</option><option>天津</option><option selected="selected">唐山</option></select></td></tr><tr><td>自我介绍：</td><td><textarea name="test" rows="3" cols="60">请输入个人介绍</textarea></td></tr><tr><td>验证码：</td><td><input type="text"/><img src="jj.jpg"/><input type="button" value="点我换一张" /></td></tr><tr><td colspan="2" align="center"><input type="submit"/><input type="reset"/></td></tr></table></form></BODY>
</HTML>
css概述
1、页面构成与样式修改
a.页面构成初期，使用table组成页面，但是面对复杂的页面组成时，table难以完成对应的布局格式
b.后来产生新的页面组成方式，利用div+css两门技术实现页面的组成和样式的修改
2、div 盒子模式
div 块级模式
span 行内元素 多个元素同在一行
p 块级元素 每个元素自己独占一行
<!DOCTYPE HTML>
<HTML><HEAD><title>注册表单练习</title><meta http-equiv="Content-type" content="text/html; charset=UTF-8" /></HEAD><BODY><div id="test" class="test">我是一个div</div><div id="test" class="test">我是一个div</div><div id="test" class="test">我是一个div</div><div id="test" class="test">我是一个div</div><span class="test">我是一个span</span><span class="test">我是一个span</span><span class="test">我是一个span</span><span class="test">我是一个span</span><p>我是p元素</p><p>我是p元素</p><p>我是p元素</p></BODY>
</HTML>
3、css
css就是层叠样式表
a.页面中的多个元素都需要进行相同的样式修改，若一个一个修改则会造成代码的冗余和维护的不便利性
b.页面中的大量标签可以通过层叠样式表来进行批量的修改
c.css的语法
css的注释：/**/
4、CSS的四种引入方式
方式一：通过style属性指定元素的样式
方式二：童年过style标签定义样式，可以在head标签中定义style标签设定样式
方式三：引入外部样式文件，可以在html的head标签中定义link标签来修饰当前页面
方式四：可以通过@import url(xxx.css)在style标签的内部引入一个css文件
<!DOCTYPE HTML>
<HTML><HEAD><title>css演示</title><meta http-equiv="Content-type" content="text/html; charset=UTF-8" /><!--第二种引入css的方式--><style style="text/css">/*第四种引入css的方式*/@import url(1.css);/*div{color: #aaabbd;background-color: #DD12FF;}*/</style><!--第三种引入css的方式--><!--<link rel="stylesheet" href="1.css"/>--></HEAD><BODY><!--第一种引入css的方式--><div style="color: #ABC123;background: #11FFF2">我是一个div</div><div>我是一个div</div><div>我是一个div</div><div>我是一个div</div></BODY>
</HTML>
div{color: #aaabbd;background-color: #DD12FF;}
如果多种方式为同一个元素设定了样式，则样式起作用的原则是：优先级由低到高（编辑样式的代码哪个离标签近，哪个有效）
5、css选择器
基本选择器
#id选择器
#div1{
}
类选择器
.class1{
}
元素名选择器
元素名{
}
<!DOCTYPE HTML>
<HTML><HEAD><title>css选择器</title><meta http-equiv="Content-type" content="text/html; charset=UTF-8" /><style type="text/css">/*id选择器*//*#div1{color: #DDD123;background-color: #FF123D;}*//*类选择器*//*.class1{color: #3FD123;background-color: #BC123D;}*//*元素选择器*//*div{color:#1223AA;background:#D33223;}*//*后代选择器*//*div span{color:#1223AA;background:#D33223;}*//*子元素选择器*//*div>span{color:#1223AA;background:#D33223;}*//*相邻兄弟选择器*//*div+span{color:#1223AA;background:#D33223;}*//*属性选择器*//*div[name]{color:#1223AA;background:#D33223;}*/a:LINK{color:#dda3AA;background:#D33223;}a:visited{color:#12dddA;background:#D33223;}a:active{color:#1223AA;background:#D33223;}a:hover{color:#df23AA;background:#D33223;}</style></HEAD><BODY><div id="div1">我是一个div</div><div class="class1">我是一个div</div><div class="class1">我是一个div</div><div class="class2">我是一个div</div><div id="div1">我是一个div</div><div>这是父类div<span> 这是子类span</span><p><span> 这是孙子span</span></p></div><span>这是父类span</span><div name="cy">这是曹阳</div><div name="ls">这是lishuai</div><a href="#">点击跳转</a></BODY>
</HTML>
扩展选择器
a、后代选择器
div中所有的span元素选中
div span{}
b、子元素选择器
div>span{}
c、相邻兄弟选择器
div+span{}
属性选择器
选择包含name属性的div
div[name]{
}
选择包含name='ls’的div
div[name=‘ls’]{
}
多元素选择器（分组选择器）
#id,.class,span{}
伪元素选择器
:link 未点击的状态
:visited 被点击过的状态
:hover 鼠标移动到元素之上但是仍然是未点击的状态
:active 被鼠标点击着的状态
总结：选择器选择越具体的样式越优先生效，距离标签越近的css样式越优先生效
本文标签： web day01(html form table)
版权声明：本文标题：web day01(html,form,table) 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/free/1698658017h313085.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论