心得技巧

html5 HTML/Xhtml CSS XML/XSLT Dreamweaver教程 Frontpage教程心得技巧

上一篇: Eclipse+Java+Swing+Mysql实现电... 下一篇:界面编程实战分析------计算器实...

Html基础

发布时间：2022-07-05 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了Html基础，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

HTML详解

（前端页面三大部分：HTML、CSS、JS）

初识HTML

HTML
- HyPEr Text Markup Language（超文本标记语言）
- 何谓超文本：文字、图片、音频、视频、动画等
- 发展史：@R_777_1047@ + CSS 3
HTML 5 优势：
- 世界知名浏览器都对其支持
- 市场的需求
- 跨平台
W3C标准
- World Wide Web Consortium （万维网联盟）
- 标准包括：
  - 结构化标准语言（HTML、XML）
  - 表现标准语言（CSS）
  - 行为标准（DOM、ecmascript）
HTML 基本结构：

<!DOCTYPE html>
<html lang="en">
<!--head代表网页的头部-->
<head>
    <!--meta描述型标签，它用来描述我们网站的一些信息-->
    <!--meta一般用来做SEO-->
    <;meta charset="UTF-8">
    <meta name="keywords" content="Java">
    <meta name="description" content="学习进步">
    <!--tITle网页标题-->
    <title>我的第一个网页</title>
</head>
<!--body标签代表网页主页-->
<body>
Hello,World!
</body>
</html>   <!--与上面相呼应，内容要在整个大框架中--> 成对出现的

SEO（SeArch Engine Optimization）：汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位，获得品牌收益。很大程度上是网站经营者的一种商业行为，将自己或自己公司的排名前移。

网页基本标签

标题标签
段落标签
换行标签
水平线标签
字体样式标签
注释和特殊符号标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>爱呆呆的365天</title>
</head>
<body>
<!--标题标签-->
<h1>小呆呆</h1>
<h2>臭宝贝</h2>
<h3>小傻瓜</h3>
<h4>亲爱的</h4>
<h5>宝宝</h5>
<!--段落标签-->
<p>亲爱的，慢慢飞，小心前面带刺的玫瑰</p>  <!--快捷键：p + Tab键 -->
<p>我爱你，就像老鼠爱大米</p>
<!--水平线标签-->
<hr/>
<!--换行标签-->
<br/>
<!--粗体，斜体-->
<h3>字体样式标签</h3>
<!--粗体： -->
<strong>I Love You</strong> <br/>
<!--斜体： -->
<em>I Love You</em>
<br/>
<!--特殊符号-->
<!--空 格-->
<!--空&amp;nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格 <br/>-->
<!--<br/>-->
<!--&gt;-->
<!--<br/>-->
<!--&lt;-->
<!--<br/>-->
&copy;版权所有
<!--其他的皆可以百度-->
</body>
</html>

图像、超链接、网页布局

图像链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--<img 学习
 src：图片地址
     相对地址（推荐使用） ，绝对地址
     ../   代表上一级目录
alt: 图片名字（必填）
 -->
<img src="../image/LOGo.jpg" alt="胜利女神" title="图片名字" width="600" height="400">
</body>
</html>

超链接

@H_360_89@ Html基础

行内元素和块元素

块元素
- 无论内容多少，该元素独占一行
- (p , h1~h6...)

行内元素

内容撑开宽度，左右都是行内元素的可以排在一行
(a , strong , em ...)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签的学习</title>
</head>
<body>
<!--使用id作为标记-->
<a id="top"></a>
<br>
<!--<a 标签
href: 必填，表示要跳转到哪个页面
target: 表示窗口在哪里打开
       _blank 在新标签页打开
       _self  在自己的页面打开  （默认的）
 -->
<a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面一</a>
<a href="https://www.baidu.COM">点击我跳转到百度一</a>
<p>
    <a href="1.我的第一个网页.html">
        <img src="../image/logo.jpg" alt="雷姆" title="图片名字" width="600" height="400">
    </a>
