初识HTML

什么是HTML

  1. Hyper Text Markup Language
  2. 超文本标记语言
  3. 超文本包括:文字、图片、音频、视频、动画等

HTML发展史

HTML5的优势

W3C标准

常见IDE

IDEA开发HTML

IDEA创建HTML文件,并用浏览器打开

配置浏览器

HTML基础

HTML基本结构

HTML注释

<!-- HTML注释 -->

网页基本信息

  1. DOCTYPE声明
  2. 标签
    </li>
    <li>
    <meta>标签
    </li>
    </ol>
    <pre><code class="language-html"><!-- DOCTYPE:告诉浏览器,要使用什么规范 -->
    <!DOCTYPE html>
    <html lang="en">
    <!-- head标签代表网页头部 -->
    <head>
    <!-- meta描述性标签,用来描述网站的一些信息 -->
    <!-- meta一般用来做SEO(搜索引擎优化) -->
    <meta charset="UTF-8">
    <meta name="keywords" content="网站关键词描述">
    <meta name="description" content="网站描述">

    <!-- title网页标题 -->
    <title>我的第一个页面</title>
    </head>
    <!-- body标签代表网页主体 -->
    <body>
    Hello World!
    </body>
    </html>
    </code></pre>
    <p><a name="hPOMI"></a></p>
    <h2 id="网页基本标签">网页基本标签</h2>
    <ol>
    <li>标题标签</li>
    <li>段落标签</li>
    <li>换行标签</li>
    <li>水平线标签</li>
    <li>字体样式标签</li>
    <li>注释和特殊符号</li>
    </ol>
    <pre><code class="language-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>

    <!-- 段落标签 -->
    <h1>沁园春·雪</h1>
    <p>北国风光,千里冰封,万里雪飘。</p>
    <p>望长城内外,惟余莽莽;大河上下,顿失滔滔。</p>
    <p>山舞银蛇,原驰蜡象,欲与天公试比高。</p>
    <p>须晴日,看红装素裹,分外妖娆。</p>
    <p>江山如此多娇,引无数英雄竞折腰。</p>
    <p>惜秦皇汉武,略输文采;唐宗宋祖,稍逊风骚。</p>
    <p>一代天骄,成吉思汗,只识弯弓射大雕。</p>
    <p>俱往矣,数风流人物,还看今朝。</p>

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

    <!-- 换行标签 -->
    <h1>沁园春·长沙</h1>
    独立寒秋,湘江北去,橘子洲头。<br/>
    看万山红遍,层林尽染;漫江碧透,百舸争流。<br/>
    鹰击长空,鱼翔浅底,万类霜天竞自由。<br/>
    怅寥廓,问苍茫大地,谁主沉浮?<br/>
    携来百侣曾游。忆往昔峥嵘岁月稠。<br/>
    恰同学少年,风华正茂;书生意气,挥斥方遒。<br/>
    指点江山,激扬文字,粪土当年万户侯。<br/>
    曾记否,到中流击水,浪遏飞舟?<br/>

    <!-- 字体样式标签 -->
    <p>粗体 <strong>样本 hello</strong></p>
    <p>斜体 <em>样本 hello</em></p>

    <!-- 特殊符号 -->
    空 格<br/>
    空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格<br/>
    大于<br/>
    &gt;<br/>
    小于<br/>
    &lt;<br/>
    版权符号<br/>
    &copy;版权所有<br/>
    </body>
    </html>
    </code></pre>
    <p><a name="7uLBq"></a></p>
    <h2 id="图像标签">图像标签</h2>
    <p><img src="https://cdn.nlark.com/yuque/0/2021/png/2707044/1610725493669-1718ef30-35bc-41b8-b095-6d964a88ad08.png#align=left&display=inline&height=396&margin=%5Bobject%20Object%5D&name=image.png&originHeight=396&originWidth=1097&size=181399&status=done&style=none&width=1097" alt="image.png" loading="lazy"></p>
    <pre><code class="language-html"><!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>图像标签</title>
    </head>
    <body>
    <!--
    src:图像地址(必填)
    相对地址(推荐使用),绝对地址
    ../ 上一级目录
    alt:图像名称(必填)
    -->
    <img src="../resources/image/1.jpg" alt="图片名称" title="悬停文字" width="1024" height="577">
    <img src="../resources/image/2.jpg" alt="图片名称" title="悬停文字" width="1024" height="577">
    </body>
    </html>
    </code></pre>
    <p><a name="cpNNK"></a></p>
    <h2 id="链接标签">链接标签</h2>
    <p><img src="https://cdn.nlark.com/yuque/0/2021/png/2707044/1610726675846-f89199d5-3729-49ed-94cc-de2b976853a2.png#align=left&display=inline&height=157&margin=%5Bobject%20Object%5D&name=image.png&originHeight=157&originWidth=871&size=102853&status=done&style=none&width=871" alt="image.png" loading="lazy"></p>
    <ol>
    <li>文本超链接</li>
    <li>图像超链接</li>
    <li>页面间链接:从一个页面链接到另一个页面</li>
    <li>锚链接</li>
    <li>页面间链接+锚链接:从一个页面链接到另一个页面的锚点</li>
    <li>功能性链接
    <ol>
    <li>邮件链接</li>
    <li>QQ链接:使用QQ推广网站的推广工具</li>
    </ol>
    </li>
    </ol>
    <p><img src="https://cdn.nlark.com/yuque/0/2021/png/2707044/1610809069911-a5526e42-a633-49b5-be08-bd4b2f1b7634.png#align=left&display=inline&height=864&margin=%5Bobject%20Object%5D&name=image.png&originHeight=864&originWidth=847&size=102103&status=done&style=none&width=847" alt="image.png" loading="lazy"></p>
    <pre><code class="language-html"><!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>链接标签</title>
    </head>
    <body>
    <p><a name="top" href="#bottom">直达底部</a></p>

    <!--
    a标签
    href:必填,表示要跳转到哪个页面
    target:表示窗口在哪里打开
    _blank 在新标签打开
    _self 默认,在本页打开
    -->
    <a href="1.我的第一个网页.html" target="">默认跳转</a><br>
    <a href="1.我的第一个网页.html" target="_self">本页跳转</a><br>
    <a href="https://www.baidu.com" target="_blank">新标签跳转</a><br>

    <a href="1.我的第一个网页.html">
    <img src="../resources/image/1.jpg" alt="图片名称" title="悬停文字" width="1024" height="577">
    </a>
    <p><a>
    <img src="../resources/image/1.jpg" alt="图片名称" title="悬停文字" width="1024" height="577">
    </a></p>
    <p><a>
    <img src="../resources/image/1.jpg" alt="图片名称" title="悬停文字" width="1024" height="577">
    </a></p>
    <p><a>
    <img src="../resources/image/1.jpg" alt="图片名称" title="悬停文字" width="1024" height="577">
    </a></p>

    <!--
    锚链接:
    1.需要一个锚标记,使用name
    2.跳转到标记
    -->
    <p><a name="bottom" href="#top">回到顶部</a></p>
    <!-- 页面间链接+锚链接:从一个页面链接到另一个页面的锚点 -->
    <p><a href="2.基本标签.html/#bottom" target="_blank">跳转到基本标签页面底部</a></p>

    <!--
    功能性链接:
    邮件链接:mailto
    QQ链接
    -->
    <p><a href="mailto:wl3pb@163.com">点击给我发邮件</a></p>
    <p>
    <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=962307062&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:962307062:53" alt="在线咨询" title="在线咨询"/></a>
    </p>
    </body>
    </html>
    </code></pre>
    <p><a name="V7PFi"></a></p>
    <h2 id="块元素和行内元素">块元素和行内元素</h2>
    <p><img src="https://cdn.nlark.com/yuque/0/2021/png/2707044/1610809208419-aa2a63e7-2133-4798-b3af-0dc9dadcd7d9.png#align=left&display=inline&height=489&margin=%5Bobject%20Object%5D&name=image.png&originHeight=489&originWidth=1163&size=116043&status=done&style=none&width=1163" alt="image.png" loading="lazy"><br>
    <a name="cp4Eh"></a></p>
    <h2 id="列表标签">列表标签</h2>
    <p><img src="https://cdn.nlark.com/yuque/0/2021/png/2707044/1610809416138-a9e03834-100b-4d46-95cc-c29f0f73ca31.png#align=left&display=inline&height=337&margin=%5Bobject%20Object%5D&name=image.png&originHeight=337&originWidth=977&size=201109&status=done&style=none&width=977" alt="image.png" loading="lazy"></p>
    <pre><code class="language-html"><!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>列表标签</title>
    </head>
    <body>
    <!--有序列表-->
    <ol>
    <li>java</li>
    <li>python</li>
    <li>javascript</li>
    </ol>
    <hr/>
    <!--无序列表-->
    <ul>
    <li>java</li>
    <li>python</li>
    <li>javascript</li>
    </ul>
    <hr/>
    <!--自定义列表
    dl:标签
    dt:列表名称
    dd:列表内容
    -->
    <dl>
    <dt>编程语言</dt>
    <dd>java</dd>
    <dd>python</dd>
    <dd>javascript</dd>

    <dt>武功秘籍</dt>
    <dd>九阳神功</dd>
    <dd>九阴真经</dd>
    <dd>降龙十八掌</dd>
    </dl>
    </body>
    </html>
    </code></pre>
    <p><a name="On93g"></a></p>
    <h2 id="表格标签">表格标签</h2>
    <p><img src="https://cdn.nlark.com/yuque/0/2021/png/2707044/1610810166567-24db16b4-861f-45cd-8905-74f4ee07e81d.png#align=left&display=inline&height=528&margin=%5Bobject%20Object%5D&name=image.png&originHeight=528&originWidth=1106&size=152761&status=done&style=none&width=1106" alt="image.png" loading="lazy"></p>
    <pre><code class="language-html"><!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>
    <td>2-4</td>
    </tr>
    <tr>
    <td>3-1</td>
    <td>3-2</td>
    <td>3-3</td>
    </tr>
    </table>
    </body>
    </html>
    </code></pre>
    <p><a name="TtZ8j"></a></p>
    <h2 id="媒体元素:音频和视频">媒体元素:音频和视频</h2>
    <p><img src="https://cdn.nlark.com/yuque/0/2021/png/2707044/1610810876173-1b9f100f-ea68-4c00-a2ac-aa6f3201eb1a.png#align=left&display=inline&height=214&margin=%5Bobject%20Object%5D&name=image.png&originHeight=214&originWidth=360&size=43328&status=done&style=none&width=360" alt="image.png" loading="lazy"></p>
    <pre><code class="language-html"><!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>媒体元素</title>
    </head>
    <body>
    <!--视频和音频
    src 资源路径
    controls 控制条
    autoplay 自动播放
    -->
    <video src="../resources/video/1.mp4" controls autoplay></video>
    <audio src="../resources/audio/1.mp3" controls autoplay></audio>
    </body>
    </html>
    </code></pre>
    <p><a name="ITxcA"></a></p>
    <h1 id="页面结构分析">页面结构分析</h1>
    <p><img src="https://cdn.nlark.com/yuque/0/2021/png/2707044/1610893578889-3b1b85df-9fea-48f5-9d87-26a5ac56aa4b.png#align=left&display=inline&height=565&margin=%5Bobject%20Object%5D&name=image.png&originHeight=565&originWidth=1262&size=269098&status=done&style=none&width=1262" alt="image.png" loading="lazy"></p>
    <pre><code class="language-html"><!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>页面结构</title>
    </head>
    <body>
    <header>
    <h1>页面头部</h1>
    </header>
    <section>
    <h1>页面主体</h1>
    </section>
    <footer>
    <h1>页面脚部</h1>
    </footer>
    </body>
    </html>
    </code></pre>
    <p><a name="2Y7Wr"></a></p>
    <h1 id="iframe内联框架">iframe内联框架</h1>
    <p><s><img src="https://cdn.nlark.com/yuque/0/2021/png/2707044/1610894147163-d7d34118-c2da-4944-93b2-852d17e31840.png#align=left&display=inline&height=250&margin=%5Bobject%20Object%5D&name=image.png&originHeight=250&originWidth=776&size=73012&status=done&style=none&width=776" alt="image.png" loading="lazy"></s></p>
    <pre><code class="language-html"><!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>iframe内联框架</title>
    </head>
    <body>
    <!--iframe内联框架
    src 地址
    w-h 宽度高度
    name 标识名
    -->
    <iframe src="https://www.baidu.com" frameborder="1" width="800px" height="500px"></iframe>

    <!--点击显示跳转页面嵌入到标识名iframe-->
    <iframe src="" name="hello" frameborder="1" width="800px" height="500px"></iframe>
    <a href="3.图像标签.html" target="hello">点击显示跳转页面嵌入到标识名iframe</a>
    </body>
    </html>
    </code></pre>
    <p><a name="KVMKF"></a></p>
    <h1 id="表单">表单</h1>
    <p><strong><img src="https://cdn.nlark.com/yuque/0/2021/png/2707044/1610895462724-08ba034c-c0d2-42fd-94e3-4fc04d6925c2.png#align=left&display=inline&height=578&margin=%5Bobject%20Object%5D&name=image.png&originHeight=578&originWidth=1151&size=291928&status=done&style=none&width=1151" alt="image.png" loading="lazy"></strong></p>
    <pre><code class="language-html"><!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>表单</title>
    </head>
    <body>
    <h1>注册</h1>
    <!--表单form
    action 表单提交的位置,可以是网站,也可以是一个请求处理地址
    method post,get提交方式
    get方式提交:可以在url中看到我们提交的信息,不安全,高效
    post方式提交:可以传输大文件,比较安全,但可以在Network查看,可以处理为不能查看
    -->
    <form action="1.我的第一个网页.html" method="post">
    <p><input type="text" name="username"></p>
    <p><input type="password" name="pwd"></p>
    <p>
    <input type="submit"></input>
    <input type="reset">
    </p>
    </form>
    </body>
    </html>
    </code></pre>
    <p><a name="G4hiQ"></a></p>
    <h2 id="表单元素">表单元素</h2>
    <p><strong><img src="https://cdn.nlark.com/yuque/0/2021/png/2707044/1611066187817-29b1c261-670d-47fa-a247-5b475b29fd95.png#align=left&display=inline&height=523&margin=%5Bobject%20Object%5D&name=image.png&originHeight=523&originWidth=1084&size=408230&status=done&style=none&width=1084" alt="image.png" loading="lazy"></strong></p>
    <ol>
    <li>checked 单选框和多选框选中</li>
    <li>selected 下拉框选中</li>
    <li>readonly 只读</li>
    <li>disabled 禁用</li>
    <li>hidden 隐藏</li>
    </ol>
    <pre><code class="language-html"><!--单选框 radio
    value 值
    name 表示组
    -->
    <p>
    <input type="radio" value="boy" name="sex"/>男
    <input type="radio" value="girl" name="sex"/>女
    </p>
    <!--多选框 checkbox
    value 值
    name 表示组
    -->
    <p>
    <input type="checkbox" value="1" name="number"/>一
    <input type="checkbox" value="2" name="number"/>二
    <input type="checkbox" value="3" name="number"/>三
    </p>
    <!--文本域 textarea
    cols 列
    rows 行
    -->
    <p>反馈
    <textarea name="fankui" cols="20" rows="10">文本内容</textarea>
    </p>
    <!--文本域 textarea
    cols 列
    rows 行
    -->
    <p>文件域
    <input type="file" name="files"/>
    </p>
    <p>数字
    <input type="number" name="num" max="100" min="10" step="5"/>
    </p>
    <p>滑块
    <input type="range" name="voice" max="100" min="0" step="2"/>
    </p>
    <p>搜索框,有叉号,可以删除
    <input type="search" name="search"/>
    </p>
    <!--label标签,增强鼠标可用性,点击文件,文本框获取焦点-->
    <p>
    <label for="mark">你点我试试</label>
    <input type="search" name="search" id="mark"/>
    </p>
    </code></pre>
    <p><a name="rveye"></a></p>
    <h2 id="表单的初级验证">表单的初级验证</h2>
    <ol>
    <li>placeholder 提示信息</li>
    <li>required 非空</li>
    <li>pattern 正则表达式<br>
    <a name="uZzB7"></a></li>
    </ol>
    <h1 id="总结">总结</h1>
    <p><img src="https://cdn.nlark.com/yuque/0/2021/jpeg/2707044/1611070587524-8527c207-f34c-4a65-82e9-a03b045a3860.jpeg" alt="" loading="lazy"></p>

