HTML 5 从入门到入土

2022-04-19 09:04:02 阅读：159 来源： 互联网

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

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

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）

两种形式：

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

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

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

XHTML

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

<-!DOCTYPE ....>是强制性的
XHTML 元素必须合理嵌套
XHTML 元素必须有关闭标签
空元素必须包含关闭标签
XHTML 元素必须是小写
属性名称必须是小写
属性值必须有引号
不允许属性简写

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

HTML 5 从入门到入土

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

入门

基础

元素

属性