IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓ 		图片批量下载器
↓批量下载图片,美女图库↓ 		图片自动播放器
↓图片自动播放器↓ 		一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> HTML基础 -> 正文阅读

[JavaScript知识库]HTML基础

W3C标准

  1. 结构化标准语言（HTML,XML）.
  2. 表现标准语言（CCS）.
  3. 行为标准语言（DOM，ECMAscript）

HTML基本结构

<body> <-body>等成对的标签分别叫做开放标签和闭合标签
单独出现的叫自闭合标签

<!--DOCTYPE用来定义标准-->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页的头部-->
<head>
<!--meta描述性标签，用来描述一些网站的信息-->

    <meta charset="UTF-8">
    <!--设置一些关键词-->
    <meta name="keyword" content="java">
    <!--关于网页的描述-->
    <meta name="description" content="第一次尝试" >
    <!--title网页的名字-->
    <title>Title</title>
</head>
<!--body标签代表网页的主体-->
<body>

</body>
</html>

网页基本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签</title>
</head>
<body>
<!--标题标签-->
<h1>标签</h1>
<h2>标签</h2>
<h3>标签</h3>
<h4>标签</h4>
<h5>标签</h5>
<h6>标签</h6>
<!--水平线标签-->
<hr/>
<!--段落标签-->
<p>我的</p>
<p>第一次</p>
<p>尝试</p>
<!--换行标签-->
我的 <br/>
第一次 <br/>
尝试 <br/>
<!--粗体，斜体-->
<strong>Hello World</strong><br/>
<em>Hello World</em>
</body>
</html>

图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
src(必填) 绝对路径 相对路径（推荐）
-->
<img src="../resources/image/1.jpg" alt="帅气自拍" title="悬停" height="250" width="250">
</body>
</html>

链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<!--
a标签
href ：必填，表示要跳转到那个页面
target：表示窗口在哪里打开  _blank  在新标签中打开
                        _self(默认)在当前网页打开
-->
<a name="top">顶部</a>

<br/>
<a href="基本标签.html" target="_blank">
    <img src="../resources/image/1.jpg" alt="帅气自拍" title="点击图片跳转" height="250" width="250">
</a>
<br/>

<!--锚链接
1.需要一个锚标记(name||tip)
2.跳转到标记
-->
<a href="#top">回到顶部</a>
<!--功能型链接
邮件链接：mailto
-->
<a href="mailto:1536478643@qq.com">点击联系我</a>
</body>
</html>

块元素和行内元素

  1. 块元素：无论内容多少都会占据一行。
  2. 行内元素：内容撑开宽度，左右都是行内元素的可以放在一行。

列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>

<!--有序列表-->
<ol>
    <li>C++</li>
    <li>Java</li>
    <li>Python</li>
</ol>
<hr/>
<!--无序列表-->
<ul>
    <li>C++</li>
    <li>Java</li>
    <li>Python</li>
</ul>
<hr/>
<!--自定义列表-->
<dl>
    <dt>学科</dt>

    <dd>C++</dd>
    <dd>Java</dd>
    <dd>C</dd>
    <dd>Python</dd>
</dl>
</body>
</html>

表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
<!--表格table
行 tr
列 td
更改边框粗细：border
跨列：colspan
跨行：rowspan
-->
<table border="1px">
    <tr>
        <td >姓名</td>
        <td colspan="2">成绩</td>
    </tr>

    <tr>
        <td>一号</td>
        <td>80</td>
        <td>60</td>
    </tr>

    <tr>
        <td>二号</td>
        <td>90</td>
        <td>50</td>
    </tr>
</table>
</body>
</html>

媒体元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素</title>
</head>
<body>
<!--
音频 video
视屏 audio
控制 controls
自动播放 autoplay
-->
<video src="../resources/video/歌曲.mp3" controls>音乐</video>
</body>
</html>

内联框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
<!--
内联框架iframe
name:标记

-->
<iframe src="" name="mark" frameborder="0" width="1000px" height="800px">内联</iframe>
<!--target 跳转到mark打开-->
<a href="https://123.sogou.com" target="mark">点击跳转</a>
</body>
</html>

表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<!--表单
action： 表单提交的地址，可以是一个网站地址，也可以是请求处理地址。
method： 提交方式 post get
post： 相对比较安全，传输大文件。
get： 相对没有那么安全，但是高效。
submit: 提交
reset： 重置
button: 普通按钮
image： 图片按钮
-->
<form action="1.我的第一个网页.html" method="get">
    <p>账号: <input type="text" name="username"> </p>
    <p>密码: <input type="password" name="pwd"> </p>
<!--使用单选框时书写选择初始值
如果要单选 将两个元素写进一个组中（name相同）
-->
    <p>
        <input type="radio" name="sex" value="boy" checked>男
        <input type="radio" name="sex" value="girl">女
    </p>
    <!--按钮-->
    <p>
        <input type="button" value="点击出发" name="btn" >
        <input type="image" src="../resources/image/1.jpg" name="ima">
    </p>
    <!--下拉框-->
    <p>国家
        <select name="国家" id="国家">
            <option value="中国" selected>中国</option>
            <option value="韩国" >韩国</option>
            <option value="英国" >美国</option>
        </select>
    </p>
    <!--文本域-->
    <p>

        反馈 <textarea name="textarea" id="" cols="30" rows="10"></textarea>
    </p>
    <!--文件域-->
    <p>
        <input type="file" name="files" >
    </p>
<!--滑块-->
    <p>亮度:
        <input type="range" name="voice" max="100" min="0" step="2">
    </p>
<!-- 邮箱验证-->
    <p>邮箱:
        <input type="email" name="email" >
    </p>

    <p>数字:
        <input type="number" name="num" max="100" min="0" step="1" value="0">
    </p>

    <p>URL:
        <input type="url" name="url">
    </p>
<!--搜索框-->
    <p>搜索:
        <input type="search" name="search">
    </p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>

</form>
</body>
</html>

表单应用

  • 隐藏：hidden
  • 禁用：disabled
  • 只读：readonly
  • 提示信息：placeholder
  • 必填项（非空判断）：required
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线（Vue中运用 AntVG6）
Vue事件处理的基本使用
Vue后台项目的记录 （一）
前后端分离vue跨域，devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-08-15 15:25:42  更:2021-08-15 15:27:32 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年12日历 -2024/12/26 17:36:47-

图片自动播放器
↓图片自动播放器↓ 		TxT小说阅读器
↓语音阅读,小说下载,古典文学↓ 		一键清除垃圾
↓轻轻一点,清除系统垃圾↓ 		图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码
数据统计