Html学习笔记

随笔
452 0

<body> , </body>等成对的标签,分别叫开放标签和闭合标签,单独呈现的标签(空元素),如<hr/> ,意味用 "/" 关闭空元素。

HTML注释写法

<!-- 这里是注释内容 -->

1.网页基本信息

<!-- DOCTYPE:告诉浏览器我们要使用什么规范 -->
<!DOCTYPE html>

<html lang="zh">

<!-- head标签代表网页头部 -->
<head>
    
    <!-- meta描述性标签,一般用来做 SEO -->
    <meta charset="UTF-8">
    <meta name="keywords" content="第一个网页">
    <meta name="description" content="这里是第一个网页的描述内容">
    
    <!-- title网页标题 -->
    <title>第一个网页</title>
    
</head>

<!-- body用来写网页主题内容 -->
<body>
    Hello,World
</body>
</html>

本节常用单词

head : 头部 , meta : 元 , keywords : 关键词 , description : 描述 ,content : 内容 , title : 标题 , body : 身体

2.基本标签

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>2.基本标签</title>
</head>
<body>
    <!-- 标题标签 -->
    <h1>一级标签</h1>
    <h2>二级标签</h2>
    <h3>三级标签</h3>
    <h4>四级标签</h4>
    <h5>五级标签</h5>
    <h6>六级标签</h6>
    
    <!-- 段落标签 -->
    <p>会当凌绝顶</p>
    <p>一览众山小</p>
    <p>这一次我Html会有许多进步</p>
    
    <!-- 水平线标签 -->
    <hr/>
    
    <!-- 换行标签 -->
    会当凌绝顶<br/>
    一览众山小<br/>
    这一次我Html会有许多进步
    <br/>
    <!-- 粗体和斜体 -->
    粗体:<strong>I Love You</strong>
    斜体:<em>I Love You</em>
</body>
</html>

3.图像标签

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>3.图像标签</title>
</head>
<body>
    <!-- 
     src : 图片路径(必填)
     alt : 图片加载失败显示的文字(必填)
     title : 鼠标悬停时显示
     width : 设置宽度
     height : 设置高度
     -->
    <img src="https://api.isoyu.com/bing_images.php" alt="图片加载失败" title="这是今天的必应每日一图" width="100%" height="100%">
</body>
</html>

本节常用单词:width : 宽度 , height : 高度

4.链接标签

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>4.链接标签</title>
</head>
<body>
    <!-- a标签
     href : 必填,表示要跳转的地址
     target : 表示窗口在哪里打开
         _blank : 在新标签页打开
         _self : 在自己的网页中打开
     -->
    
    <a href="https://www.5iv.top" target="_blank" >点击访问昔羽记</a>
    
    <!-- 锚链接
     暂时还没有写
     -->
     
    <!-- 功能性链接 -->
    <a href="mailto:root@5iv.top">root@5iv.top</a>

</body>
</html>

5.列表标签

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>5.列表标签</title>
</head>
<body>
    <!-- 有序列表 -->
    <ol>
        <li>Java</li>
        <li>Python</li>
        <li>PHP</li>
        <li>CSS</li>
    </ol>
    
    <!-- ul无序列表 -->
    <ul>
        <li>Java</li>
        <li>Python</li>
        <li>PHP</li>
        <li>CSS</li>
    </ul>
    
    <!-- 自定义列表
     dl : 标签
     dt : 列表名称
     dd :列表内容
     -->
     <dl>
         <dt>学科</dt>
         
         <dd>Java</dd>
         <dd>Python</dd>
         <dd>PHP</dd>
         <dd>CSS</dd>
         
         <dt>分数</dt>
         <dd>99</dd>
         <dd>78</dd>
         <dd>67</dd>
         <dd>98</dd>
     </dl>
</body>
</html>

6.表格标签

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>6.表格标签</title>
</head>
<body>
    <!-- 表格table 
    tr :行
    td :列
    colspan : 跨列
    rowspan : 跨行
    -->
    
    <table border="1px">
        <tr>
            <td colspan="3">学生成绩</td>
        </tr>
        <tr>
            <td rowspan="2">小佳</td>
            <td>语文</td>
            <td>100</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>100</td>
        </tr>
        <tr>
            <td rowspan="3">小星</td>
        </tr>
        <tr>
            <td>语文</td>
            <td>100</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>100</td>
        </tr>
    </table>
</body>
</html>

7.媒体标签

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>7.媒体标签</title>
</head>
<body>
    <!-- 音频和视频
     src : 资源地址
     controls : 控制条
     autoplay : 自动播放
     -->
     
     <!-- 视频 -->
    <video src="1.mp4" controls autoplay></video>
    <!-- 音频 -->
    <audio src="1.mp3" controls autoplay></audio>
</body>
</html>

8.页面结构分析

