HTML学习笔记——基础知识

1.标签

1.title标签、网站关键词、网站描述、实现网页的跳转、单标签、对标签、p标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
        <!-- title标签 -->
        <title>我是title</title>
        
        <!-- 网站关键词 -->
        <meta name='keywords' content="切糕，卖切糕，卖切糕"/>

        <!-- 网站描述 -->
        <meta name='description' content="本网站介绍，要有可读性，100-200字"/>

        <!-- 5秒钟后跳转到百度网 -->
        <meta http-equiv='refresh' content="5;url='http://www.baidu.com'"/>
    </head>



    <body>

        <!-- 单标签 -->
        <img src="dog.jpg" width="100" height="150" title="图片"/>
        
        <!-- 对标签 -->
        <a href="http://www.baidu.com" id="link" class="test">百度</a>

        <strong>我是strong标签</strong>
        <p>我是p标签</p>

    </body>
</html>

2.h1标签、h2标签、font标签、加粗文字、下划线、嵌套

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>

    <!-- h1文章标题/只能用一次 -->
    <h1>我是p标签</h1>

    <!-- h2文章标题/可以用多次/权重较低 -->
    <h2>我是p标签</h2>

    <!-- font/color可以是英文或00ff00/size从1到7 -->
    <font color="red" size="7">我是font标签</font>
    
    <!-- 加粗文字 -->
    <strong>我是strong标签</strong>

    <!-- 嵌套 -->
    <font color="red"><u><del>红色文字加下划线</del></u></font>

</body>
</html>

 

3.pre标签、实体

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>

    <!-- pre标签 -->
    床前明月光
    疑是地上霜
    举头望明月
    低头思故乡
    <pre>
    兰陵美酒郁金香
    玉碗盛来琥珀光
    但使主人能醉客
    不知何处是他乡
    </pre>

    <!-- 实体 -->
        ha标签的写法是这样的：&lt;h1&gt;h1实例&lt;/h1&gt;

</body>
</html>

2.锚链接

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
    
<body>
    <!-- 从新的页面打开 -->
    <!-- <a target="_blank" href="http://www.baidu.com">百度首页</a> -->

    <!-- 锚链接用法 -->
    <div id="top"></div>
    <a href="#first">第一章节</a>
    <a href="#second">第二章节</a>

    <h2 id="first">第一章节</h2>
    <p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p>

    <h2 id="second">第二章节</h2>
    <p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p><p>里面的没有内容</p>

    <a href="#top">回到顶部</a>
</body>
</html>

3.图片

