其他分享
首页 > 其他分享> > HTML 5 从入门到入土

HTML 5 从入门到入土

作者：互联网

前端的好处是所见即所得，和数据库一样，不会很枯燥。

有些字符，颜色，标签可以现用现查。

HTML （超文本标记语言） （HyperText Markup Language）

一种创建网页的标准标记语言，使用HTML建立自己的WEB站点，在浏览器上运行的语言。

HTML是一种标记语言，不是编程语言，有两部分组成：标签，标签内的文本

HTML文档 = Web页面

事实上，每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。 ------- 百度百科

HTML 很容易学习！相信您能很快学会它！ --------- 菜鸟教程

入门

标签：开始标签，闭合标签，自闭标签，空元素标签

​ <--->, </--->, <---/>，<>

<!doctype html> <!-- 声明为html 5 文件-->
<html> <!-- 完整html页面-->
    <head> <!--头部-->
        <meta charset="utf-8"> <!--网页编码格式 utf8/GBK  -->
        <title><!--文档标题--></title>
    </head> <!--头部-->
    <body> <!--主体（浏览器中可见内容） -->
        <h1><!--文本标题--></h1>
        <p>
            <!--段落-->
        </p>
    </body> <!--主体-->
</html><!-- 完整html页面-->

<!--
结构：(分4块，两大部分)
<html>
--------------------------------
<head></head>
--------------------------------
<body></body>
--------------------------------
</html>
-->

基础

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础 标题 段落 链接 图片</title>
</head>
<body>
    <!--标题-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>

<!--段落-->
<p>段落一</p>
<p>段落二</p>

<!--链接-->
<a href="https://www.bilibili.com" >bilibili的链接</a>
<br>
<!--图片-->
<img src="/disk.jpg" width="258" height="39"/>
</body>
</html>

元素

html文档是由嵌套的html元素组成的

html对大小写不敏感，官方推荐使用小写

属性

<a href="https://www.bilibili.com" >bilibili的链接</a>
<!--href 后紧跟属性-->

格式化输出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本格式化</title>
</head>
<body>
<b>加粗</b>
<i>斜体</i>
<code>电脑自动输出</code>
这是<sub>下标</sub>和<sup>上标</sup>


</body>
</html>

超链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
    <a href="https://www.bilibili.com" target="_blank">在新窗口打开文档</a>

    <a href="https://www.baidu.com" target="_self">当前页面打开</a>

    <a href="https://leetcode-cn.com/" target="_top">当前页面打开</a>


</body>
</html>

头部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>头部标签</title>
<!--    默认链接，下面的链接如果不加以定义就会默认使用这个标签-->
    <base href="https://www.bilibili.com" target="_blank">
<!--    文档与外部资源之间的关系，一般是链接到样式表-->
    <link rel="stylesheet" type="text/css" href="mystyle.css">
<!--    css 渲染美化-->
    <style type="text/css">
        body {background-color:yellow}
        p {color:blue}
    </style>
<!--    meta标签描述了一些基本的元数据,meta元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。-->
    <meta name="description" content="免费 Web & 编程 教程">
<!--    <script>标签用于加载脚本文件,js-->

</head>
<body>
    <a href="">默认跳转到bilibili</a>
    <a href="https://www.baidu.com">跳转到百度</a>

</body>
</html>

表格

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

    <table border="1">
<!--        表格在table里面-->
        <tr><th>id</th><th>name</th><th>age</th><th>hobby</th><th>eat</th><th>sleep</th><th>play</th></tr>
        <tr><td>1</td><td>胡桃</td><td>12</td><td>摆烂</td><td>对</td><td>错</td><td>对</td></tr>
        <tr><td>2</td><td>刻晴</td><td>13</td><td>吃饭</td><td>对</td><td>对</td><td>对</td></tr>
        <tr><td>3</td><td>芭芭拉</td><td>18</td><td>睡觉</td><td>对</td><td>对</td><td>错</td></tr>
        <tr><td>4</td><td>琴</td><td>22</td><td>摆烂</td><td>对</td><td>对</td><td>错</td></tr>
        <tr><td>5</td><td>雷电将军</td><td>23</td><td>摆烂</td><td>对</td><td>错</td><td>错</td></tr>
        <tr><td>6</td><td>甘雨</td><td>14</td><td>吃饭</td><td>对</td><td>对</td><td>对</td></tr>
        <tr><td>7</td><td>重云</td><td>13</td><td>摆烂</td><td>对</td><td>对</td><td>错</td></tr>
        <tr><td>8</td><td>凝光</td><td>21</td><td>睡觉</td><td>对</td><td>错</td><td>对</td></tr>
        <tr><td>9</td><td>钟离</td><td>24</td><td>摆烂</td><td>对</td><td>对</td><td>错</td></tr>
        <tr><td>10</td><td>班尼特</td><td>12</td><td>睡觉</td><td>对</td><td>对</td><td>对</td></tr>
    </table>