元素名描述
header标题头部区域的内容
footer标记脚部区域的内容
sectionWeb页面中的一块独立区域
article独立的文章内容
aside相关内容或应用(常用于侧边栏)
nav导航类辅助内容

9.iframe 内联框架

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>9.iframe内联框架</title>
</head>
<body>
    <!-- iframe
     src : 资源地址
     w-h :宽度和高度
     -->
    <iframe src="https://www.5iv.top" frameborder="0" width="1000px" height="800px"></iframe>
    
    <!-- 设置点击按钮后调用 iframe 框架打开
     将框架命名为 name
     然后使用 a 标签 target 元素指定为名字为 name 的 iframe 框架打开
     -->
     <iframe src="" naframeborder="0" name="hello" width="1000px" height="800px"></iframe>
     
     <a href="https://www.5iv.top" target="hello">点击链接打开昔羽记</a>
</body>
</html>

10.表单

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>10.表单</title>
</head>
<body>
    <!-- 表单
     action : 表单提交的位置
     method : post , get 提交方式
     -->
    <form action="1.php" method="get">
        <!-- 文本输入框 input type = "text"
        type : 输入框类型,常用的有 
            text : 文本 , password : 密码 , submit : 提交 
            reset : 重置 , radio :单选 , checkbox :多选
            button : 按钮 , image : 图片按钮
        value : 默认值
        maxlength : 最长能写几个字符
        size : 文本框的长度
        hidden : 隐藏域
        readonly : 只读
        disabled : 禁用
         -->
        <p>名字: <input type="text" name="username" id="username" value="" /></p>
        
        <!-- 密码输入框 input type = "password" -->
        <p>密码: <input type="password" name="password" id="password" value=""></p>
        
        <!-- 单选框 需要使用 name 设置为一个组
        checked : 默认选中
        readonly : 只读
        -->
        <p>性别:
        <input type="radio" value="boy" name="sex" readonly>男
        <input type="radio" value="girl" name="sex" checked>女
        </p>
        
        <!-- 多选框 
        checked : 默认选中
        disabled : 禁用
        -->
        <p>爱好:
        <input type="checkbox" value="sleep" name="hobby" disabled>睡觉
        <input type="checkbox" value="code" name="hobby" checked>敲代码
        <input type="checkbox" value="game" name="hobby">游戏
        </p>
        
        <!-- 按钮 -->
        <input type="button" value="这是一个按钮" name="bt1">
        <!-- 图片按钮 需要指定图片路径-->
        <input type="image" src="test.png" alt="">
        
        <!-- 提交和重置 -->
        <p>
            <input type="submit" value="提交">
            <input type="reset" value="重置">
        </p>
    </form>
</body>
</html> 

11.表单扩展

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>11.表单扩展</title>
</head>
<body>
    <!-- 表单
     action : 表单提交的位置
     method : post , get 提交方式
     -->
    <form action="1.php" method="get">
        
        <!-- 下拉框 -->
        <p>国家:
            <select name="列表名称" id="country">
                <!-- 
                value : 选项的值
                 selected : 默认选择
                 -->
                <option value="选项的值">中国</option>
                <option value="选项的值">美国</option>
                <option value="选项的值" selected>瑞士</option>
                <option value="选项的值">印度</option>
            </select>
        </p>
        
        <!-- 文本域 -->
        <p>反馈:
            <textarea name="textarea" id="textarea" cols="30" rows="10">文本内容</textarea>
        </p>
        
        <!-- 文件域 -->
        <p>
            <input type="file" name="files">
            <input type="button" value="上传" name="upload">
        </p>
        
        <!-- 邮箱验证 -->
        <p>邮箱:
            <input type="email" name="email">
        </p>
        
        <!-- URL验证 -->
        <p>URL:
            <input type="url" name="url">
        </p>
        
        <!-- 数字 
        max : 最大值
        min : 最小值
        step : 步长
        -->
        <p>数字:
            <input type="number" name="num" max="100" min="0" step="1">
        </p>
        
        <!-- 滑块 -->
        <p>音量:
            <input type="range" name="voice" min="0" max="100" step="1">
        </p>
        
        <!-- 搜索框 -->
        <p>搜索
            <input type="search" name="search">
        </p>
    </form>

</body>
</html> 

12.表单初级验证

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>12.表单初级验证</title>
</head>
<body>
    <!-- 表单
     action : 表单提交的位置
     method : post , get 提交方式
     -->
    <form action="1.php" method="get">
        <!-- 
        placeholder : 提示信息 
        required : 非空判断
        pattern : 正则表达式
        -->
        <p>手机号:
            <input type="text" name="phone" placeholder="请输入手机号" required pattern="^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\\d{8}$">
        </p>
        <p>账号:
            <input type="password" name="password" placeholder="请输入密码" required>
        </p>
        <p>
            <input type="submit" value="提交">
            <input type="reset" value="重置">
        </p>
    </form>
</body>
</html> 
最后更新 2022-11-13
评论 ( 0 )
OωO
隐私评论