HTML基础知识

最新推荐文章于 2024-07-10 16:57:46 发布
最新推荐文章于 2024-07-10 16:57:46 发布
阅读量734 收藏 5
点赞数 4
文章标签： html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qiaoge66/article/details/114545348
版权

HTML基础知识

HTML简介

​ HTML5 是 HyperText Markup Language 5 的缩写，HTML5 技术结合了 HTML4.01 的相关标准并革新，符合现代网络发展要求，在 2008 年正式发布。HTML5 由不同的技术构成，其在互联网中得到了非常广泛的应用，提供更多增强网络应用的标准机。与传统的技术相比，HTML5 的语法特征更加明显，并且结合了 SVG 的内容。这些内容在网页中使用可以更加便捷地处理多媒体内容，而且 HTML5中还结合了其他元素，对原有的功能进行调整和修改，进行标准化工作。HTML5 在 2012 年已形成了稳定的版本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*div{
            width: 100%;
            line-height: 300px;
            background: pink;
            font-size: 50px;
            text-align: center;
        }
        /*  文本对齐方式：text-align
            左对齐：left
            右对齐：right
            居中对齐：center
            水平居中对齐：text-align:center
         */
        /*.one{
            width: 500px;
            height: 500px;
            background: red;
        }*/ 
        /*.two{
            width: 300px;
            height: 300px;
            background: blue;
        } */
        /*.three{
            width: 130px;
            height: 130px;
            background: green;
        }*/

    </style>
</head>
<body>
<!--<div>奥利给的积极烦恼</div>-->
<!-- qweqwrytrhxfz shhgjkasedff  dfsgdf fghfgg  -->
<!-- </div> -->

<!--<div class="one">
    <div class="two">
        <div class="three">

        </div>
    </div>-->
    <!-- div p ul ol h1-h6 -->
    <!-- span a img -->
    <!--<ul>
        <li>123</li>
        <li>
            <div>7</div>
            <p>8</p>
            <h2>9</h2>

        </li>
    </ul>-->

    <!-- <div></div> <li></li> h1-h6 可以嵌套任何标签 -->

    <!--<p></p>
        <div>111</div>
    </p></p>-->
    <!-- 块元素 行内元素嵌套规则 -->
    <!--块元素 可以包含 某些块元素 （p除外）和行内元素
    行内元素 可以包含行内元素，不可以包含块元素
     p标签不能包含其他元素，只能包含行内元素   
-->

    <!-- 1 <p><span></span></p>   对 -->
    <!-- 2<span><img src="" alt=""></span>  对 -->
    <!-- 3<h2 href=""><h2></h2></a>  错 -->
    <!-- 4<div>-->
    <!--<span><img src="" alt=""></span>
    <a href=""><h2></h2></a>
    <div>
        <ul>
            <li></li>
        </ul>
    </div>
    <ul>
        <li><p></p></li>
    </ul>-->
</div>
</body>
</html>

​ HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。

​ HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进，虽然技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性，网站开发技术人员是必须要有所了解的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>html入门</title>
</head>
<body>
    <!--注释代码-->
    <!--
        1.<!DOCTYPE html> : 文档类型声明 | doctype文档声明 | html文档声明
            告诉浏览器,当前的html是哪一个版本的
            以上是html5的声明方式,现在推荐的使用的声明方式
            注意: 不是标签,是一个声明格式

        2.<title></title> 标题标签
            当前html文档的主要标题
            是head中必有的标签
            当收藏html页面时候,title标签对中的内容默认为收藏书签名

        3.<meta charset="UTF-8"> 告诉浏览器以哪种字符编码格式解析页面中的内容
            乱码: 编码和解码保持一致就不会乱码
            <meta charset="UTF-8"> 这个标签在html页面中必填,统一编码和解码格式,不出现乱码问题

        4. 标签
            双标签|双标记|闭合标签 : 标签成对出现,又开始有结束标签
            单标签|单标记|自闭和标签 : <meta charset="UTF-8" /> 不需要在标签对中添加内容的标签,定义为单标签

        5.属性
            可以帮助更完整的展示标签的功能
            开始标签可以添加属性
            写法: 属性名="属性值"    ""|''
            标签上添加属性 需要 属性的 前面添加空格

        6. 浏览器与搜索引擎:
            google  与  谷歌之间的关系
                搜索引擎: 做搜索服务
                浏览器 : 是一个安装程序.exe
    -->
    
</body>
</html>
HTML5将Web带入一个成熟的应用平台，在这个平台上，视频、音频、图像、动画以及与设备的交互都进行了规范
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
        }
    </style>
