Happy Birthday

HTML(Hyper Text Markup Language)超文本标记语言

HTML(Hyper Text Markup Language)超文本标记语言

W3C(World Wide Web Consortium)万维网联盟

  • 成立于1994年，Web技术领域最权威和最具影响力的国际中立性技术标准机构
  • W3官网

W3C标准包括

  • 结构化标准语言(HTML、XML)
  • 表现标准语言(CSS)
  • 行为标准(DOM、ECMAScript)

网页基本结构

<!--DOCTYPE：告诉浏览器使用什么规范-->
<!DOCTYPE html>
 
<html lang="en">
 
<!--网页头部-->
<head>
    <!--  meta描述性标签，用来描述网站的一些信息  -->
    <!--  meta一般用来做SEO  -->
    <meta charset="UTF-8">
    <meta name="keywords" content="罗赞">
    <meta name="description" content="罗赞的个人博客">
 
    <!--  网页标题  -->
    <title>Title</title>
</head>
 
<!--网页主体-->
<body>
 
</body>
</html>

网页标签

  • 标题标签
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
  • 段落标签
<!--一个p标签就是一段-->
<p>Hello</p>
<p>world</p>
  • 换行标签
<!--虽然换行了，但还是同一段-->
Hello <br>
world <br>
  • 水平线标签
<hr>
  • 字体样式标签
<!--粗体、斜体-->
粗体：<strong>I love you.</strong>
斜体：<em>I love you.</em>
  • 注释和特殊符号
<!--特殊符号-->
空格&nbsp;
大于号&gt;
小于号&lt;
版权符号&copy;
<!--
多行
注释
-->
  • 图像标签
<!--
src:图片地址
alt:加载失败时显示
title:鼠标悬停时的文字
width:宽度
height:高度
-->
<img src="../Resources/image/Cover.jpg" alt="A-SOUL" title="Cover" width="1000">

超链接

  • 页面间链接
<!--
<a href="path" target="目标窗口位置">链接文本或图像</a>
href*:链接路径
target:表示窗口在哪里打开
    _blank 在新标签页打开
    _self 在当前页面打开
    _parent
    _top
 
-->
<a href="图像标签.html" target="_blank">点击我跳转到图片</a><br>
<a href="基本标签.html" target="_self">
    <img src="../Resources/image/Cover.jpg" alt="" width="500">
</a>
  • 锚链接
<!--
1.需要一个锚标记
2.跳转到标记
3.#
-->
<a name="top">顶部</a><br>
<a href="#top">回到顶部</a>
<a name="down">底部</a>
<a href="链接标签.html#down">回到链接标签底部</a>
  • 功能性链接
<!--
邮件链接: mailto:邮箱地址
QQ推广链接
-->
<a href="mailto:2273038475@qq.com">点击联系我</a>
 
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2273038475&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2:2273038475:53" alt="点击这里给我发消息" title="点击这里给我发消息"/>
</a>

行内元素和块元素

行内元素和块元素

列表

  • 无序列表
<!--有序ordered列表list-->
<ol>
    <li>JAVA</li>
    <li>Python</li>
    <li>C++</li>
    <li>C#</li>
</ol>
  • 有序列表
<!--无序unordered列表list-->
<!--
应用范围：导航、侧边栏
-->
<ul>
    <li>高等数学</li>
    <li>大学英语</li>
    <li>高级语言程序设计</li>
    <li>思想道德与法治</li>
</ul>
  • 自定义列表
<!--自定义defined列表list-->
<!--
dl:标签
dt:列表名称
dd:列表内容
应用范围：公司网站底部
-->
<dl>
    <dt>学科</dt>
 
    <dd>JAVA</dd>
    <dd>Python</dd>
    <dd>C++</dd>
    <dd>C#</dd>
 
    <dt>城市</dt>
 
    <dd>北京</dd>
    <dd>上海</dd>
    <dd>天津</dd>
    <dd>深圳</dd>
 
</dl>

表格

<!--表格table-->
<!--
行(row) tr
列 td
border:边框
-->
<table border="1">
    <tr>
        <!--colspan 跨列-->
        <td>1.1</td>
        <td colspan="2">1.2</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>

媒体元素

<!--视频-->
<!--
src:资源路径
controls:控制条
autoplay:自动播放
-->
<video src="../Resources/video/超级敏感.mp4" controls autoplay></video>
 
<!--音频-->
<audio src="../Resources/audio/超级敏感.mp3" controls autoplay></audio>

页面结构

页面结构

<!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>

内联结构

<!--iframe内联框架-->
<!--
src:引用页面地址
name:框架标识名
-->
<iframe src="链接标签.html" name="haha" frameborder="0" width="500"></iframe>
<!--在a标签中使用target属性从iframe标签打开页面-->
<a href="视频与音频.html" target="haha">点击跳转视频与音频</a>
 
<!--B站分享-->
<iframe src="//player.bilibili.com/player.html?aid=719360265&bvid=BV1zQ4y1v7wd&cid=446875842&page=1"
        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
</iframe>

