什么是HTML

1、HTML是一门语言，所有的网页都是用HTML这门语言编写出来的

2、HTML（Hyper Text Markup Language）：超文本标记语言

超文本：超越了文本的限制，比普通文本更强大。除了文字，还可以定义图片，音频，视频等内容
标记语言：由标签构成的语言

3、HTML运行在浏览器上，HTML标签由浏览器来解析

4、HTML标签都是预定好的。例如：使用<img>展示图片

5、W3C标准：网页主要由三部分组成

结构：HTML
表现：css
行为：JavaScript

HTML文件的构成

1、HTML文件以.htm或.html为扩展名

2、HTML结构标签

3、HTML标签不区分大小写

4、HTML标签属性值单双引号皆可

5、HTML语法松散即使少写一般标签也能识别但是不道德

HTML基础标签

HTML 特殊字符

HTML图片、音频、视频标签

超链接标签

列表标签

表格标签

表格标签课表案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <table width="50%" border="1" cellspacing="0">
            <tr height="20">
                <th colspan="2"></th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
            </tr>
            <tr align="center">
                <td rowspan="4">上午</td>
                <td>早自习</td>
                <td>英语</td>
                <td>语文</td>
                <td>英语</td>
                <td>语文</td>
                <td>英语</td>
            </tr>
            <tr align="center">
                <td>第1节</td>
                <td>数学</td>
                <td>数学</td>
                <td>数学</td>
                <td>数学</td>
                <td>数学</td>
            </tr>
            <tr align="center">
                <td>第2节</td>
                <td>物理</td>
                <td>物理</td>
                <td>物理</td>
                <td>物理</td>
                <td>物理</td>
            </tr>
            <tr align="center">
                <td>第3节</td>
                <td>化学</td>
                <td>化学</td>
                <td>化学</td>
                <td>化学</td>
                <td>化学</td>
            </tr>
            <tr align="center">
                <td colspan="7">午休</td>
            </tr>
            <tr align="center">
                <td rowspan="4">下午</td>
                <td>第4节</td>
                <td>生物</td>
                <td>生物</td>
                <td>生物</td>
                <td>生物</td>
                <td>生物</td>
            </tr>
            <tr align="center">
                <td>第5节</td>
                <td>英语</td>
                <td>英语</td>
                <td>英语</td>
                <td>英语</td>
                <td>英语</td>
            </tr>
            <tr align="center">
                <td>第5节</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
            </tr>
        </table>
</body>
</html>

布局标签

结合CSS

表单标签和表单项标签

表单标签案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="#" method="post">
    <input type="hidden" name="id" value="123">

    <label for="username">用户名</label>
    <input type="text" name="username" id="username">   <br>
    <label for="password">密码：</label>
   <input type="password" name="password" id="password"> <br>
     性别 <input type="radio" name="sex" value="man" id="man"> <label for="man">男</label>
    <input type="radio" name="sex" value="women" id="women"> <label for="women">女</label><br>
    爱好 <input type="checkbox" name="hobby" value="旅游" id="travel"><label for="travel">旅游</label>
    <input type="checkbox" name="hobby" value="游戏" id="game"><label for="game">游戏</label>
    <input type="checkbox" name="hobby" value="摄影" id="photography"><label for="photography">摄影</label><br>
    头像  <input type="file" name="picture"><br>
    城市 <select name="city">
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>


    </select><br> 个人描述：
   <textarea cols="20" rows="5" name="desc"></textarea><br><br><br>
    <input type="submit">
    <input type="reset">
    <input type="button" value="一个按钮">
</form>
</body>
</html>

HTML简介及其标签