html简单介绍-史上最简单版

于 2024-08-09 15:44:45 发布
阅读量1.2k 收藏 5
点赞数 43
文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lizhiwei21/article/details/141063444
版权

1.html介绍（了解）

1.网站和网页区别

网站=网页+后端(java+数据库)
网页：显示给用户看的

2.html作用：书写网页的。

2.使用记事本创建html(了解)

<!--根标签-->
<html>
    <!--头标签-->
    <head>
        <!--网页的标题标签-->
        <title>这是第一个html</title>
    </head>
    <!--体标签-->
    <body>
        <font color="yellow" size="7">乾坤未定，你我皆黑马</font>
    </body>
</html>

超文本的后缀名:.html或者.htm

3.在vscode中书写html页面_入门(掌握)

1.打开文件夹

2.在文件夹下面创建html页面

3.在空的html页面上书写!然后回车即可生成html页面

<!-- 1.声明当前文件是一个超文本文档 -->
<!DOCTYPE html>
<!-- 2.表示当前文件支持英文，也可以书写中文 -->
<html lang="en">
<head>
    <!-- 3.当前页面使用的编码表 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vscode中的第一个html</title>
</head>
<body>
    <font color="red" size="7">荔枝味</font>
</body>
</html>

4.使用vscode注意

1.设置vscode的文件为自动保存：文件===》选择自动保存

5.基础标签(理解)

<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以书写中文 -->
<html lang="en">
​
<head>
    <!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 标题标签 -->
    <title>Title</title>
</head>
​
<body>
    <!--
        1.字体标签：font
        2.font标签常见属性：
            1）color ：表示字体颜色，颜色值有两种设置方式：
                I:使用英文字母 red yellow green
                II:使用十六进制表示 RGB  red  green blue  #xxyyzz  xx表示red的值  yy表示green的值 zz表示blue的值
            2)size:字体大小
                属性值范围是：1-7，依次递增，默认是3
            3)face:字体样式  楷体 宋体等
    -->
    <font color="red">荔枝味</font>
    <font color="#FF0000">荔枝味</font>
    <font color="#00FF00" size="3">荔枝味</font>
    <font color="#0000FF" size="1">荔枝味</font>
    <font color="#0000FF" size="7" face="楷体">荔枝味</font>
​
​
​
    <!--
        3.i标签：倾斜
        4.b标签：加粗
    -->
    <i>我是倾斜的</i>
    <b>我是加粗的</b>
    <b><i>我既是加粗的又是倾斜的</i></b>
​
​
    <!--5.水平线-->
    <hr>
​
    <!--
        6.br标签：换行
    -->
    七七<br>来了
    <!-- 
        7.center表示文本居中标签
    -->
    <br>
    <center>九九</center>
</body>
​
</html>

6.图片 音频 视频标签

<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以书写中文 -->
<html lang="en">
​
<head>
    <!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 标题标签 -->
    <title>title</title>
</head>
​
<body>
    <!--引入图片-->
    <!--
        1.使用img标签引入图片，常见属性：
            1）src：表示引入图片的路径   
                src="../img/a.jpg"  : 
                        1. .. 表示当前页面的上一级路径即：02-图片音频和视频目录
                        2. /img/a.jpg ：在02-图片音频和视频目录同级别目录下有img目录，下面是a.jpg
            2）px在前端中表示单位，像素，单位还可以使用百分比表示，相对于页面 。
                表示占页面50%
    -->
    <!-- <img src="../img/a.jpg" height="500px" width="500"> -->
    <!-- <img src="../img/a.jpg" height="500px" width="50%"> -->
​
    <hr>
    <!--
        2.音频 audio标签
            注意：audio标签必须加controls属性，表示播放控件，如果不加该属性就无法播放
    -->
    <!-- <audio src="../img/b.mp3" controls></audio> -->
​
    <!--
        视频：video
    -->
    <video src="../img/c.mp4" controls height="500px" width="500px"></video>
</body>
​
</html>

注意：

1.src属性引入的路径不能是本地的路径。

2.对于video audio必须书写播放控件属性controls

7.超链接标签a

<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以书写中文 -->
<html lang="en">
​
<head>
    <!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 标题标签 -->
    <title>title</title>
</head>
​
<body>
    <!--
  超链接标签：a标签  可以实现跳转
    属性：
      1.href="http://www.itcast.cn" 表示跳转地址
      2.target="_blank" 表示新跳转的网页在新的窗口打开
        target="_self" 表示新跳转的网页在当前窗口打开覆盖之前的窗口，默认的打开方式
-->
  <a href="http://www.baidu.com" target="_blank">访问百度</a>
</body>
​
</html>