</head>
<body>
    <!--  img的路劲  -->
    <!--<img src="../imgs/11.jpg" alt="">-->

    
    <!--  type  中文； 类型  -->
    <!--  input普通文本框  -->
    <!--QQ账号:<input type="text">-->
    <!--  密码  --><!--br 表示强行换行-->
    <!--<br>QQ密码:<input type="password">-->

    <!--  radio 表示单选框  -->
    <!--<br>是否记住密码<input type="radio"">是<input type="radio"">否-->

    <!--  checkbox 表示多选框  -->
    <!--<br><input type="checkbox">已同意用户规范
    <input type="checkbox">西瓜
    <input type="checkbox">菠萝
    <input type="checkbox">哈密瓜 -->

        <!--<input type="text" placeholder="请输入要搜索的内容"><button>搜索 </button>-->
        <!--  placeholder 用于 表单的提示性文本  -->

       <!--<input type="password" placeholder="请输入密码 ">-->


       <!--<input type="text" value="123">
       <br><input type="text" placeholder="123"> -->

       <!--  value  表示 向表单中 添加内容-->
       <!--  placeholder  表示 向表单中 添加提示性文本  （起到提示作用）-->


       <!--<input type="password">-->
       <!--  input:类型 -> 回车-->
       <!--<input type="password" name="" id="">
       <input type="text" name="" id="">
       <input type="radio" name="" id="">
       <input type="checkbox" name="" id="">-->
       <!--<img src="" alt="">-->
       <!--  type:
        文本 text
        密码 password 
        单选 radio
        多选 checkbox

        提示文本 placeholder
        内容 value
       -->
       <!--<input type="text">-->
       <!--  标签中得属性  格式  属性 = 属性值  type = "text"  -->
       <!--  css样式中得属性  格式：属性：属性值：color：red： -->
</body>
</html>

自1999年以后HTML 4.01 已经改变了很多，今天，在HTML 4.01中的几个已经被废弃，这些元素在HTML5中已经被删除或重新定义。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--
        p 段落标签
            语义化
            内容个数没有限制
            块元素,自己独占一行
            上下存在留白 16px外边距
            注意: 一般嵌套其他行内元素或者普通文本

       h1~h6 标题标签
            根据权重的不同,字体大小一次减小
            语义化
            块元素
            样式:
                字体变大,变小
                字体加粗

       作业: 点击标题,跳转到界面

    -->
    我是p标签开始之前:
    <p align="center">
        我是p标签
        <a href="#">a</a>
        <img src="" alt="">
    </p>

    <hr>

    <h1>坏蛋是怎样炼成的</h1>
    <h2>二</h2>
    <h3 align="center">三</h3>
    <h6>六</h6>
</body>
</html>

为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如： 图形的绘制，多媒体内容，更好的页面结构，更好的形式 处理，和几个api拖放元素，定位，包括网页 应用程序缓存，存储，网络工作者，等。

今天案例
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/今日案例.css">
</head>

<body>
    <hr>
    <div>
        <br>用户名：<input type="text" placeholder="请输入用户名">
        <br>密码：<input type="password" placeholder="请输入密码">
        <br>性别：<input type="radio" checked>男 <input type="radio">女
        <br>生日：
        <select name="" id="">
            <option value="">1997</option>
            <option value="">1998</option>
            <option value="">1999</option>
            <option value="">2000</option>
            <option value="">2001</option>
        </select> 年
        <select name="" id="">
            <option value="">1</option>
            <option value="">2</option>
            <option value="">3</option>
            <option value="">4</option>
            <option value="">5</option>
            <option value="">6</option>
            <option value="">7</option>
            <option value="">8</option>
            <option value="">9</option>
            <option value="">10</option>
            <option value="">11</option>
            <option value="">12</option>
        </select> 月
        <select name="" id="">
            <option value="">1</option>
            <option value="">2</option>
            <option value="">3</option>
            <option value="">4</option>
            <option value="">5</option>
            <option value="">6</option>
            <option value="">7</option>
            <option value="">8</option>
            <option value="">9</option>
            <option value="">10</option>
            <option value="">11</option>
            <option value="">12</option>
            <option value="">13</option>
            <option value="">14</option>
            <option value="">15</option>
            <option value="">16</option>
            <option value="">17</option>
            <option value="">18</option>
            <option value="">19</option>
            <option value="">20</option>
            <option value="">21</option>
            <option value="">22</option>
            <option value="">23</option>
            <option value="">24</option>
            <option value="">25</option>
            <option value="">26</option>
            <option value="">27</option>
            <option value="">28</option>
            <option value="">29</option>
            <option value="">30</option>
            <option value="">31</option>
        </select> 日
        <br>地址：<input type="text">
        <br>学历：
        <select name="" id="">
            <option>学前教育</option>
            <option>小学</option>
            <option>初中</option>
            <option>中专</option>
            <option>高中</option>
            <option>大学</option>
            <option>大专</option>
            <option>研究生</option>
            <option>博士</option>
            <option>博士后</option>
            <option>硕士</option>
            <option>教授</option>
            <option>其他</option>
        </select>
        <br>手机号<input type="text">
        <br><input type="radio" checked> 我已阅读 <a href="">宪法公约</a>
        <br><button>提交</button>
        <button>重置</button>
    </div>
    <hr>
</body>

