HTML

最新推荐文章于 2021-12-04 15:31:20 发布
最新推荐文章于 2021-12-04 15:31:20 发布
阅读量83 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46804568/article/details/113618132
版权

HTML5

文章目录

  • HTML：Hyper Text Markup Language（超文本标记语言）

  • W3C标准

    • 结构化标准语言（HTML，XML）

    • 表现标准语言（CSS）

    • 行为标准（DOM，ECMAScript）

1、网页的基本信息

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

<html lang="en">

<!-- head标签代表网页头部 -->
<head>
    <!-- meta描述性标签，用来描述我们网站的一些信息 -->
    <!-- meta一般用来做SEO -->
    <meta charset="UTF-8">

    <!-- title网页标签 -->
    <title>Title</title>
</head>

<!-- body标签代表网页主体 -->
<body>

Hello World！

</body>

</html>

2、网页的基本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签</title>
</head>
<body>

<!--标题标签-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>

<!--段落标签-->
<p>君不见，黄河之水天上来，奔流到海不复回。</p>
<p>君不见，高堂明镜悲白发，朝如青丝暮成雪。</p>
<p>人生得意须尽欢，莫使金樽空对月。</p>

<!--水平线标签-->
<hr/>

<!--换行标签-->
君不见，黄河之水天上来，奔流到海不复回。 <br/>
君不见，高堂明镜悲白发，朝如青丝暮成雪。 <br/>
人生得意须尽欢，莫使金樽空对月。 <br/>

<!--粗体和斜体-->
<h1>字体样式标签</h1>

粗体：<strong>i like HTML</strong>
斜体：<em>i like HTML</em>
<br/>

<!--特殊符号-->
空格：空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
<br>
大于符号：&gt;
<br>
小于符号：&lt;

</body>
</html>

3、图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
<!--img学习
src ：图片地址
    推荐使用相对地址
    ../  表示上一级目录

alt ：图片名字（必填），图片加载失败时显示

-->
<img src="../resources/image/1.jpg" alt="头像" title="悬停文字" width="540" height="635">

</body>
</html>

4、链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>

<!--使用name做标记-->
<a name="top">顶部</a>

<a href="#bottom">点击到底部</a>

<br>

<!--a标签
href ：必填，表示要跳转到哪个页面
target ：表示窗口在哪里打开
    _blank  在新标签中打开
    _self   在自己的当前页面打开
-->
<a href="https://www.baidu.com" target="_blank">点击跳转到百度</a>
<a href="https://www.taobao.com/" target="_self">点击跳转到淘宝</a>

<br>

<a href="1.我的第一个网页.html">
    <img src="../resources/image/1.jpg" alt="头像" title="悬停文字" width="540" height="635">
</a>





<!--锚链接
1.需要一个锚标记
2.跳转到标记
#
-->
<a href="#top">回到顶部</a>



<!--功能性链接

邮件链接
-->
<a href="mailto:2426793192@qq.com">点击联系我</a>





<br>
<a name="bottom">底部</a>

</body>
</html>

5、列表

  • 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息。

  • 列表的分类：

    • 无序列表
    • 有序列表
    • 自定义列表
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>

<!--有序列表-->
<ol>
    <li>Java</li>
    <li>C#</li>
    <li>C++/C</li>
    <li>Python</li>
</ol>

<hr>

<!--无序列表-->
<ul>
    <li>Java</li>
    <li>C#</li>
    <li>C++/C</li>
    <li>Python</li>
</ul>

<hr>

<!--自定义列表
dl ：标签
dt ：列表名称
dd ：列表内容
-->
<dl>
    <dt>学科</dt>

    <dd>Java</dd>
    <dd>C#</dd>
    <dd>C++/C</dd>
    <dd>Python</dd>
</dl>


</body>
</html>

6、表格

  • 基本结构

    • 单元格
    • 行
    • 列
    • 跨行
    • 跨列
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>

<!--表格table
行 ：tr
列 ：td
-->
<table border="1px">
    <tr>
        <!--colspan 跨列 -->
        <td colspan="4">1-1</td>
    </tr>

    <tr>
        <!--rowspan 跨行 -->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>

    <tr>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>

</body>
</html>

7、页面结构

元素名描述
header标题头部区域的内容（用于页面或页面中的一块区域）
footer标记脚部区域的内容（用于整个页面或页面中的一块区域）
sectionWeb页面中的一块独立区域
article独立的文章内容
aside相关内容或应用
nav导航类辅助内容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构分析</title>
</head>
<body>