8.列表标签

  • 列表标签:

    • 无序列表: <ul> 和 <li> 标签用于创建无序列表。

      <ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

    • 有序列表: <ol> 和 <li> 标签用于创建有序列表。

      <ol>
    <li>First item</li>
    <li>Second item</li>
</ol>

9.表格标签

  <!--
      1.表格标签：table
      2.table标签的子标签：
        1）行标签：tr
        2) 列标签：td th
            注意：th表示表格标题标签，自动加粗和居中显示
      3.table标签的属性border="1px" 表示表格边框
      4.table标签的属性cellspacing="0px" 表示表格单元格之间的距离是0，即没有距离
      5.table标签的属性width="50%" 表示表格标签的宽度占页面的50%
      6.tr的属性：align="center"，值center表示居中 left 靠左(默认值) right 靠右
    -->
    

小结：

1.td或者th属性实现跨行：rowspan

2.td或者th属性实现跨列：colspan

10.布局标签

<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以书写中文 -->
<html lang="en">
​
<head>
    <!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 标题标签 -->
    <title>title</title>
</head>
​
<body>
    <!--
        1.div标签:块级标签即单独占一行的标签。h1~h6 p br等
    -->
    <div>div1</div>
    <div>div2</div>
    <!--
        2.span标签:属于行内标签；共处一行的标签 img a 等
    -->
    <span>span1</span>
    <span>span2</span>
</body>
​
</html>

11.表单标签

1.form标签

<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以书写中文 -->
<html lang="en">
​
<head>
    <!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 标题标签 -->
    <title>title</title>
</head>
​
<body>
    <!--
      1.form表单标签
        常见属性：
          1）action：表示将收集的数据提交到具体后台服务器的地址
          2) method:提交数据到后台的方式(请求方式)
              get: http://www.jd.com?username=锁哥&password=1234   默认方式
                1.不安全
                2.有大小限制 
                3.只能传输字符数据，传输数据格式url?name=value&name=value
              post: http://www.jd.com
                1.安全
                2.没有大小限制
                3.可以传输任意数据
    -->
    <form action="#" method="post">
        <!-- TODO:所有收集的数据必须放到form标签文本中 -->
    </form>
    
    
</body>
​
</html>

2.input输入域

<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以书写中文 -->
<html lang="en">
​
<head>
    <!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 标题标签 -->
    <title>title</title>
</head>
​
<body>
    <!--
      input输入项
        1.<input type="text"> 普通文本 默认值
        2.<input type="password"> 
        3.<input type="radio" name="sex"> 男 <input type="radio" name="sex"> 女  
            TODO:radio表示单选按钮，只能选择一个，通过name属性保证单选效果，要求name属性值必须一致
        4. <input type="checkbox"> 篮球 <input type="checkbox"> 足球   
            TODO:checkbox 多选框或者复选框
        5. <input type="file"> 上传的文件
        6.<input type="hidden" value="918181iauaioO">  隐藏域。用户在页面看不到，其实在页面中是存在的。如果某种需求不需要给用户看，但是后台服务器需要
        数据，那么可以将数据放到隐藏域标签的value中
        7.<input type="submit" value="登录">  submit ：将表单收集的数据提交到指定服务器中
​
        TODO: 补充： 如果单选按钮和复选框被选中，那么需要给input标签加checked属性
    -->
    <form action="#">
        <!-- TODO:收集的数据必须放到form标签文本中 -->
        用户名：<input/> <br>
        用户名：<input type="text"/> <br>
        密码：<input type="password"> <br>
        性别： <input type="radio" name="sex" checked> 男  <input type="radio" name="sex"> 女 <br>
        爱好：<input type="checkbox" checked> 喝酒 <input type="checkbox"> 抽烟 <input type="checkbox"> 烫头 <br>
        <input type="file"> <br>
        <input type="hidden" value="ksjsjsjjsjjsjjs"> <br>
        <input type="submit" value="登录"> 
        <input type="reset"> 
        <input type="button" value="注册"> 
​
    </form>
</body>
​
</html>

3.下拉框和文本域标签

<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以书写中文 -->
<html lang="en">
​
<head>
    <!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 标题标签 -->
    <title>title</title>
</head>
​
<body>
    <form action="#">
        <!--
            1.select下拉项：需要结合子标签option一起使用，有几个下拉项就有几个option
            2.提交到后台的数据是用户当前选中的下拉项的option的value值
            3.option的属性selected表示当前下拉项被选中
            
        -->
        <select name="" id="">
            <option value="">----------请选择城市----------</option>
            <option value="sh">上海</option>
            <option value="bj" selected>北京</option>
        </select>
        <hr>
​
        <!--
          textarea文本域：由行和列组成
            1.cols="30" column 列 占30列
            2.rows="10" 行，占10行
        -->
        <textarea name="" id="" cols="30" rows="10"></textarea>
    </form>