1.显示图片、用a标签实现点击图片跳转、地图标签/点击图片上固定区域跳转

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>

    <!-- 图片 -->
    <img src="dog.jpg" title="一只狗" alt"这是一只狗" usemap="#dogmap" />
    
    <!-- 用a标签实现点击图片跳转 -->
    [<img src="dog.jpg" width="300" height="500" title="一只狗" alt"这是一只狗"/>](http://www.baidu.com)

    <!-- 地图标签/点击图片上固定区域跳转 -->
    <map name="dogmap">
        <area shape="circle" coords="185,198,69" href="http://www.baidu.com" target="_blank" />
        <area shape="circle" coords="385,198,69" href="http://www.sina.com" target="_blank" />
        <area shape="rect" coords="50,50,100,100" href="http://www.sina.com" target="_blank" />
        <!-- 依次写各个点的坐标 -->
        <area shape="poly" coords="0,0,0,50,50,0" href="http://www.hao123.com" />

    </map>


</body>
</html>

2.index图片相对路径

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>

    <!-- ../代表往上反一层 -->
    <img src="../cat.jpg" />

    <!-- 相对路径 -->
    <img src="images/dog.jpg" />
</body>
</html>

4.列表和table

1.有序列表、无序列表和自定义列表

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>

    <!-- 有序列表 -->
    <ol type="a">
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
        <li>有序列表4</li>
        <li>有序列表5</li>
    </ol>

    <!-- 无序列表 -->
    <ul type="circle">
        <li>无序列表1</li>
        <li>无序列表2</li>
        <li>无序列表3</li>
        <li>无序列表4</li>
        <li>无序列表5</li>
    </ul>

    <!-- 自定义列表 -->
    <dl>
        <dt>第一大段</dt>
        <dd>第1小段</dd>
        <dd>第2小段</dd>
        <dd>第3小段</dd>
        <dd>第4小段</dd>
    </dl>
</body>
</html>

2.table

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>

    <!-- border为边框的粗细 -->
    <!-- tr为行，td为列 -->
    <table border='1' width='600' bordercolor="blue" bgcolor="grey" align="center">

        <caption><font color='blue'>课程表</font></caption>

        <tr width="600" height="50" align='center' valign='top'>
            <td rowspan='3'>abc</td>
            <td colspan='2'>123</td>
            
            <td>123</td>
            <td>abc</td>
        </tr>
        <tr>
            
            <td>123</td>
            <td>abc</td>
            <td rowspan='2'>123</td>
            <td>abc</td>
        </tr>
        <tr>
            
            <td>123</td>
            <td>abc</td>
            
            <td>abc</td>
        </tr>

    </table>

</body>
</html>

5.post表单

1.form1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>

    <form action="">
        <input type="text" /><!-- 单行文本 -->    
        <input type="password" /><!-- 密码框 -->
        <input type="radio" /><!-- 单选框 -->
        <input type="checkbox" /><!-- 复选框 -->
        <input type="hidden" /><!-- 隐藏域 -->
        <input type="submit" /><!-- 提交按钮 -->
        <input type="file" /><!-- 文件域 -->
        <input type="reset" value="" /><!-- 重置按钮 -->
        <input type="button" value="" /><!-- 按钮 -->
        <textarea></textarea><!-- 文本区域 -->
        <select>
            <option></option>
        </select><!-- 下拉框 -->
    </form>


</body>
</html>

2.form2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网站用户个人资料调查</title>
</head>

<body>
    <!-- action用来指定接收信息的脚本 -->
    <!-- method属性用来指定数据的传输方式 -->
    <form action="post.php" method='post'>
        
        <input type="hidden" />

        您当前的位置：<input type="text" value='百度网' disabled='disabled'/>
        <br /><br />

        <label for='uname'>用户名：</label><input id='uname' type="text" size='50' maxlength='10' name='uname' value='张三'/>
        <br /><br />

        密码：<input type="password" name='pwd' />
        <br /><br />

        性别：男<input type="radio" name='sex' value='1' checked='checked'/> 女<input type="radio" name='sex' value='0'/>
        <br /><br />

        爱好：篮球<input type="checkbox" name="hobby[]" value='lanqiu' />
            排球<input type="checkbox" name="hobby[]" value='paiqiu' />
            足球<input type="checkbox" name="hobby[]" value='zuqiu' />
            乒乓球<input type="checkbox" name="hobby[]" value='pinbgpangqiu' />
        <br /><br />

        来这里的目的：
        <select name="target" size='2' multiple='multiple'>
            <option value="first">第一</option>
            <option value="second" selected='selected'>第二</option>
            <option value="third">第三</option> 
            <option value="forth">第四</option>
        </select>
        <br /><br />

        个人介绍：<textarea name="jieshao" rows='10' cols='40'></textarea>
        <br /><br />

        个人照片<input type="file" />
        <br /><br />

        <input type="submit" value="更新资料" />
        <input type="reset" value="重置"/>
        <input type="button" value="按钮"/>
        <br /><br />
        

    </form>
</body>
</html>

6.frameset和marquee

1.frameset

效果如百Google度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<!-- <frameset cols='400,*'>
    <frame src="http://www.baidu.com"/>
    <frame src="http://www.sina.com"/>
</frameset> -->

<!-- <frameset rows='200,200,*'>
    <frame src="http://www.baidu.com"/>
    <frame src="http://www.sina.com"/>
    <frame src="http://www.hao123.com"/>
</frameset> -->

<frameset rows='200,*'>
    <frame src='http://www.hao123.com'/>
    <frameset cols='500,*'>
        <frame src='http://www.baidu.com'/>
        <frame src='http://www.sina.com'/>
    </frameset>
</frameset>

</html>

2.marquee标签

实现滚动效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>

    <!-- 从右往左不停滚动 -->
    <marquee>marquee标签</marquee>

    <!-- 从左往右不停滚动/滚动次数为2次 -->
    <marquee direction="right" loop='2'>marquee标签</marquee>
    
    <!-- 从下往上不停滚动/背景颜色/高度宽度/鼠标停止 -->
    <marquee direction="up" bgcolor='grey' width='400' height='100' onmouseover='this.stop()' onmouseout='this.start()'>marquee标签</marquee>

    <!-- 只滚动一次 -->
    <marquee behavior="slide">只滚动一次</marquee>

    <!-- 来回滚动 -->
    <marquee behavior="alternate">来回滚动</marquee>

    <!-- 10个像素/每1000毫秒 -->
    <marquee behavior="scroll" scrollamount='10' scrolldelay='1000'>滚动</marquee>

</body>
</html>

7.选择器

1.ID选择器、交叉选择器、群组选择器、子代选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style type="text/css">
    p{
        color: purple;
        font-size: 25px;
    }
    
    li{
        font-size: 25px;
        line-height: 35px;
    }    

    #two{
        color: red;
    }

