HTML的学习

HTML

HyperText Markup Language，超文本标记语言

1.创建第一个网页

  • DOCTYPE:告诉浏览器，我们要使用什么规范
  • head标签，代表网页头部
  • title网页标题

如：

  • body标签代表网页主体，一般在这里边进行操作

2.基本标签

  • 写在body里面

  • 标题标签

  • 分段标签（<P></P>）

  • 水平线标签（<hr/>）

  • 换行变迁

  • 字体样式标签

  • 特殊符号

  • 大于小于和版权

  • 总体效果图

3.图像标签

  • 放图片

  • 功能性链接（如邮件链接）

  • 效果图

4.连接标签

  • a标签

    a标签
    href：必填，表示要跳转到哪个页面
    target:表示窗口在哪里打开
        _blank：在新标签页面中打开
        _self: 默认的，在自己的页面中打开

如：

效果图：

  • 在a标签中放入图片，形成一个新的连接标签

如：

效果：

  • 锚标记

    1.需要一个锚标记
    2.跳转到锚标记
如：<a name="top">顶部</a>
<a href="#top">回到顶部</a>

效果：

 

5.列表

  • 有序列表

    <ol>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/C++</li>
</ol>

效果：

  • 无序列表

    <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>运维</dd>
    <dd>前端</dd>
    <dd>Linux</dd>

    <dt>位置</dt>

    <dd>广东</dd>
    <dd>汕头</dd>


</dl>

效果：

6.表格标签

  • 表格table
行 tr
列 td
colspan 跨列
rowspan 跨行
<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>

效果：

7.媒体元素

  • 包含音频（audio）和视频（video）

  • 音频

    <audio src="../resources/audio/Flatline%20-%20信仰（翻自%20刘大壮）.mp3"controls></audio>

  • 视频

    <video src="../resources/video/粉鸟的贪吃蛇.mp4"></video>

8.网页结构

  • header：网页头部

  • section：网页内容

  • footer：网页脚部（尾部）

9.内联框架

  • iframe

    <iframe src="https://www.baidu.com" frameborder="0"width="800px"height="600px"></iframe>

会在网页中切出一个指定大小的内联框架

如:

  • href(用于指定超链接的url)

    <a href="<iframe src="//player.bilibili.com/player.html?aid=587073254&bvid=BV1ez4y1174H&cid=309315625&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>"target="hello">点击跳转</a>

    效果：

    点击后会跳转到指定的链接

10.表单

  • form元素定义HTML表单

  • HTML表单中包含HTML表单元素，表单元素指的是不同类型的input元素，复选框、单选按钮、提交按钮等等。

  • 表单form
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method:get,post提交方式
get方式提交，我们可以在url中看到我们提交的信息，不安全，但是高效
post：比较安全，传输大文件。

如：<form action="1.我的第一个网页.html"method="post">

  • 全部元素展示

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

<h1>注册</h1>
<!--表单form
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method:get,post提交方式
get方式提交，我们可以在url中看到我们提交的信息，不安全，但是高效
post：比较安全，传输大文件。
-->

<form action="1.我的第一个网页.html"method="post">


<!--文本输入框
value:默认没填的时候的初始值
maxlength：最长能写几个字符
size：输入框的长度
-->
<p>名字：<input type="text"name="username"value="admin"readonly></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>

<!--多选框
-->
<p>爱好：
    <input type="checkbox"value="sleep"name="hobby">睡觉
    <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/tx.jpg">-->
</p>

<p>
    <input type="submit">
    <input type="reset">
</p>

<p>下拉框
    <select name="列表名称">
        <option value="选项的值">中国</option>
        <option value="选项的值">美国</option>
        <option value="选项的值"selected>瑞士</option>
        <option value="选项的值">印度</option>
    </select>
</p>

<!--
文本域

-->
    <p>反馈：
        <textarea name="textarea" cols="30" rows="10">文本内容</textarea>
    </p>

<!--  文件域

  -->

    <p>
        <input type="file"name="files">
        <input type="button"value="上传"name="upload">
    </p>
    
    <p>
        <input type="email"name="email">
    </p>
    
    <p>
        <input type="url"name="url">
    </p>
    
    <p>商品数量：
        <input type="number"name="num"max="100"min="0"step="1">
    </p>
    
    <p>滑块：
        <input type="range">
    </p>
</form>
</body>

</html>

效果图：

 

posted @ 2021-03-15 10:27  Pink_Bird  阅读(45)  评论(0)    收藏  举报