Web最最基础2

445 阅读3分钟
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>    

菜鸟教程
W3School