<header>
    <h2>网页头部</h2>
</header>

<section>
    <h2>网页主体</h2>
</section>

<footer>
    <h2>网页脚部</h2>
</footer>

</body>
</html>

8、内联框架

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

<!--iframe内联框架-->
<iframe src="" name="hello" frameborder="0" width="1000px" height="800px"></iframe>

<a href="https://www.baidu.com" target="hello">点击跳转</a>



<!--<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11"-->
<!--        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">-->
<!--</iframe>-->

</body>
</html>

9、表单

属性说明
type指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button、默认为text。
name指定表单元素的名称。
value元素的初始值。type为radio时必须指定一个值。
size指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位。
maxlengthtype为text时或password时，输入的最大字符数。
checkedtype为radio或checkbox时，指定按钮是否被选中。

  • 表单的应用

    • 隐藏域：hidden
    • 只读：readonly
    • 禁用：disabled

  • 其中文本输入框、密码框、单选框、多选框、按钮、文件域、邮箱验证、URL、数字、滑块、搜索框、提交按钮、重置按钮为input标签中的属性。

  • 下拉框、文本域不是input标签的属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>

<h1>注册</h1>

<!--表单

action ：表单提交的位置，可以是网站，也可以是一个请求处理地址
method ：post，get 提交方式
            get方式提交 ：我们可以在URL中看到我们提交的信息，不安全，但高效
            post方式提交 ：比较安全，可以传输大文件
-->
<form action="1.我的第一个网页.html" method="get">

    <!--文本输入框 ：input type="text"
    value ：默认初始值
    maxlength ：最长能写几个字符
    size ：文本框的长度
    placeholder ：作用于输入框中，用于提示信息
    required ：非空判断
    -->
    <p>名字：<input type="text" name="username" placeholder="请输入用户名" required> </p>


    <!--密码框 ：<input type="password"-->
    <p>密码：<input type="password" name="pwd" placeholder="请输入密码" required> </p>


    <!--单选框
    input type="radio"
    value ：单选框的值
    name ：表示组，组名相同的为一组
    checked ：默认选中
    -->
    <p>性别：
        <input type="radio" value="boy" name="sex" checked>男
        <input type="radio" value="girl" name="sex">女
    </p>


    <!--多选框
    input type="checkbox"
    -->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby" checked>敲代码
        <input type="checkbox" value="eat" name="hobby">吃饭
        <input type="checkbox" value="game" name="hobby">玩游戏
    </p>


    <!--按钮：
    input type="button" ：普通按钮
    input type="image" ：图像按钮
    input type="submit" ：提交按钮
    input type="reset" ：重置按钮
    -->
    <p>按钮：
        <input type="button" name="btn1" value="请点击">
<!--        <input type="image" src="../resources/image/1.jpg" width="540" height="635">-->
    </p>


    <!--文件域
    input type="file"
    -->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>


    <!--下拉框，列表框
    selected ：默认选中
    -->
    <p>国家：
        <select name="nation">
            <option value="China" selected>中国</option>
            <option value="USA">美国</option>
            <option value="Japan">日本</option>
            <option value="UK">英国</option>
        </select>
    </p>


    <!--文本域
    -->
    <p>反馈：
        <textarea name="textarea" cols="50" rows="10"></textarea>
    </p>



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


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


    <!--数字-->
    <p>商品数量
        <input type="number" name="number" 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="submit">
        <input type="reset">
    </p>

</form>