</p>
<!--锚链接（实现页面间的跳转）
1.需要一个锚标记
2.跳转到标记
#
-->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="#top">回到顶部</a>
<!--功能性链接
邮件链接：mailto:
QQ推广
-->
<a href="mailto:1543510611@qq.com">点击联系我</a>

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2::52" alt="你好,加我领取小电影" title="你好,加我领取小电影"/>
</a>
</body>
</html>

列表、表格、媒体元素

列表

什么是列表
- 列表就是信息资源的一种表现形式。它可以使信息结构化和条理化，并以列表的形式展现出来
列表的分类
- 有序列表 Order list
- 无序列表 Unordered list
- 定义列表 Definition list

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>列表的学习</title>
</head>
<body>
<!--有序列表（order list）
应用范围：试卷、问答-->
<ol>
  <li>Java</li>
  <li>Python</li>
  <li>运维</li>
  <li>前端</li>
  <li>C/C++</li>
</ol>
<hr/>
<!--无序列表
应用范围：导航，侧边栏。。
-->
<ul>
  <li>Java</li>
  <li>Python</li>
  <li>运维</li>
  <li>前端</li>
  <li>C/C++</li>
</ul>
<!--自定义列表
dl：标签
dt：列表名称
dd：列表内容
应用范围：公司网站的底部
-->
<dl>
  <dt>学科</dt>
  <dd>Java</dd>
  <dd>Python</dd>
  <dd>C++</dd>
</dl>
</body>
</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="3">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>

视频&音频

视频元素
- video
音频元素
- audio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>
<!--音频、视频
src：资源路径
controls：控制条
autoplay：自动播放
-->
<video src="../resources/video/冰山.mp4" controls autoplay></video>
<audio src="../resources/audio/萤火虫和你(钢琴原版).flac" controls autoplay> </audio>
</body>
</html>

Html基础

内联框架iframe

Html基础

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- iframe 内联框架
src:地址
w-h:宽度,高度
-->

<!-- iframe内联框架是在页面中开启一个小页面
    iframe标签中有一个name标签,可以通过a标签的target标签来锁定,
    将a标签跳转的页面,跳转到iframe标签的src中
 -->
<iframe src="" name="hello" frameborder="0" width="1000px" height="800px"></iframe>

<a href="https://www.bilibili.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>

表单及表单的应用（重点)

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:不可以在提交后的url中查看到,它安全,但不高效,可以传输大文件

-->
    <form action="1.我的第一个网页.html" method="get">
    <!--文本输入框:input type="text"
        value="yujian" 默认初始值
        maxlength = "8" 最长可以写几个字符
        size = "30" 文本框长度

    -->
        <p>用户:<input type="text" name="username" ></p>
        <p>密码:<input type="password" name="pwd" ></p>

        <!--单选框 type = "radio"
            value:单选框的值
            name:组别假如不一样,就可以多选
            checked:表示默认被选中
        -->
        <p>
            性别:
            <input type="radio" name="sex" value="boy" checked>男
            <input type="radio" name="sex" value="girl">女
            <input type="radio" name="sex" value="yao">人妖
        </p>
        <!--多选框
            checked:表示默认被选中
        -->
        <p>爱好:
            <input type="checkbox" value="basketball" name="hobbys">篮球
            <input type="checkbox" value="football" name="hobbys" checked>足球
            <input type="checkbox" value="table tennis" name="hobbys">乒乓球
        </p>
        <!--按钮
            input type="button" 普通按钮
            nput type="image" 图片按钮
            input type="submit" 提交按钮
            input type="reset" 重置按钮
        -->
        <p>按钮:
            <input type="button" name="BTn1" value="点击变长" >
            <input type="image" src="../image/logo.jpg" width="50px" height="50px">
        </p>
        <!--下拉框,列表框

        -->
        <p>国家:
            <select name="选择的国家" id="">
                <option value="china">中国</option>
                <option value="美国">美国</option>
                <option value="瑞士" selected>瑞士</option>
                <option value="日本">日本</option>
            </select>
        </p>
        <!--文本域
            cols="30" 表示30列
            rows="10" 表示10行
        -->
        <p>
            <textarea name="textarea"  cols="30" rows="10">文本内容:</textarea>
        </p>

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

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

        <!--URL-->
        <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" max="100" min="0">
        </p>

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

        <p>
            <input type="submit">
            <input type="reset">
        </p>
    </form>
