HTML学习

最新推荐文章于 2023-03-02 20:40:05 发布

敷衍小伙

最新推荐文章于 2023-03-02 20:40:05 发布

阅读量72

点赞数

本文链接：https://blog.csdn.net/weixin_45680043/article/details/103575955

版权

HTML

这属于前端的知识。
全写： HyperText Mark-up Language，译名：超文件注标式语言
HTML标记：任何标记都由<>围住，且标记名与小于号之间不能留有空白字符，某些标记需要参数

类似这个就是终结标记

基本结构

title是标题，就是在浏览器中显示的名称，head是头部，body是身体，html包含了它们全部

其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

标签的分类

单标签
只有开始标签没有结束标签, 也就是由一个<>组成的

双标签有开始标签和结束标签, 也就是由一个<>和一个组成的

初级代码学习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是一个新的网页</title>
</head>
<body>

<h1>网页内容</h1>

<em>斜体</em> &nbsp;&nbsp;&nbsp; <strong>粗体</strong> <br/>
<p>水平分割<p>
<hr/>

<p>
    第一行 <br/>
     第二行<br/>
     第三行<br/>
     第四行<br/>
</p>

</body>
</html>

标签含义解释

引起一段强调文本，通常以斜体渲染。
插入一个换行符

水平分割因为标签非常多所以可以看这个

html标签详解

网站的基本标签

标题

  <!--标题标签  h1 + tab键 -->
  <h1>一级标题</h1>
  <!--大于小于号-->
   &gt;
   &lt;
   <!--版权符号-->
   &copy; 版权所有：xxx

  <!--标签中带有参数的  key=value -->

  <!--
  src： 资源图片 ： 图片的路径
  alt： 图片加载失败，表示图片的问题，也即图片描述
  title： 鼠标放在图片上的悬浮提示
  width： 宽
  height：高
  -->
<img src="../新建文件夹/tx.jpg" alt="图片" title="1" width="1000" height="1000">
  
  <!--
超链接：表示从一个地方跳转到另外一个地方  百度

href：要跳转地址
target： 目标打开的窗口，在自己这个当前页面打开，还是在新的页面打开
    _self : 在自己的窗口打开
    _blank： 在新窗口中打开

和图片嵌套使用
-->

<!--<a href="https://www.baidu.com/" target="_self">百度</a>-->

<!--图片标签-->
<a href="https://www.baidu.com/" target="_self">
    <img src="../新建文件夹/tx.jpg">
</a>

邮件链接
<a href="mailto:123456@xxxxx.com">联系我们</a>

块元素
无论内容多少，都是独占一行的

列表表格

代码使用如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表</title>
</head>
<body>
<p>热门</p>   <p>更多</p>
<ul>
    <li>推荐活动|原创</li>
    <li>推荐节目|原创2</li>
    <li>推荐歌单|原创3</li>
    <li>推荐活动|原创4</li>
</ul>
<dl>
    <dt>热门</dt>
</dl>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ol>
<dl>
    <dt>水果</dt>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</dl>
<table border="1px">
    <tr>
        <td colspan="3">流量统计</td>
        <td>流量2</td>
        <td>流量3</td>
        <td>流量4</td>
        <td>流量5</td>
    </tr>
    <tr rowspan="3">
        <td>学</td>
        <td>11</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>学</td>
        <td>11</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>学</td>
        <td>11</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>学</td>
        <td>11</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <iframe name="mainFrame"></iframe>
    <a href="http://www.baidu.com/" target="mainFrame">点击显示</a>>
    <form action="www.baidu.com" method="get">
    <p>名字：<input type="text" name="user"></p>
    <p>密码：<input type="password" name="password"></p>
    <p>
        <input type="submit" value="提交222">
        <input type="reset" value="充值333">
    </p>


        <p>
            <input type="checkbox" name="hobby" value="code">蛇皮
            <input type="checkbox" name="hobby" value="music">zhu皮
            <input type="checkbox" name="hobby" value="girl">niu皮
        </p>
    </form>
    <select name="科目">




</body>
</html>

需要理解的是表格的跨列和跨行
还有三种列表，有序无序和自定义

音频和视频在网页中的使用

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

<!--video 视频标签
src：视频的路径
controls: 提供播放按钮，进度条、下载按钮、全屏按钮、音量控制
autoplay： 自动播放
loop: 循环播放

-->

<!--<video src="../statics/video/china.mp4" controls autoplay></video>-->

<video controls autoplay>
    <source src="../新建文件夹/3.mp4">
</video>
<!--音频播放-->
<audio src="../新建文件夹/xxxxxxxxxx.m4a" autoplay controls>

</audio>


</body>
</html>

表单

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

    <p>163网易         免费邮  企业邮  VIP邮   帮助       </p>        <p>中国邮箱第一品牌</p>
    <p>电子邮箱：<input type="text" name="user"></p>
    <p>设置密码：<input type="password" name="password"></p>
    <p>真实姓名：<input type="name" name="name"></p>
    <form action="" method="get">
        您的性别？<br /><br />
        <label><input name="Fruit" type="radio" value="" />男 </label>
        <label><input name="Fruit" type="radio" value="" />女 </label>
    </form>
    <form action="" method="get">
        <label>1、普通下拉列表菜单</label>
        <select name="">
            <option value="0">DIVCSS5</option>
            <option value="1">DIVCSS5</option>
        </select>
    </form>

<!--文本框 type="text"
value ：文本框默认的初始值
size： 文本框的长度
maxlength： 文本框的最大输入长度
-->
<p>
    <input type="text" name="username" value="用户名" size="30" maxlength="20">
</p>
<p>表单验证</p>
<!--placeholder="必须是url格式" 默认提示，告诉用户应该这么做-->
用户名：
<input type="url" name="username" placeholder="必须是url格式">

<p>
    <!--required必须要填写这个字段-->
    密码： <input type="password" name="pwd" required>
</p>

</body>
</html>

表单还有很多其他功能可以学习

敷衍小伙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习

HTML这属于前端的知识。全写： HyperText Mark-up Language，译名：超文件注标式语言HTML标记：任何标记都由<>围住，且标记名与小于号之间不能留有空白字符，某些标记需要参数类似这个就是终结标记基本结构 title是标题，就是在浏览器中显示的名称，head是头部，body是身体，htm...
复制链接

扫一扫