</body>
</html>

列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
<!--无序列表-->
    <ul>
        <li>柯南</li>
        <li>小兰</li>
        <li>小五郎</li>
        <li>基德</li>
    </ul>

<!--有序列表-->
    <ol>
        <li>艾伦</li>
        <li>三笠</li>
        <li>兵长</li>
        <li>团长</li>
        <li>奇行种</li>
    </ol>


</body>
</html>

区块

区块元素：

一个标签占一行 (默认换行)

<h1>
    
</h1>
<p>
    
</p>
<ul>
    
</ul>
<table>
    
</table>

内联元素：

不默认换行

<b></b>
<td></td>
<a></a>
<img>

div 块级元素：

作为一个元素容器使用

<div>
    
</div>

span 内联元素：

作为一个文本容器使用

<span></span>

网页布局

div

<!--div 元素网页布局-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页布局</title>
</head>
<body>
    <div id="container" style="width: 500px">

    <div id="header" style="background-color:#FFA500">
    <h1 style="margin-bottom: 0">主要的网页标题</h1></div>
    <div id="menu" style="background-color:#FFD770;height: 200px;
width: 100px;float:left;">
        <b>菜单</b><br>
        HTML<br>
        CSS<br>
        JavaScript
    </div>
    <div id="content" style="background-color: #EEEEEE;height: 200px
;width: 400px;float: left;">内容在这里</div>
    <div id="footer" style="background-color: #FFA500;clear:both;
text-align:center;">版权 fuguangjian.com</div>

    </div>
</body>
</html>

table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页布局 table</title>
</head>
<body>
    <table>
        <tr>
            <td colspan="2" style="background-color: #FFA500">
                <h1>主要的网页标题</h1>
            </td>
        </tr>

        <tr>
            <td style="background-color: #FFD700;width: 100px;">
                <b>菜单</b><br>
                HTML<br>
                CSS<br>
                JavaScript
            </td>
            <td style="background-color: #EEEEEE;height: 200px;width: 400px;">
                内容在这里
            </td>
        </tr>

        <tr>
            <td colspan="2" style="background-color: #FFA500;text-align:center;">
                版权 fgj.com
            </td>
        </tr>
    </table>

</body>
</html>

表单和输入

表单是一个包含元素的区域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <form>
        用户名:<input type="text" name="用户名"> <br>
        密码:<input type="password" name="密码"> <br>
    </form>
<!--单选-->
<from>
    <input type="radio" name="性别" value="男人">male <br>
    <input type="radio" name="性别" value="女人">female <br>
</from>
<!--复选-->
<form>
    <input type="checkbox" name="爱好" value="睡觉">sleep<br>
    <input type="checkbox" name="爱好" value="吃饭">eat<br>
    <input type="checkbox" name="爱好" value="摆烂">play<br>
</form>
<!--提交-->
<form name="input" action="https://www.baidu.com" method="get">
    Username: <input type="text" name="user">
    <input type="submit" value="Submit">
</form>

</body>
</html>

框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>框架</title>
</head>
<body>
<!--框架：内联框架-->
<iframe src="//player.bilibili.com/player.html?aid=768059261&bvid=BV1gr4y1W7As&cid=571546226&page=1"
        scrolling="no" border="0" width="600" height="300"
        frameborder="no" framespacing="0"
        allowfullscreen="true"> </iframe>

</body>
</html>

脚本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>脚本</title>
    <script></script>
    <noscript>js脚本不存在</noscript>
</head>
<body>
</body>
</html>

字符实体

用一串字符转义一个字符

不间断空格：&nbsp

URL - 统一资源定位器 （Uniform Resource Locators）

两种形式：

  1. 字母 -> baidu.com
  2. 数字 -> 192.68.20.50

http 和 https ，后者对文件进行加密，因而更安全

速查列表

HTML 速查列表 | 菜鸟教程 (runoob.com)

标签简写和全称

HTML 标签简写及全称 | 菜鸟教程 (runoob.com)

总结

HTML 总结 | 菜鸟教程 (runoob.com)

就是一种简单的标签语言，需要搭配css js 框架使用。

XHTML

html极不规范，xhtml是html的开发手册

  1. <-!DOCTYPE ....>是强制性的

  2. XHTML 元素必须合理嵌套

  3. XHTML 元素必须有关闭标签

  4. 空元素必须包含关闭标签

  5. XHTML 元素必须是小写

  6. 属性名称必须是小写

  7. 属性值必须有引号

  8. 不允许属性简写

标签：网页,入门,标签,元素,对错,入土,HTML,com
来源： https://www.cnblogs.com/instore/p/16163709.html