/*    .lanse{
        color: blue;
    }*/
    
    /*交叉选择器*/
    li.lanse{
        color:blue; 
    }

    /*群组选择器*/
    #test,.seven{
        color: orange;
    }

    /*子代选择器*/
    li span{
        color: pink;
    }

</style>

</head>

<body>
    <!-- 下面是html的写法 -->
    <font color='blue' size='3'>下面是html的写法</font>
    <font color='blue' size='3'>下面是html的写法</font>
    <font color='blue' size='3'>下面是html的写法</font>
    <font color='blue' size='3'>下面是html的写法</font>
    <font color='blue' size='3'>下面是html的写法</font>
    <font color='blue' size='3'>下面是html的写法</font>

    <!-- 下面是css的写法 -->
    <p>下面是css的写法</p>
    <p>下面是css的写法</p>
    <p>下面是css的写法</p>
    <p>下面是css的写法</p>
    <p>下面是css的写法</p>

    <span>我是ul外面的span标签</span>

    <ul>
        <li>我是第1行li标签
            <span>我是ul里面的span标签</span></li>
        <li id="two">我是第2行li标签</li>
        <li class="lanse">我是第3行li标签</li>
        <li>我是第4行li标签</li>
        <li class="lanse">我是第5行li标签</li>
        <li id="test">我是第6行li标签</li>
        <li class="seven">我是第7行li标签</li>
    </ul>

    <p class="lanse">我是class为lanse的p标签</p>

</body>
</html>

2.子选择器、相邻选择器、属性选择器、伪类选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
    /*子选择器*/
    /*#box>p{
        color:red;
    }*/

    /*相邻选择器*/
    div+p{
        color:blue;
    }

    /*属性选择器*/
    p[name]{
        color:red;
    }

    a{
        font-size: 30px;
        color:blue;
    }
    
    /*伪类选择器*/
    a:hover{
        font-size: 50px;
        color: red;
    }

    #word{
        width: 300px;
        border: 3px solid blue;
        margin: 0 auto;
    }

    p#word:first-letter{
        font-size: 50px;
        color: red;
    }

    div[name]{
        color: yellow;
    }
    
</style>
</head>

<body>

    <div name="box">我是name为box的div元素</div>

    <p id="word">p标签p标签p标签p标签p标签p标签</p>

    <a href="http://www.baidu.com">百度</a>