</html>
So Young007
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
html5 canvas 不兼容safari浏览器_HTML5
weixin_42227736的博客
12-01 623
一、HTML5 简介1.1 HTML5 简介HTML5 是 HyperText Markup Language 5 的缩写，HTML5 技术结合了 HTML4.01 的相关标准并革新， 符合现代网络发展要求，在 2008 年正式发布。HTML5 由不同的技术构成，其在互联网中得到了非常 广泛的应用，提供更多增强网络应用的标准机。与传统的技术相比，HTML5 的语法特征更加明显，并且 结合了 SVG...
html 快速生成多个div,并排序
King Saj
05-11 3372
div{第$个div}*11
HTML--day01
weixin_48675760的博客
05-25 152
一、基本语法 ①<常规标记>也叫双标记 <标记></标记> <标记 属性 = “属性值” 属性 = “属性值”> </标记> 标记也可以叫标签或叫元素 例如：<head> </head> ②空标记 也叫单标记 <标记...
简单的.html文件
Luck_Wang的博客
08-29 501
一个简单的.html文件入门级，请大神指点。。
HTML标签嵌套问题
weixin_30915951的博客
12-07 167
块级元素和内联元素的嵌套规则： 1.内联不能嵌套块级，块级可以嵌套内联元素 　　　　<div><h1></h1><p></p></div> 正确（块级并列） 　　　　<a href="#"><span></span></a> 正确（内联嵌套内联） 　　　　&...
HTML基础知识总结
qq_40046544的博客
11-14 3808
HTML 是用来描述网页地一种语言。HTML 指的是超文本标记语言（Hyper Text Markup Language）HTML 不是一种编程语言，而是一种标记语言（markup language）标记语言是一套标记标签（markup tag）HTML 使用标记标签来描述网页声明必须是 HTML 文档的第一行，位于 html 标签之前。声明不是 HTML 标签；它是指示 web 浏览器使用哪个 HTML 版本进行编写的指令。
html基础知识
12-04
html基础知识html基础知识html基础知识html基础知识html基础知识
Html基础知识点.docx
07-23
Html 基础知识点 Html 是一种标记语言，用于创建网页的结构和内容。以下是 Html 基础知识点： 一、Html5 文档类型和字符集 * Html5 文档类型：<!doctype html> * Html5 字符集： 二、Html5 Canvas 元素 * ...
html基础知识1111
03-26
html基础知识1111
HTML基础知识点汇总
12-04
HTML 基础知识点汇总 HTML（Hypertext Markup Language，超文本标记语言）是网页设计的基础语言，它将影像、声音、图片、文字等连接显示出来。HTML 语言使用标记式的指令（Tag），将网页文件组织起来，并由浏览器...
HTML基础知识讲解！
03-26
HTML 基础知识讲解 HTML 基础知识是网页开发的基础，了解 HTML 基础知识是学习网页开发的必备条件。本文将详细讲解 HTML 基础知识，包括 HTML 标题、HTML 段落、HTML 链接和 HTML 图像等。 HTML 标题 -------- ...
HTML基础知识点总结 .doc
11-21
本篇总结涵盖了HTML的基础知识点，主要分为三个章节，分别是HTML文档结构、元素标签及样式控制、以及表单处理。 **一、HTML文档结构** HTML文档通常由`<!DOCTYPE>`声明开始，用来指定文档使用的HTML版本。接着是`...
HTML基础知识点学习一
06-30
前端入门基础知识点,HTML知识点整理,用Typora写的
p标签里面不能嵌套div
weixin_30851867的博客
08-01 371
先申明本人代码水平为零起点，刚开始学习前端，所以就是小白。不过大神也是小白变身的么，所以要专心码代码，潜心钻研，haha~ 今天练习了段代码，发现效果和自己想象的不一样： 想了一下估计是<p>和<div>嵌套的问题，但是两个不都是块级元素，难道不能嵌套么，而且最后的结果居然是多出来一段<p>的效果，感觉HTML包容心好强，代码码错了也能...
行内元素和块状元素嵌套规则
chp_woAIdan的博客
10-21 1304
　如果不按照HTML规则书写代码时，浏览器就不会正确解析，会将不符合嵌套规则的节点放到目标节点的下面，或者变成纯文本。HTML存在许多种类型的标签，有的标签下面只允许特定的标签存在，这就是HTML嵌套规则。 　　块状元素:一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)高度(height)起作用。 　　　　　　div、p、address...
html构建一个网站 3个页面,web网页搭建：HTML与CSS（一）
weixin_35924765的博客
06-03 3766
什么是html和css?html(hypertext markup language),即为超文本标记语言。将html文件放在web服务器上，任何浏览器就可以通过互联网得到你的web界面了。首先html是一种markup language，通过标记的方式，它可以告诉浏览器文本的结构是怎样的。css是一种样式框架。html绘制出网页的主要结构，而css则可以给html的结构提供不同的显示样式，让网页...
html5——表单
最新发布
jiuyuexixi的博客
07-10 1441
html5——表单
HTML基础知识详解
...它是Web开发的基础，允许开发者通过各种标签...这些只是HTML基础知识的一部分，实际开发中还有表格、列表、链接、图像、表单、框架、多媒体等诸多元素和属性。熟练掌握这些基本概念是成为一名合格的前端开发者的基础。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值