Web最最基础1
网页元素HTML
列表
(1)无序列表
<ul>
<li>****</li>
<li>***</li>
</ul>
更多样式:<ul type="circle|square">
(2)有序列表
<ol start="100">
<li>****</li>
<li>***</li>
</ol>
更多样式:<ol type="A|a|i|I">
表单元素
(1)文本框
<input type="text" maxlength="20" placeholder="请输入用户名...">
(2)密码框
<input type="password" maxlength="16" >
(3)单选按钮
<input type="radio" name="sex" checked>男</input>
<input type="radio" name="sex">女</input>
(4)下拉列表
<select>
<option>请选择--</option>
<option>北京</option>
<option>广东</option>
</select>
(5)复选框
<input type="checkbox" name="jiuye">游戏测试</input>
<input type="checkbox" name="jiuye">银行测试</input>
(6)多行文本框
<textarea rows="8" cols="30">
包括教育背景、工作经验、性格特征等
</textarea>
###(7)上传文件
<input type="file">
(8)按钮
<button>确定提交</button>
<input type="submit" value="注册">
<input type="reset" value="重置">
二、CSS美化网页
1、CSS选择器
(1)Html标签选择器:当前网页中同一种标签会设置成指定的样式
(2)class标签选择器:当前网页中相同的class处会设置成指定的样式
(3)id标签选择器:当前网页中某一处需要设置成唯一的样式
2、CSS样式的应用方法
(1)行内:位于中的某个标签内,只对该标签生效。
(2)内嵌:位于,针对该html文件生效
(3)外部样式:将样式代码单独存在css文件中,在html文件的head中使用link链接法将css文件与网页文件进行绑定
<link rel="stylesheet" type="text/css" href="gushi.css">
三、框架
1、上下结构:
<html>
<head></head>
<frameset rows="20%,*" bordercolor="#0000FF" border="5">
<frame name="top" src=“1.html">
<frame name="bottom" src=“2.html">
</frameset>
</html>
2、左右结构
<html>
<head></head>
<frameset cols="20%,*" bordercolor="#0000FF" border="5">
<frame name="left" src=“1.html">
<frame name="right" src=“2.html">
</frameset>
</html>
3、上中下结构
<html>
<head></head>
<frameset rows="20%,*,10%" bordercolor="#0000FF" border="5">
<frame name="top" src=“1.html">
<frame name="middle" src=“2.html">
<frame name="bottom" src=“3.html">
</frameset>
</html>
4、上下结构,下面又分成左中右两部分
<html>
<head></head>
<frameset rows="20%,*" bordercolor="#0000FF" border="5">
<frame name="top" src=“1.html">
<frameset cols="20%,*,10%" bordercolor="#0000FF" border="5">
<frame name="left" src=“1.html">
<frame name="right" src=“1.html">
<frame name="right" src=“1.html">
</frameset>
</frameset>
</html>
5、上中下结构,中间拆分成左中右三部分
<html>
<head></head>
<frameset rows="10%,*,10%" bordercolor="#0000FF" border="5">
<frame name="top" src=“1.html">
<frameset cols="20%,*,10%" bordercolor="#0000FF" border="5">
<frame name="left" src=“1.html">
<frame name="middle" src=“1.html">
<frame name="right" src=“1.html">
</frameset>
<frame name="bottom" src=“1.html">
</frameset>
</html>