<br />
<br />
<br />
    <div id="box">
        <div id="son">
            <p>我是son的p标签</p>
        </div>
        <p>我是box的p标签</p>
        <p name="test">我是box的p标签</p>
        <p>我是box的p标签</p>
    </div>
</body>
</html>

3.选择器的优先级

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
    #box{
        font-size: 30px;
        color: red;    
    }

    h1{
        font-size: 40px;
        color: orange;
    }
    /*有优先级*/
    #title{
        color: blue;
    }
</style>
</head>

<body>
    <h1 id="title">今天是星期一</h1>
    <div id="box">
        <p>我是box里面的p标签</p>
        <span>我是box里面的span标签</span>
    </div>

</body>
</html>

8.块级标签、行级标签、图片标签

1.块级标签、行级标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
    p{
        width: 200px;
        height: 100px;
        border: 3px solid red;
    }

    p span{
        color: red;
    }
</style>
</head>

<body>

    <p>今天是<span>星期一</span></p>

    <!-- 块级标签/能设置宽高度 -->
    <p>我是p标签</p>
    <p>我是p标签</p>
    <p>我是p标签</p>
    
    <!-- 行级标签/能和其他标签待在一行 -->
    <span>我是span标签</span>
    <span>我是span标签</span>

    <a href="">百度</a>
    <a href="">百度</a>

</body>
</html>

2.图片标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
    #dog{
        width:300;
        height: 400px;
    }

    #cat{
        width:300;
        height: 400px;
    }

    p{
        color: blue;
        font-size: 30px;
        font-family: 微软雅黑；
        width: 800px;
        height: 200px;
        border: 3px solid blue;
        text-align:center;
        line-height: 200px;
    }
</style>
</head>

<body>

    <img src="dog.jpg" id="dog" />
    <img src="cat.jpg" id="cat" />

    <p>今天是星期一</p>
</body>
</html>

3.给标签设置格式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
/*空两个文字*/
    p{
        width: 300px;
        border: 4px solid blue;
        margin: 0 auto;
        text-indent: 2em;
        line-height: 1.5em;
        /*加粗*/
        font-weight: 700;
        /*倾斜*/
        font-style: italic;
        /*大写*/
        font-variant: small-caps;
    }

</style>
</head>

<body>
    <p>www.baidu.com今天是星期一今天是星期一今天是星期一今天是星期一今天是星期一今天是星期一今天是星期一</p>
</body>
</html>

9.box

1.HTML写法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
    #box{
        width: 300px;
        border: 5px solid blue;
        margin: 0 auto; 
        /*内边距*/
        /*padding: 0px;*/
        /*padding-top: 20px;
        padding-right: 40px;
        padding-bottom: 30px;
        padding-left: 50px;*/

        /*一个参数代表四个方向*/
        /*两个参数，第一个代表上下，第二个代表左右*/
        /*三个参数，第一个代表上面，第二个代表左右，第三个代表下面*/
        /*四个参数，代表上右下左*/
        padding: 20px 30px 100px;
    }
</style>
</head>

<body>

    <div id="box">
        盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型
    </div>
</body>
</html>

2.CSS写法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
    *{
        /*内边距/外边距*/
        padding: 0px;
        margin: 0px;
    }

    #title{
        width: 500px;
        height: 200px;
        border: 4px solid blue;
        padding: 100px;
        background: #ccc;
        /*margin-bottom: 50px;*/
        float: left;
        /*margin-right: 100px;*/
    }

    #box{
        /*左右外边距和累加/上下外边距和合并*/
        width: 400px;
        height: 200px;
        border: 4px solid orange;
        background: #ccc;
        /*margin-top: 50px;*/
        float: left;
        /*margin-left: */
    }

</style>
</head>

<body>
    <h1 id="title">今天是星期一    </h1>

    <div id="box"></div>
</body>
</html>

 

posted @ 2015-07-21 06:53  tonglin0325  阅读(235)  评论(0)  编辑  收藏  举报