前言HTML5+CSS3的学习路线

基础班要学的内容框架
html5是最常见的标签。CSS3是没有兼容性的样式

一、基础知识

1、web标准

web标准的构成：结构（html）、表现（CSS）、行为（javascript）三个方面
在这里插入图片描述

2、html标签

学习目标
html学习目标

2.1 html的基本语法规范

1、尖括号包围的关键字
2、双标签
3、单标签

2.2 标签关系

双标签关系分为包含关系和并列关系

2.3 html基本结构标签

2.4 html开发工具

在这里插入图片描述

2.5 标题标签，段落标签，换行标签、文本格式化标签、
标签、图像标签、超链接标签、特殊字符、表格标签、列表标签、表单标签

标题标签：h1->h6 重要性诸暨递减
段落标签

两个段落之间会有较大的空隙
换行标签：

在这里插入图片描述

表格基本语法

列表标签
在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
</head>
<body>
    <h2>青春不常在</h2>
    <table>
        <tr>
            <td>性别</td>
            <td>
                <input type="radio" name="sex" id="nan"><label for='nan'></label>男
                <input type="radio" name="sex" id="nv"><label for='nv'></label>女
            </td>
        </tr>

        <tr>
            <td>生日</td>
            <td>
                <select>
                    <option>--请选择年份--</option>
                    <option>1996</option>
                    <option>1997</option>
                    <option>1998</option>
                    <option>1999</option>
                </select>
            </td>
        </tr>

        <tr>
            <td>所在地区</td>
            <td>
                <input type="text">
            </td>
        </tr>

        <tr>
            <td>喜欢的类型:</td>
            <td>
                <input type="checkbox" name="love">妩媚的
                <input type="checkbox" name="love">性感的
                <input type="checkbox" name="love" checked="checked">都喜欢
            </td>

        </tr>

        <tr>
            <td>自我介绍</td>
            <td>
                <textarea></textarea>
            </td>
        </tr>

        <tr>
            <td></td>
            <td>
                <input type="submit" value="免费注册">
            </td>
        </tr>

        <tr>
            <td></td>
            <td>
                <h5>我承诺</h5>
                <ul>
                    <li>第一</li>
                    <li>第二</li>
                    <li>第三</li>
                </ul>
            </td>
        </tr>
    </table>
</body>
</html>

文章目录