表单

  • 表单元素格式
    表单元素格式
  • 表单元素类型
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单form-->
<!--
action:表示向何处发送表单数据（可以是网站，也可以是一个请求处理地址）
method:规定如何发送表单数据（提交方式）
    get:可以在url中看到提交的信息，不安全但高效，不能传输大文件；
    post:无法在url中看到提交的信息，比较安全，可以传输大文件。
-->
<form action="test01.html" method="get">
    <!--文本输入框：input type="text"-->
    <!--
    value:默认初始值
    maxlength:最多能输入几个字符
    size:文本框长度
    -->
    <p>账号：<input type="text" name="username" value="admin" maxlength="10" size="30"></p>
    <!--密码输入框：input type="password"-->
    <p>密码：<input type="password" name="password"></p>
    <p>性别：
        <!--单选框标签
        input typle="radio"
        value:单选框的值
        name:表示组（name一样表示同一组，同时只能选中一个）
        checked:默认选中
        -->
        <input type="radio" name="sex" value="male">男
        <input type="radio" name="sex" value="female" checked>女
    </p>
    <p>下拉框：
        <!--下拉框select
        option:选项
        selected:默认选中-->
        <select name="列表名称">
            <option value="选项的值1">选项1</option>
            <option value="选项的值2">选项2</option>
            <option value="选项的值3" selected>选项3</option>
            <option value="选项的值4">选项4</option>
            <option value="选项的值5">选项5</option>
        </select>
    </p>
    <p>爱好：
        <!--多选框input type="checkbox"
        checked:默认选中
        -->
        <input type="checkbox" name="hobby" value="sleep">睡觉
        <input type="checkbox" name="hobby" value="code" checked>敲代码
        <input type="checkbox" name="hobby" value="game">打游戏
        <input type="checkbox" name="hobby" value="study">学习
    </p>
    <p>反馈：
        <!--文本域textarea
        cols:列数
        rows:行数
        -->
        <textarea name="response" cols="50" rows="20">在这里填写反馈</textarea>
    </p>
    <p>
        <!--文件域input type="file"-->
        <input type="file" name="file">
        <input type="button" name="upload" value="上传">
    </p>
 
    <p>邮箱：
        <!--邮箱input type="email"-->
        <input type="email" name="my-email">
    </p>
    <p>URL：
        <!--URL input type="url"-->
        <input type="url" name="my-url">
    </p>
    <p>数字：
        <!--数字input type="number"
        max:最大值
        min:最小值
        step:步长
        -->
        <input type="number" name="num" max="100" min="0" step="10">
    </p>
 
    <p>音量：
        <!--滑块input type="range"-->
        <input type="range" min="0" max="100" name="voice" step="2">
    </p>
    <p>搜索：
        <!--搜索框input type="search"-->
        <input type="search" name="search">
    </p>
 
    <p>按钮：
        <!--普通按钮button-->
        <input type="button" name="btn1" value="点我">
        <br>
        <!--图片按钮image（具有submit功能）-->
        <input type="image" src="../Resources/image/Cover.jpg" name="bn2" width="100">
    </p>
    <p>
        <!--提交按钮submit-->
        <input type="submit" value="提交">
        <!--重置按钮reset-->
        <input type="reset" value="清空">
    </p>
</form>
</body>
</html>
  • 表单应用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单应用</title>
</head>
<body>
<form action="test01.html" method="get">
    <p>
        <!--增强鼠标可用性-->
        <!--label标签
        for:要聚焦到的控件的id-->
        <label for="mark">点我聚焦到文本框</label>
        <input type="text" name="text" id="mark">
    </p>
   <p>
       <!--只读readonly-->
       <input type="text" value="只给看，不给改" readonly>
   </p>
   <p>
       <!--禁用disabled-->
       <input type="checkbox" name="a">未选中，可改
       <input type="checkbox" name="a" checked disabled>已选中，只读，改不了
       <input type="checkbox" name="a" checked>已选中，可改
       <input type="button" value="点不了" disabled>
   </p>
   <p>
       <!--隐藏域hidden-->
       <input type="button" value="看不见我但我依然存在" hidden>
       <input type="button" value="看得见我">
   </p>
</form>
 
</body>
</html>
  • 表单初级验证
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初级表单验证</title>
</head>
<body>
<form action="test01.html" method="get">
    <!--提示信息placeholder-->
    <p>用户名：
        <input type="text" name="username" placeholder="请输入用户名">
    </p>
 
    <!--必填项required-->
    <p>密码：
        <input type="password" name="password" required>
    </p>
 
    <!--正则表达式-->
    <p>URL：
        <input type="text" name="url" pattern="/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/ 或 [a-zA-z]+://[^\s]*">
    </p>
    
    <p>
        <input type="submit">
    </p>
</form>
</body>
</html>
posted @   Roozen  阅读(77)  评论(0)  编辑  收藏  举报
相关博文：
· HTML介绍&快速入门
· 初识HTML
· 初识HTML
· 1.初识HTML
· 什么是HTML？
阅读排行：
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· DeepSeek在M芯片Mac上本地化部署
· 葡萄城 AI 搜索升级：DeepSeek 加持，客户体验更智能
点击右上角即可分享
微信分享提示