HTML

1、W3C标准

HTML_第1张图片

2、XHTML文档基本结构(Div+Css)

HTML_第2张图片

注:实现向XML的过渡

3、HTML标签

HTML_第3张图片

4、基本标签

    1)标题标签

HTML_第4张图片

    2)图像标签

HTML_第5张图片

3)段落标签

HTML_第6张图片

4)样例

<!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>
    <hr/>
 <p><img src="images/钱塘湖春行.jpg" alt="钱塘湖春行"/></p>
    作者:白居易<br/>
    孤山寺北贾亭西,水面初平云脚低。<br/>
    几处早莺争暖树,谁家新燕啄春泥。<br/>
    乱花渐欲迷人眼,浅草才能没马蹄。<br/>
    最爱湖东行不足,绿杨阴里白沙堤。<br/>
</body>
</html>

HTML_第7张图片

5、超链接

    1)语法

HTML_第8张图片

    2)分类

HTML_第9张图片

    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>
</head>
<body>
    <h1>钱塘湖春行</h1>
    <hr/>
 <p><a name="about"></a><img src="images/钱塘湖春行.jpg" alt="钱塘湖春行"/></p>
    作者:白居易<br/>
    孤山寺北贾亭西,水面初平云脚低。<br/>
    几处早莺争暖树,谁家新燕啄春泥。<br/>
    乱花渐欲迷人眼,浅草才能没马蹄。<br/>
    最爱湖东行不足,绿杨阴里白沙堤。<br/>
    <p><a href="#about">锚链接</a></p>
    <p><a href="https://www.baidu.com/" target="_blank">新窗口</a></p>
    <p><a href="mailto:[email protected]" >功能性链接</a></p>
</body>
</html>

HTML_第10张图片

6、特殊符号与注释

HTML_第11张图片

 HTML_第12张图片

7、标签规范

HTML_第13张图片

8、列表

HTML_第14张图片

    1)无序列表

HTML_第15张图片

    2)有序列表

HTML_第16张图片

9、表格

    1)基本结构

HTML_第17张图片

    2)语法

HTML_第18张图片

    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>
</head>
<body>
    <table border="1" cellpadding="0" cellspacing="0" width="60%">
        <tr>
            <td colspan="3">跨3列</td>
        </tr>
        <tr>
            <td rowspan="2">跨2行</td>
            <td>1800</td>
            <td>2015-01-12</td>
        </tr>
        <tr>
            <td>100</td>
            <td>2015-02-22</td>
        </tr>
    </table>
</body>
</html>

10、表单

    1)语法

HTML_第19张图片

    2)表单元素的基本格式

HTML_第20张图片

    3)文本输入框

HTML_第21张图片

    4)单选按钮

HTML_第22张图片

    5)复选框

HTML_第23张图片

    6)按钮

HTML_第24张图片

    7)下拉列表

HTML_第25张图片

HTML_第26张图片

HTML_第27张图片

    8)多行文本域

HTML_第28张图片

    9)样例

<!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>form表单</title>
</head>
<body>
 <form action="" method="post" name="maForm">
     <p>E-mail:<input name="email" type="text" size="20"/></p>
        <p>用户名:<input name="userName" type="text" size="20"/></p>
        <p>&nbsp;&nbsp;密码:<input name="pwd" type="password" size="20"/></p>
        <p>&nbsp;&nbsp;性别:
         <input name="sex" type="radio" value="女"/>男
            <input name="sex" type="radio" value="男" checked="checked"/>女
        </p>
        <p>复选框:
         <input name="course1" type="checkbox" value="java"/>java
            <input name="course2" type="checkbox" value="c#" checked="checked"/>c#
        </p>
        <p><input name="btn1" type="submit" value="提交"/>
           <input name="btn2" type="reset" value="重置"/>
           <input name="btn3" type="button" value="普通"/>
        </p>
        <p>课程选择:
            <select name="course">
                <option value="1">java</option>
                <option value="2" selected="selected">xml</option>
                <option value="3">html</option>
            </select>
        </p>
        <p>
            <textarea name="content" cols="20" rows="10">多行文本域
            </textarea>
        </p>
    </form>
</body>
</html>

HTML_第29张图片

 

你可能感兴趣的:(w3c标准)