</body>
</html>

表单的应用

隐藏域 hidden
只读 readonly
禁用 disabled

表单初级验证（重点）

用户提示placeholder

非空判断 required

正则表达式 parrent

```
https://www.jb51.net/tools/regexsc.htm
```

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单的学习</title>
</head>
<body>
<h2>注册</h2>
<!--form表单
action：表单提交的位置，可以是网站，也可以是请求处理的地址
method： post, get 提交方式
    get 方式提交，我们可以在url中看到我们提交的信息，不安全，高效
    post ：比较安全，传输大文件
-->
<form action="1.我的第一个网页.html" method="post" >
<!--文本输入框：input type="text"
                 value     默认初始值
                maxlength  最长能写几个字符
                size   文本框长度
                   -->
    <p>名字： <input type="text" name="username" placeholder="请输入姓名" required></p>
<!--密码框：input type="password"-->
    <p>密码： <input type="password" name="pwd"></p>
<!--单选框标签
    input type="radio"
    value : 单选框的值
    name  ：表示同属于一个组（在同一个组只能选一个）
      -->
    <p>性别：
        <input type="radio" value="boy" name="sex">男
        <input type="radio" value="girl" name="sex">女
    </p>
<!--多选框
        input type="checkbox"
        checked  默认选中
        -->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby" checked>睡觉
        <input type="checkbox" value="code" name="hobby">代码
        <input type="checkbox" value="chat" 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">-->
    </p>
<!--    下拉框，列表框 -->
    <p>国家：
        <select name="列表名称">
            <option value="China">中国</option>
            <option value="US">美国</option>
            <option value="eth">瑞士</option>
            <option value="india">印度</option>
        </select>
    </p>
<!--    文本域
     textarea
     cols="30" rows="10"  长 宽
   -->
    <p>
        <textarea name="textarea"  cols="30" rows="10">文本内容</textarea>
    </p>
<!--    文件域
      type="file" name="files"
-->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>
<!--邮件验证-->
    <p>邮箱：
        <input type="email" name="email">
    </p>
<!--URL-->
    <p>URL:
        <input type="url" name="url">
    </p>
<!--数字验证-->
    <p>数字:
        <input type="number" name="num" max="100" min="0" step="10">
    </p>
<!--滑块-->
    <p>滑块：
        <input type="range" name="voice" max="100" min="0" step="2">
    </p>
<!--搜索框-->
    <p>搜索：
        <input type="search" name="serach">
    </p>
<!--增强鼠标可用性(点击文字就可以到框内)-->
    <p>
        <label for="mark">你点我试试</label>
        <input type="text" id="mark">
    </p>
<!--正则表达式
https://www.jb51.net/tools/regexsc.htm
-->
    <p>自定义邮箱：
        <input type="text" name="DIYmail" pattern="/^([a-z0-9_.-]+)@([da-z.-]+).([a-z.]{2,6})$/
/^[a-zd]+(.[a-zd]+)*@([da-z](-[da-z])?)+(.{1,2}[a-z]+)+$/或w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*">
    </p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>
</body>
</html>

脚本宝典总结

以上是脚本宝典为你收集整理的Html基础全部内容，希望文章能够帮你解决Html基础所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：c++java list load load php python sort 优化优化正则表达式正则表达式电影电影程序员程序员索引索引资源资源

上一篇: Eclipse+Java+Swing+Mysql实现电... 下一篇:界面编程实战分析------计算器实...

猜你在找的心得技巧相关文章

clion结合vcpkg以及GTest的使用 2022-07-07
EGF 2022-06-06
ExtJS 布局-Column布局（Column layout） 2022-06-05
颜色之ARGB与RGB、RGBA的区别与介绍 2022-04-15
rgba中的a是什么意思 CSS之RGBA颜色指南 2022-04-15
rootfs -根文件系统制作 2022-07-07
网页简单布局之结构与表现原则分享 2022-04-15
小项目中怎么防止Vue的闪现画面效果 2022-04-15
隐藏 Web 中的元素方法及优缺点教程详解 2022-04-15
告别硬编码让你的前端表格自动计算的实例代码 2022-04-15

全站导航更多