初识HTML

HTML: 超文本标记语言

根控制标记（头）

​ 头控制标记（头）

​ 标题 标题标记

​ 头控制标记（尾）

​ 网页显示区域（一般要实现的代码都在这里写）

根控制标记（尾）

1. 标题标签

   一级标题

   二级标题

   三级标题

   四级标题

   五级标题

   六级标题

2. 段落标签

3. 换行标签

4. 水平线标签

   ---

5. 字体标识标签 粗体 用strong

   ​ 斜体 ：em

6. 特殊符号

   空格 &nbsp

   大于号 &gt

   小于号 &lt

   版权所有 &copy

   
   src为必填项 表示图片的地址
   alt 表示图片的名字

7. 锚链接

   （1）需要一个锚标记

   （2） 跳转到标记#

8. 功能性链接 ：邮箱链接 mailto:

9. 行内元素和块元素

   有序列表

   无序列表

   自定义列表

   标签

   列表名称

   <dd>列表内容</dd>

   行

   列

   跨列
   跨行

​ 音频 audio

​ 视频 video

头部

脚部

主体

iframe

<iframe src = "path" name = "mainFrame">

</iframe>

action:表单提交的位置，可以是网站，也可以是一个请求处理地址

post：比较安全，适合传输大文件

get: 可以再URL中看到我们提供的信息，不安全但是高效

<form action="1.我的第一个网页.html" method="get">
    <!--文本输入框-->
    <p>名字：<input type="text" name="username" value="hhh" maxlength="8" size="30" readonly></p>
    <!--密码框-->
    <p>密码：<input type="password" name="pwd" hidden></p>

<!--单选框-->
    <p>性别：
        <input type="radio" value="boy" name="sex" checked disabled/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>

    <!--多选框-->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby" checked>敲代码
        <input type="checkbox" value="chat" name="hobby">聊天

    </p>
    <!--按钮-->
    <p>按钮：
        <input type="button" name="btn1" value="点击变长">
        <!--<input type="image" src="../resources/image/1.PNG" >-->
    </p>
    <!--下拉框，列表框
    -->
    <p>国家：
        <select name="列表名称" >
            <option value="China">中国</option>
            <option value="us">美国</option>
            <option value="rth" selected>瑞士</option>

        </select>
    </p>

    <p>文本域：
        <textarea name="textarea" id="" cols="10" rows="10">文本内容</textarea>
    </p>

    <p>文件域：
        <input type="file" name="files" >

    </p>

    <!--邮件验证-->
    <p>邮箱：
    <input type="email" name="email">

</p>
    <!--URL-->
    <p>URL：
        <input type="url" name="url">

    </p>
    <!--数字-->
    <p>数字：
        <input type="number" name="number" max="200" min="0" step="10">

    </p>
    <!--滑块-->
    <p>滑块：
        <input type="range" name="voice" max="100" min="0" step="1">

    </p>
    <!--搜索框-->
    <p>搜索框：
        <input type="search" name="search" max="200" min="0" step="10">

    </p>

    <p>
        <input type="submit">
        <input type="reset">
    </p>

隐藏域 hidden

只读 readonly

禁用 disabled

提示信息 placeholder

非空判断 required

正则表达式 pattern

备注：思维导图