</body>
​
</html>

荔枝味-
关注
简单的html
question_mark的博客
02-11 1437
<html> <head> <meta charset="UTF-8"> </head> <body> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3&...
HTML简介与历史版本
printf_what的博客
06-10 406
什么是HTML HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页 历史版本 HTML1.0 实际上应该没有HTML1,所谓的HTML1是1993年IETF(互联网工作任务组)团队的一个工作草案，并不是成型的标准 HTML2.0 1995年11月作为RFC1866发布，于2000年6月RFC2854发
一个简单的html文件
11-15
一个简单的html网站，由本人编写并发布在github上，是本人踏入编程的第一步
最简单的HTML文件
12-11
简单的HTML文件，也是最基本的，有简单的表单验证。
HTML中常用标签
延成的博客
04-25 159
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>常见的HTML的标签</title> </head> <body> <!--标题标签--> <h1>我是h1标签</h1> <h2>我是h2标签</h2> <h3>我是h3标签
30分钟入门HTML（超级简单）
最新发布
qq_63119830的博客
03-01 732
DOCTYPE html > < html lang = " en " > < head > < meta charset = " UTF-8 " > < title > 自定义列表标签学习 < body >
JQuery操作form表单
晨曦若梦的博客
12-03 5315
使用JQuery前，先引入JQuery库 <script src="js/jquery-3.3.1.min.js"></script> 提交表单 方式一：JQuery事件，submit()方法 form表单，action属性必需，后台控制页面跳转 <form id="form" action="user/login" method="post"> <i...
全自己动手写html+php图片批量上传-史上最简单图片批量上传.rar
05-30
这个简单的批量图片上传教程为初学者提供了一个很好的实践机会，让他们能够结合HTML和PHP实现实际的功能。通过这个项目，开发者不仅可以学习到基本的文件上传知识，还能了解到如何处理用户输入、保证数据安全以及...
JRazor--史上最简单性能最高的html模板引擎
maozizhang的博客
07-24 399
/** * 模板引擎 * @param {*} option */ function JRazor(option) { this.settings = { razor: '`', //标记js代码的字符 razorEncodeChar: '&acute;', //标记js代码的字符的转义字符 openLog:true //是否在控制台输出预编译日志 ...
史上最简单的PythonFlask框架搭建
02-24
区分好web请求与web响应：1、用户在浏览器输入一个web地址后单击超链接，2、浏览器会...4、web服务器通过互联网江响应发回给正在等待的web浏览器5、浏览器接收到web响应并显示在用户屏幕上分析search4letters:defsearch
世上最简单的网页.html
11-15
我头一次自学网页编码，献丑了，用的是html编码哟 (*^__^*) 嘻嘻……
简单的html，适合新手查看
12-28
css➕html，HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页
史上最牛最全最简单的html课件
04-23
html课件(全) 学会基本的标记的功能及属性设置 学会对样式表的设置 学会基本的js方法及自定义函数 自己设计并实现简单的个人网站(静态)
html教程（最简单易学的html标记手册）
02-03
这是一本我见过的最好的html标记学习手册。里面包含所有的html标记，而且包含了每一个标记的所有参数，对每一个标记及参数都有具体的实例和说明解释，可以对比查看效果。里面记载了每一个标记及参数的详尽用法和实例。整本书简单易学，好记好用清楚明朗。 HTML语言剖析 • 第一课 Html简介 • 第二课 HTML标记一览 • 第三棵 文件标记 • 第四课 排版标记 • 第五课 字体标记 • 第六课 清单标记 • 第七课 表格标记 • 第八课 表单标记 • 第九课 图形标记 • 第十课 链接标记 • 第十一课 排版标记 • 第十二课 多媒体标记 • 第十三课 其他标记 • 第十四课 特殊字符 • 第十五课 调色原理
比较简单实用HTML模板
02-10
比较简单实用的HTML模板。欢迎下载使用。
simple-calc:有史以来最简单的js计算器
05-25
"simple-calc:有史以来最简单的js计算器"是一个利用JavaScript实现的计算工具，涉及了事件监听、DOM操作、数学运算、条件判断、样式设置以及代码组织等基础知识。这个项目的源码分析可以帮助初学者更好地理解...
最简单的HTML入门
ldstudent的博客
06-06 596
HTML 1.标题 <h1 >大标题</h1> <h2>小一点的标题</h2> <h3>在小一点的标题</h3> <h4>更小一点的标题</h4> <h5>小标题</h5> <h6>小小标题</h6> 2.斜体 <i>这是斜体</i> <!--换行-->
简单的.html文件
Luck_Wang的博客
08-29 528
一个简单的.html文件入门级，请大神指点。。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值