2022/07/09 第六组 程梓杭 HTML基本知识

今日学习内容:HTML初步知识、VSCode基础操作。

知识点:

1、HTML元素:

HTML是一种超文本标记语言,几乎所有元素是由一个开始标签和一个结束标签组成。元素内容为标签内的所有代码。

HTML 元素语法

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容(empty content)
  • 空元素在开始标签中进行关闭(以开始标签的结束而结束)
  • 大多数 HTML 元素可拥有属性嵌套的 HTML 元素

嵌套的 HTML 元素

大多数 HTML 元素可以嵌套(可以包含其他 HTML 元素)。

HTML 文档由嵌套的 HTML 元素构成。

2、HTML属性:

HTML 属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。

属性总是以名称/值对的形式出现,比如:name="value"。

属性总是在 HTML 元素的开始标签中规定。

HTML 提示:使用小写属性

属性和属性值对大小写不敏感。

不过,万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。

而新版本的 (X)HTML 要求使用小写属性。

始终为属性值加引号

属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。

在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号

(更多内容见https://www.w3school.com.cn/html/html_tables.asp

3、HTML示例

<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    <script src='main.js'></script>
</head>

<body>
    <form>
        <table border="0">
            <tr>
                <th>用户名:</th>
                <td><input :type="text"></td>  
            </tr>
            <tr>
                <th>密码:</th>
                <td><input :type="password"></td>
            </tr>
            <tr>
                <th>性别:</th>
                <td><input type="radio" name="gender">男
                <input type="radio" name="gender" checked>女</td>
            </tr>
            <tr>
                <th>爱好:</th>
                <td><input type="checkbox" checked>游泳
                <input type="checkbox">足球
                <input type="checkbox">篮球</td>
            </tr>
            <tr>
                <th>家庭住址:</th>
                 <td><select>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option></td>
                </select>
            </tr>
            <tr>
                <th>喜欢的颜色:</th>
                <td><input type="color"></td>
            </tr>
            <tr>
                <th>剩余电量</th>
                <td><input type="range"></td>
            </tr>
            <tr>
                <!-- <input type="submit" value="提交">
                <input type="reset" value="重置">
                <input type="button" value="自定义"> -->
                <td colspan="2" align="center"><button type="submit">提交</button>
                <button type="reset">重置</button>
                <button type="button">自定义</button></td>
            </tr>
        </table>
    </form>
</body>

</html>
重点掌握内容为:表格。

掌握情况:

上述知识及其相关知识能熟练运用。

 

 

posted @ 2022-07-11 22:06  不觉已入梦  阅读(41)  评论(0)    收藏  举报