随机推荐

  1. uva 213 Message Decoding

    思路来自紫书...开始时的思路估计100行+,果断放弃!关键:1.正确提取出函数!   initmap():初始化字母与整数的映射.   returnint(x):向后读取x位,并转换为十进制数返回. ...

  2. spring+mybatis实现读写分离

    springmore-core spring+ibatis实现读写分离 特点 无缝结合spring+ibatis,对于程序员来说,是透明的 除了修改配置信息之外,程序的代码不需要修改任何东西 支持sp ...

  3. [转载]git 忽略某些文件

    项目中经常会生成一些Git系统不需要追踪(track)的文件.典型的是在编译生成过程中 产生的文件或是编程器生成的临时备份文件.当然,你不追踪(track)这些文件,可以 平时不用"git ...

  4. JAVA架构师要求

    JAVA架构师要求专业素质要求:1.理解架构师的职责和架构设计的目标.原则及取舍:2.精通架构模式,Transaction.Security.Persistence等机制及实现,IOC.AOP.SOA ...

  5. C++读取ini文件的类

    取自:http://www.viksoe.dk/code/all_mfc.htm,里面有各种MFC常用的类 // Ini.h: interface for the CIni class. // // ...

  6. CLR via C# 混合线程同步构造

    1. 自旋,线程所有权和递归 2. 混合构造 a.ManualResetEventSlim b.SemaphoreSlim c.Monitor d.ReaderWriterLockSlim 3.条件变 ...

  7. .NET Page页面事件执行顺序,以及其作用(OnPreInit()、OnInit()等)

    以按钮事件为测试标准 1. OnPreInit //检查 IsPostBack 属性来确定是不是第一次处理该页. //创建或重新创建动态控件. //动态设置主控页. //动态设置 Theme 属性. ...

  8. jni开发中的常见错误

    * java.lang.UnsatisfiedLinkError: Native method not found: 本地方法没有找到 * 本地函数名写错 * 忘记加载.so文件 没有调用System ...

  9. SQL之left join,inner join,right join

    left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录 right join(右联接) 返回包括右表中的所有记录和左表中联结字段相等的记录inner join(等值连接) 只 ...

  10. python进程间通信

    Process之间有时需要通信,操作系统提供了很多机制来实现进程间的通信. 1. Queue的使用 可以使用multiprocessing模块的Queue实现多进程之间的数据传递,Queue本身是一个 ...