</body>
</html>
辛夷陵
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML入门与进阶以及HTML5
wuyxinu的博客
12-12 38万+
目录 一、简介 1、前端开发最核心技术 （1）HTML是什么？ （2）CSS （3）JavaScript 2、前端开发其他技术 二、基础内容 1.基础总结 2.HTML的基本标签 (1)HTML标签 (2)head标签 (3)body标签 3、段落与文字 (一)、段落标签 (二)、网页特殊符号 (三)、自闭合标签 (四)、块元素和行内元素 (五)、练...
HTML期末设计——代码篇
greengirl5的博客
06-22 13万+
事先声明 这个网页设计也就是用了我学到的知识做的一个中规中矩的网页，可以给以后的大一新生们做个参考，和商业网站的效果肯定是没得比的，期望太高的可以关掉了 引入页 效果图： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>欢迎来到香氛密语</title> <style>
制作一个简单HTML个人网页网页（HTML+CSS）
热门推荐
weixin_46153254的博客
12-04 35万+
制作一个简单的HTML个人网页
一套后台管理html模版
08-04
【标题】：“一套后台管理html模版” 这套后台管理HTML模板是专为构建高效、功能丰富的后台管理系统界面设计的。HTML模版是前端开发的基础，它定义了网页的结构和样式，使得开发者能够快速搭建出美观且易于操作的...
HTML动态爱心代码爱心满屏
11-07
HTML动态爱心代码满屏爱心免费下载
网上订餐系统模板html源码
06-11
网上订餐系统模板HTML源码是一个用于构建在线订餐平台的前端资源，它包含了实现基本功能所需的HTML文件。由于描述中提到该源码是静态的，这意味着它不包含任何服务器端代码或与数据库的交互，因此它主要用于展示界面...
纯HTML网页源码
11-02
HTML，全称HyperText Markup Language，即超文本标记语言，是构建互联网页面的基础。它是一种标记语言，通过一系列标签来描述网页的结构和内容。"纯HTML网页源码"指的是只包含HTML代码，不依赖其他如JavaScript、CSS...
爱心代码 李峋同款爱心等免费下载 exe、py、html格式
最新发布
11-12
【标题】"爱心代码 李峋同款爱心等免费下载 exe、py、html格式" 提供了一组与编程相关的资源，这些资源包含了不同格式的爱心图案实现，包括可执行文件（exe）、Python脚本（py）以及HTML页面（html）。这暗示我们...
html网页做的动态爱心（超好看）
11-07
用html+css+JavaScript网页做的动态爱心，浪漫十足
学生个人简介html网页
11-17
在IT领域，HTML（HyperText Markup Language）是用于创建网页的标准标记语言，是网页开发的基础。这个"学生个人简介html网页"项目是一个非常适合初学者学习的实例，它可以帮助理解HTML和CSS的基本概念以及如何结合...
HTML播放海康视频的RTSP视频流
07-04
HTML播放海康视频的RTSP视频流是一种在网页上实现监控视频实时播放的技术。RTSP（Real Time Streaming Protocol）是一种应用层协议，用于控制多媒体数据的传输，常用于IP摄像机、视频服务器等设备的视频流媒体服务。...
网页设计期末大作业+html+css
05-25
适合学生的html5响应式网站 成品可以让你们修改吗？ 学生网页成品坚持每周更新 学生网站一定不能太专业，否则老师会发现的！ DIV+css+js学生网站如何做？ 不靠这个吃饭--你还用自己做网站吗？ 大学生静态网页成品...
网页向女友告白和纪念日专用特效（html版）
06-27
网页向女友告白和纪念日专用特效（html版）是一种创新的、个性化的方式来表达情感，尤其是在特殊的纪念日里。这个项目将原本基于ASPX的技术转换为HTML格式，使其变得更加通用和易于使用。HTML，全称超文本标记语言，...
html+css网页设计源码(简洁)
12-25
HTML 和 CSS 是构建网页设计的基础，本资源提供了一套简洁的网页设计源码，适合初学者和需要快速搭建页面的开发者。这套源码充分展示了如何使用 HTML 结构元素和 CSS 样式规则来创建一个清晰、易读且具有基本功能的...
简单html个人网站
07-04
HTML（HyperText Markup Language）是用于创建网页的标准标记语言，它是互联网上应用最为广泛的语言，也是构成网页的基础。"简单html个人网站"标题表明我们正在讨论一个基础的HTML模板，适用于构建个人网站。这个...
Html精美网页模板
09-12
HTML是一种标记语言，它是网页设计的基础，用于构建和呈现网页内容。"Html精美网页模板"是一份集合，其中包含了20个精心设计的HTML模板，这些模板覆盖了各种常见的网页场景，如404错误页面、用户登录界面、通用Web...
HTML5+CSS3 精美登陆界面源码
01-19
HTML5和CSS3是现代网页开发的两大核心技术，它们为创建功能丰富且视觉吸引人的网页提供了强大的工具。在这个“HTML5+CSS3 精美登陆界面源码”压缩包中，包含了三个精心设计的登录界面，每一个都充分利用了HTML5的新...
HTML基础知识详解
"HTML知识点汇总" HTML（HyperText Markup Language）是一种标记语言，用于构建和组织网页的结构。它是Web开发的基础，允许开发者通过各种标签来指定网页内容的样式和布局。以下是对HTML部分核心知识点的详细说明：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值