码迷,mamicode.com
首页 > Web开发 > 详细

HTML详解

时间:2020-07-04 19:05:48      阅读:104      评论:0      收藏:0      [点我收藏+]

标签:you   方式   https   区域   foo   blank   规范   中国   资源   

1.网页基本标签

<!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>
<hr/>

<!--段落标签-->
<p>你好</p>
<p>再见了        亲爱的大海</p>
<!--水平线标签-->
<hr/>

<!--换行标签-->
你好<br/>
再见了       亲爱的大海 <br/>
<hr/>

<!--字体样式标签-->
粗体:<strong>i love you</strong> <br/>
斜体:<em>i love you</em>
<hr/>

<!--特殊符号-->&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br/>
大于符号&gt; <br/>
小于符号&lt; <br/>
版权所有符号&copy;
<hr/>
</body>
</html>

2.图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
<!--alt:图像加载失败显示-->
<!--title:鼠标悬停显示-->
<img src="../resources/image/chenshu.jpg" alt="陈数" title="悬停文字" width="300" height="300">
</body>
</html>

3.链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<!--
href:必填,表示要跳转的那个页面
target:表示窗口在哪里打开
    _blank
    _parent
    _self
    _top
-->
<!--页面间链接-->
<a href="https:www.baidu.com">点击我跳转到百度</a><br>
<a href="图像标签.html">点击我跳转到图像标签页面</a><br>
 <!--图像超链接-->
<a href="https:www.baidu.com">
    <img src="../resources/image/chenshu.jpg" alt="陈数" title="悬停文字">
</a><br>
<a href="https:www.baidu.com" target="_blank">点击我_blank方式打开</a><br>
<a href="https:www.baidu.com" target="_parent">点击我_parent方式打开</a><br>
<a href="https:www.baidu.com" target="_self">点击我_self方式打开</a><br><!--默认就是在自己页面打开-->
<a href="https:www.baidu.com" target="_top">点击我_top方式打开</a><br>


<hr>
<!--锚链接-->
<a name="mark">标记</a><!--锚链接标记--> <br>
<a href="#mark">页面回到锚链接标记的地方</a><!--页面比较短,效果没有演示出来
                                            还可以页面间跳转-->

<hr>
<!--功能性链接:一般不用
        邮件链接:mailto
        QQ链接:

-->
<a href="mailto:2564001572@qq.com">点击联系我</a> <br>
<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::51" alt="点击给我发送消息" title="点击给我发送消息"/>
</a>

</body>
</html>

4.行内元素和块元素

块元素:独占一行

行内元素:多个可以排在一行

5.列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>
<!--无序列表-->
<ul>
    <li>java</li>
    <li>python</li>
    <li>运维</li>
    <li>c/c++</li>
</ul>

<!--有序列表-->
<ol>
    <li>java</li>
    <li>python</li>
    <li>运维</li>
    <li>c/c++</li>
</ol>
<!--定义列表
    dl:标签
    dt:列表名称
    dd:列表内容-->
<dl>
    <dt>学科</dt>
    <dd>java</dd>
    <dd>python</dd>
    <dd>Linux</dd>
    <dd>c/c++ </dd>
    <dt>位置</dt>
    <dd>河南</dd>
    <dd>北京</dd>
    <dd>上海</dd>
    <dd>深圳</dd>
</dl>
</body>
</html>

6.表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
<!--
    border="1px":边界一个像素
    tr:行
    td:列
    colspan:跨列
    rowspan:跨行
-->
<table border="1px">
    <tr>
        <!--跨列-->
        <td colspan="4">1.1</td>
        <td>1.2</td>

    </tr>
    <tr>
        <td rowspan="2">2.1</td>
        <td>2.2</td>
        <td>2.3</td>
        <td>2.4</td>
        <td>2.5</td>
    </tr>
    <tr>

        <td>3.2</td>
        <td>3.3</td>
        <td>3.4</td>
        <td>3.5</td>
    </tr>
</table>
</body>
</html>

7.视频和音频标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频和音频标签</title>
</head>
<body>
<!--
video:视频
    src:资源目录
    controls:控制视频
    autoplay:自动播放
audio:音频
-->
<video src="../resources/test.mp4" controls autoplay></video>
<audio src="" controls autoplay></audio>
</body>
</html>

8.页面结构分析

header:标题头部区域的内容

footer:标记脚步区域的内容

section:Web页面的一块独立区域

article:独立的文章内容

aside:相关内容或应用(侧边栏)

nav:导航类辅助内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构</title>
</head>
<body>
<header>
    <h2>网页头部</h2>
</header>
<section>
    <h2>网页主体</h2>
</section>
<footer>
    <h2>网页脚部</h2>
</footer>
</body>
</html>

9.iframe

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe</title>
</head>
<body>
<!---->
<iframe src="https:www.baidu.com" name="baidu" frameborder="0"></iframe>
</body>
</html>

10.表单

  • input typet:text,password,radio,checkbox,file,button,image,submit,reset,range,seach 带验证--->email,url,num
  • 下拉列表:select option
  • 文本域:textAre
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<h1>注册</h1>
<!--
form:
    action:表单提交的位置:可以使网站也可以是请求处理地址
    method:post和get两种方式

-->
<form action="01基本标签.html" method="get">

<p>名字:<input type="text" name="username"></p>
<p>密码:<input type="password" name="password"></p>

    <!--单选-->
    <p>性别:<!--name:分组-->
        <input type="radio" name="sex" value="男" checked><input type="radio" name="sex" value="女"></p>
    <!--多选-->
    <p>爱好:
        <input type="checkbox" name="hobby" value="打篮球">打篮球
        <input type="checkbox" name="hobby" value="游泳">游泳
        <input type="checkbox" name="hobby" value="看电影">看电影
        <input type="checkbox" name="hobby" value="听音乐" checked>听音乐
    </p>
    <!--文件域-->
    <p>
        <input type="file" name="files">
    </p>
    <!--滑块-->
    <p>滑块
        <input type="range" name="voice" min="0" max="100" step="10">
    </p>
    <p>搜索:
        <input type="search" name="search">
    </p>
    <!--按钮:
            button
            image
            submit
            reset-->
    <p><input type="button" value="点击按钮"></p>
    <p><input type="image" src="../resources/image/chenshu.jpg"></p><!--点击这个也可以提交-->
    <p><input type="submit" value="提交"> <input type="reset" value="重置"></p>

    <!--下拉框,列表框-->
    <p>下拉框:
        <select name="列表名称">
            <option value="china">中国</option>
            <option value="us">美国</option>
            <option value="eth" selected>瑞士</option>
            <option value="beijing">北京</option>
        </select>

    </p>
    <!--文本域-->
    <p>反馈:
        <textarea name="textarea" cols="50" rows="6">文本内容</textarea>
    </p>
    
</form>

</body>
</html>

11.表单的应用

  • 隐藏域 hidden(通常用来传递一些默认值)
  • 只读 readonly
  • 禁用 disabled
  • placeholder:默认提示信息
  • required:非空判断
  • pattern:正则表达式判断(常用正则表达式)

 

HTML详解

标签:you   方式   https   区域   foo   blank   规范   中国   资源   

原文地址:https://www.cnblogs.com/baconZhang/p/13235908.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!