欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

复习HtmL（超文本标记语言）制作网页

程序员文章站 2024-02-26 18:02:10
...

1.我的第一个网页

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
    <!--keywords 关键字-->
    <meta name="keywords" content="提供关键字查询">
    <!--description 描述-->
    <meta name="description" content="描述这个是用来做什么的"
</head>
<body>
Hello world

</body>
</html>

2.标题标签

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--标题标签-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!--段落标签-->
<p>125648496</p>
<p>125648496</p>
<!--换行标签-->
<br>
<!--水平线标签-->
<hr/>
<!--粗体斜体-->
<strong>2313</strong>
<em>5165</em>
<!--特殊符号-->
空&nbsp;格
</body>
</html>

3.图片链接

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的图片</title>
</head>
<body>
<img src="../resources/img/1.jpg" alt="加载失败" title="图片有毒" width="100" height="100">
<a href="4.链接标签.html#down">跳转到4</a>
</body>
</html>

4.连接标签

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p><a href="3.图片标签.html">点击我跳转</a></p>
<p><a href="https:www.baidu.com">百度</a></p>
<br>
<p><a href="1.我的第一个网页.html"><img src="../resources/img/1.jpg" alt="加载失败" title="图片有毒" width="100" height="100">
</a></p>
<a href="dwon">dwon</a>
<br>
<!--功能链接-->
<a href="mailto:aaa@qq.com">发送邮件</a>
</body>
</html>

5.列表标签

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--有序0-->
<ol>
    <li>svf</li>
</ol>
<!--无序-->
<ul>
    <li>dsfv</li>
</ul>
<!--自定义-->
<dl>
    <dt>svf</dt>
    <dd>fvs</dd>
</dl>
</body>
</html>

6.表格

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1px">
    <tr>
        <!--rowspan 跨列-->
        <td rowspan="2">1</td>
        <!--colspan 跨行-->
        <td colspan="2">1</td>

    </tr>
    <tr>
        <td>1</td>
        <td>1</td>

    </tr>
</table>
</body>
</html>

7.视频音频

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--video-->
<video src="../resources/video/2.mp4"controls autoplay></video>
<audio src="../resources/audio/1.mp3" controls></audio>
</body>
</html>

8.页面结构

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <header>
        <h1>头部</h1>
    </header>
    <section>
        <h1>主体部分</h1>
    </section>
<footer>
    <h1>
        脚部
    </h1>
</footer>
<nav>
    <h1>导航类辅助内容</h1>
</nav>

</body>
</html>

9.内联框架

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<iframe  src="//player.bilibili.com/player.html?aid=55631961&cid=97257967&page=11" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>"


<iframe src="" name="hello" height="800px" width="1000px"></iframe>
<!--通过a标签可以在iframe里加东西-->
<a href="https://baidu.com" target="hello"></a>

</body>
</html>

10.表单

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

<form action="1.我的第一个网页.html" method="post">
    <!--readonly只能读不可修改
    value="readonly 关键字只能读不可修改" readonly
    -->
    <p>名字：<input type="text" name="name" placeholder="请输入用户名" required></p>
    <p>密码：<input type="password" name="pass"></p>

    <!--单选框disabled禁用  checked 默认的-->
    <p>性别：
        <input type="radio" value="boy" name="sex" checked disabled/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>
    <p>
        <input type="submit" name="Button">
        <input type="reset" name="reset">
    </p>
    <hr/>
    <!--多选框  checked默认选中-->
<p>爱好：
    <input type="checkbox" value="sleep" name="hobby"/>睡觉
    <input type="checkbox" value="code" name="hobby" checked/>敲代码
    <input type="checkbox" value="chat" name="hobby"/>聊天
    <input type="checkbox" value="game" name="hobby"/>游戏
</p>
    <!--按钮-->

    <p>按钮:
        <input type="button" name="byn1" value="点击变长"/>
        <input type="image" src="../resources/img/1.jpg" height="100" width="60"/>
    </p>

</form>
</body>
</html>

11.下拉框

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

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

<!--下拉框 select 列表框option 默认selected-->
<p>下拉框：
   <select name="列表名字">
       <option value="china" selected>中国</option>
       <option value="us">美国</option>
       <option value="选着值">厦5</option>
   </select>
</p>
<hr>

<!--文本域-->
<p>反馈
    <textarea name="textarea" id="" cols="30" rows="10">文本内容</textarea>
</p>
<!--文件域-->
<p>
    <input type="file" name="files">
    <input type="button" value="上传" name="upload"/>
</p>

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

12.简单的验证搜索

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="1.我的第一个网页.html" method="post">

<!--邮件-->
<p>邮箱：
    <input type="email" name="email">
</p>
<p>网址url：
    <input type="url" name="url">
</p>
<p>数字：
    <input type="number" name="bum" max="100" min="0" step="10">
</p>
<p>滑块：
     <input type="range" name="voice" min="0" max="100" />
</p>
 <p>搜索框：
     <input type="search" name="search" id="mark">
 </p>
<p>
        <!--增强鼠标可用性-->
        <label for="mark">你点我试试</label>
        <input type="text" >
</p>
    <p>自定义邮箱：
        <input type="email" name="diymail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
 /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"/>

    </p>



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

文件的位置

复习HtmL（超文本标记语言）制作网页

上一篇： JMM和JVM内存区域及硬件内存架构

下一篇： 【JavaScript】 数组中去掉重复数字

推荐阅读