• HTML5基础


    1.初识HTML

    什么是HTML

    HTML 是用来描述网页的一种语言。

    • HTML 指的是超文本标记语言: HyperText Markup Language
    • HTML 不是一种编程语言,而是一种标记语言
    • 标记语言是一套标记标签 (markup tag)
    • HTML 使用标记标签来描述网页
    • HTML 文档包含了HTML 标签及文本内容
    • HTML文档也叫做 web 页面

    HTML标签

    HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

    • HTML 标签是由尖括号包围的关键词,比如
    • HTML 标签通常是成对出现的,比如
    • 标签对中的第一个标签是开始标签,第二个标签是结束标签
    • 开始和结束标签也被称为开放标签和闭合标签

    HTML5结构解析

    
    html>
    <html lang="en">
    
    <head>
    
    
    
        <meta charset="UTF-8">
    
        <title>Titletitle>
    head>
    
    <body>
    
    body>
    html>
    

    什么是SEO

    HTML5标签学习

    标题标签

    标题(Heading)是通过 <h1> - <h6> 等标签进行定义的。
    <h1> 定义最大的标题。<h6> 定义最小的标题。
    

    段落标签

    <p>两只老虎 两只老虎p>
    

    水平线标签

    <hr/>
    

    换行标签

    两只老虎 两只老虎 <br/>
    

    字体样式标签(粗体、斜体)

    粗体 :<strong>I love youstrong> I love you
    斜体 :  <em>I love you em> I love you
    

    注释和特殊符号

    空格:  
    >  	: >
    <	: <
    版权所有:©
    ······
    

    图像标签

    图像标签会涉及到所选图片的地址问题,这里推荐的是使用相对路径,把自己所要添加到资源创建个目录放进去,如果想直接使用绝对路径,本地保存的图片路径会解析不出来,因此绝对路径需要使用网络上的图片链接添加。以下同理

    
    <img src="../Resource/image/1.jpg" alt="一果" title="一果" width="400" height="180"> <br/>
    <img src="../Resource/image/2.jpg" alt="艾米利亚" title="艾米利亚" width="320" height="180"> <br/>
    

    链接标签

    
    <a href="http://www.baidu.com" target="_blank">点击我跳转到百度a> <br/>
    <a href="http://www.baidu.com" target="_self"
    >图片链接<img src="../Resource/image/baidu.png" alt="百度" title="百度" width="320" height="180"> a> <br/>
    

    锚链接

    锚链接除了可以在此页面使用,也可用于跳转到其他页面

    
    <a id="top">topa> <br/>
    <a href="#top">返回顶部a> <br/>
    

    功能性链接

    
    <a href="mailto:lonelyyang3@qq.com">我的qq邮箱a> <br>
    <a href="mailto:lonelyyang3@Outlook.com">我的Outlook邮箱a> <br>
    
    <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2639809653&site=qq&menu=yes"
    ><img border="0" src="http://wpa.qq.com/pa?p=2:2639809653:53" alt="点击这里给我发消息" title="点击这里给我发消息"/>a> <br>
    <hr>
    

    2.列表标签

    有序列表

    
    <ol>
        <li>Javali>
        <li>Pythonli>
        <li>前端li>
        <li>C/C++li>
        <li>运维li>
    ol>
    

    无序列表

    
    <ul>
        <li>Javali>
        <li>Pythonli>
        <li>前端li>
        <li>C/C++li>
        <li>运维li>
    ul>
    

    自定义列表

    
    <dl>
        <dt>学科dt>
    
        <dd>Javadd>
        <dd>Pythondd>
        <dd>Linuxdd>
        <dd>Cdd>
    
        <dt>位置dt>
        <dd>南京dd>
        <dd>合肥dd>
        <dd>亳州dd>
    
    dl>
    

    表格标签

    
    <table  border="1px">
        <tr>
            
            <td colspan="3">1-1td>
            
            
        tr>
    
        <tr>
            
            <td rowspan="2">2-1td>
            <td>2-2td>
            <td>2-3td>
        tr>
    
        <tr>
            <td>3-1td>
            <td>3-2td>
    
        tr>
    table>
    
    
    折叠

    下面是一个小案列

    <table border="2px">
    
        <tr style="text-align: center"> 
            <td colspan="3">学生成绩td>
        tr>
    
        <tr>
            <td rowspan="2">杨幂 td>
            <td >语文td>
            <td >100td>
        tr>
    
        <tr>
            <td >数学td>
            <td >100td>
        tr>
    
        <tr>
            <td rowspan="2">冷冷td>
            <td >语文td>
            <td >100td>
        tr>
        <tr>
            <td >数学td>
            <td >100td>
        tr>
    table>
    
    折叠

    媒体标签

    
    <video src="../Resource/video/鸡你太美.mp4" controls >鸡你太美video>
    
    <br>
    <audio src="../Resource/audio/大原ゆい子%20-%20サンタになりたい.mp3 " controls >大原ゆい子%20-%20サンタになりたいaudio>
    

    页面结构

    image

    iframe内联框架

    出可能会现了拒绝访问问题

    
    <iframe src="https://www.baidu.com" frameborder="0" width="1000px" height="800px ">iframe>
    <br>
    <iframe src="" name="hello" frameborder="0" width="1000px" height="800px "> iframe>
    <a href="https://www.cnblogs.com/HFUUwzy/" target="hello">点击跳转到我的博客a>
    
    <iframe src="//player.bilibili.com/player.html?aid=385874542&bvid=BV19Z4y1Y7e3&cid=769626388&page=1"
            scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> iframe>
    
    

    3.表单form

    表单的一些基础关键词

    
    

    input

    由于每个表单标签单独写出来较为麻烦,我放在一个案例代码中来实现。内容包括了
    文本输入框、密码框、单选框标签、多选框标签、按钮、下拉框、列表、
    文本域、文件域、邮箱验证、URL、数字、滑块、搜索框、增强鼠标可用性
    自定义邮箱

    需要注意的是name属性是我们网站传播信息的属性,可供后端进行操作
    只包括介绍标签的使用,不包括功能交互

    <form action="我的测试网站.html" method="get" >
    
    <p>名字: <input type="text" name="userName" placeholder="请输入用户名" required>p>
    
    <p>密码: <input type="password" name="password" placeholder="请输入密码" required>p>
    
    
        <p> 性别 :
            <input type="radio" value="boy" name="sex" ><input type="radio" value="girl" name="sex" >p>
    
        <p>爱好 :
            <input type="checkbox" value="sing" name="hobby"><input type="checkbox" value="dance" name="hobby"><input type="checkbox" value="rap" name="hobby"> rap
            <input type="checkbox" value="basketball" name="hobby" checked> 篮球
        p>
    
        <p>按钮 :
            <input type="button" value="点击变长" name="but1">
            <input type="button" value="点击变短" name="but2"> <br>
    
    
        p>国家 :
        <select name="列表名称">
            <option value="China"> 中国 option>
            <option value="USA"> 美国 option>
            <option value="UK"> 英国 option>
            <option value="Germany" selected> 德国 option>
        select>
        <p>
    
        <p>反馈 :
        <textarea name="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>
    
        <p>网址 :
            <input type="url" name="url" >
        p>
    
        <p>鸡哥数量 :
            <input type="number" name="num" max="100" min="0" step="1">
        p>
    
        <p>音量 :
            <input type="range" name="voice" max="100" min="0" step="5">
        p>
    
        <p>搜索 :
            <input type="search" name="search">
        p>
    
        <p>
            <label for="mark"> 你点我试试label>
            <input type="text" name="text" id="mark">
        p>
    
    
    
    
    
    
        <input  type = "submit">
        <input type="reset">
        p>
    form>
    
    折叠
  • 相关阅读:
    常用的linux命令简要说明以及命令全名理解
    Android14之input高级调试技巧(一百八十八)
    H5 简约四色新科技风引导页源码
    JQ完成模拟QQ好友分组案例(介绍JQ实现原理)
    FastJson 漏洞复现
    Vue 项目部署为 HTTPS 站点
    什么是人工智能(AI)数据平台?
    【Leetcode】2684. 矩阵中移动的最大次数
    C++学习笔记(二十二)
    多目标应用:基于非支配排序粒子群优化算法NSPSO求解无人机三维路径规划(MATLAB代码)
  • 原文地址:https://www.cnblogs.com/HFUUwzy/p/16485656.html