• HTML5详解

    文章目录

    1 网页基本标签

    1.1 HTML的基本结构

    1.DOCTYPE:告诉浏览器我们所使用的规范
    2.head标签指代网页头部
    3.body标签指代网页主体
    4.title:网页标题

    

DOCTYPE html>
<html lang="en">
<head>   
    <meta charset="UTF-8">
    <title>网页的基本结构标题title>
head>
<body>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    1.2 标题标签

    <h1>一级标题h1>
<h2>二级标题h2>
<h3>三级标题h3>
......依次类推

    • 1
    • 2
    • 3
    • 4

    1.3 段落标签

    <p>第一段p>
<p>第二段p>
<p>第三段p>

    • 1
    • 2
    • 3

    1.4 换行标签

    <br>或者br>

    • 1

    1.5 水平线标签

    <hr>或者hr>

    • 1

    1.6 字体样式标签

    粗体:<strong>粗体strong>
斜体:<em>斜体em>

    • 1
    • 2

    1.7 注释和特殊符号

    空格: 
>符号:>
<符号:<

    • 1
    • 2
    • 3

    2 图像、超链接、网页布局

    2.1 图像

    <img src="path" alt="text" title="text" width="x" height="y"/>

path:表示图像地址(相对地址或者绝对地址)
alt:当图像出错时可替代的文字内容
title:鼠标悬停时出现的文字
width:图像的宽
height:图像的高

<img src="../resources/image/X.jpg" alt="图片加载错误" title="鼠标悬停文字"/>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    2.2 超链接标签

    1.页面间链

    <a href="path" target="目标窗口位置">连接文本或图像a>
path:链接路径
target:链接在哪个窗口打开(_blank(新窗口)、_self(默认的当前窗口))

    • 1
    • 2
    • 3

    2.锚链接

    1.需要一个锚标记
2.跳转到标记

<a name="top">顶部a>
<a href="#top">回到顶部a>

    • 1
    • 2
    • 3
    • 4
    • 5

    3.功能性链接

    1.邮件链接:mailto
2.QQ链接

<a href="mailto:2019575691@qq.com">点击联系我a>

    • 1
    • 2
    • 3
    • 4

    2.3 块元素和行内元素

    1.块元素:无论内容多少,该元素独占一行;(p、h1~h6)
2.行内元素:内容撑开宽度,左右都是行内元素的可以排在一行;(a、strong、em)

    • 1
    • 2

    2.4 网页布局

    网页布局
    在这里插入图片描述

    3 列表、表格、媒体元素、iframe内联框架

    3.1 列表

    1.有序列表ol li
    2.无序列表ul li
    3.自定义列表dl dt dd

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

<ol>
  <li>Ali>
  <li>Bli>
  <li>Cli>
  <li>Dli>
ol>


<ul>
    <li>Ali>
    <li>Bli>
    <li>Cli>
    <li>Dli>
ul>


<dl>
    <dt>课程内容dt>
    <dd>Add>
    <dd>Bdd>
    <dd>Cdd>
    <dd>Ddd>
dl>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36

    3.2 表格

    基本元素: 单元格、行、列、跨行、跨列
    rowspan: 跨行
    colspan : 跨列
    tr: 行
    td: 列
    table: 表格

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<table border="1px">
    
    <tr>

        <td colspan="6">课程表td>





    tr>
    <tr>

        <td rowspan="2">老td>
        <td>2.1td>
        <td>2.2td>
        <td>2.3td>
        <td>2.4td>
        <td>2.5td>
    tr>
    <tr>
        <td>3.1td>
        <td>3.2td>
        <td>3.3td>
        <td>3.4td>
        <td>3.5td>
    tr>
table>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39

    3.3 媒体元素

    audio: 视频
    vidio: 视频

    <body>




<video src="" controls autoplay>video>//音频
<audio src="" controls autoplay>audio>//视频
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    3.4 iframe内联框架

    iframe内联框架:

    <body>



<iframe src="" name="baidu" frameborder="0">iframe>
<a href="https://www.baidu.com" target="baidu">点击跳转a>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    4 表单

    表单语法

    //形式如下:
//method:规定如何发送表单数据post、get
//action:表示向何处发送数据
<form action="post/get" method="result.html" >
    <p>名字:<input type="text" name="name">p>
    <p>密码:<input type="password" name="password">p>
    <p>
        <input type="submit" name="submit" value="提交"> p>
        <input type="reset" name="reset" value="重置">
    p>
form>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    input的属性:
    在这里插入图片描述表单用法:

    <body>
<h>表单**用例**展示h>



<form action="post" method="2.图像标签.html" >
    <p>昵称:<input type="text" name="name">p>
    <p>密码:<input type="password" name="password">p>
    <p>
        <input type="submit" name="submit" value="提交">
        <input type="reset" name="reset" value="重置">
    p>
form>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    表单元素格式:
    在这里插入图片描述单选框radio:

    
    <p>性别:
        <input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="girl" name="sex">女
    p>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    多选框:

    <p>爱好:
        <input type="checkbox" value="睡觉" name="hobby">睡觉
        <input type="checkbox" value="看电影" name="hobby">看电影
        <input type="checkbox" value="看小说" name="hobby">看小说
    p>

    • 1
    • 2
    • 3
    • 4
    • 5

    下拉框:

    <p>下拉框：
        <select name="列表名称" >
            <option value="选项的值" selected>北京option>
            <option value="选项的值">上海option>
            <option value="选项的值">广州option>
            <option value="选项的值">深圳option>
        select>
    p>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

<h>表单**用例**展示h>



<form action="post" method="2.图像标签.html" >
    <p>昵称:<input type="text" name="name">p>
    <p>密码:<input type="password" name="password">p>


    <p>性别:
        <input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="girl" name="sex">女
    p>

    <p>下拉框：
        <select name="列表名称" >
            <option value="选项的值" selected>北京option>
            <option value="选项的值">上海option>
            <option value="选项的值">广州option>
            <option value="选项的值">深圳option>
        select>
    p>
    <p>按钮：
        <input type="button" value="点击翻页">
    p>
    <p>邮箱:
        <input type="email" name="email">
    p>
    <p>URL:
        <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" min="0" max="100" step="2">
    p>

    <p>搜索:
        <input type="search" name="search">
    p>


    <p>爱好:
        <input type="checkbox" value="睡觉" name="hobby">睡觉
        <input type="checkbox" value="看电影" name="hobby">看电影
        <input type="checkbox" value="看小说" name="hobby">看小说
    p>
    <p>
        <input type="submit" name="submit" value="提交">
        <input type="reset" name="reset" value="重置">
    p>

form>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75

    表单的初级验证:
    在这里插入图片描述

  • 相关阅读:
    OPPO 一加 真我 vivo iQOO手撕 10 11 12系统 都可以开
    jdk17下netty导致堆内存疯涨原因排查
    SAP 物料分类账配置详解Part 2（ 基于SAP S/4HANA1909 版本）
    基础框架 Spring
    sql查询之模糊查询
    Pycharm打开时一直加载中？解决办法来了~
    【第八章 Thread类中的常用方法、线程优先级】
    RK3399平台开发系列讲解（USB篇）URB通信过程详解
    Vue+element-ui的el-cascader实现动态添加删除级联地点输入框
    kubernetes（k8s） pod（资源限制、基础概念）
  • 原文地址：https://blog.csdn.net/weixin_53415378/article/details/128056734