首页 > 其他分享 >html简单介绍-史上最简单版

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

时间:2024-08-11 23:28:05浏览次数:7  
标签:荔枝 title 标签 html 简单 属性 史上 页面

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>

标签:荔枝,title,标签,html,简单,属性,史上,页面
From: https://blog.csdn.net/lizhiwei21/article/details/141063444

相关文章

  • 打卡信奥刷题(544)用Scratch图形化工具信奥B2052[普及组/提高组] 简单计算器
    简单计算器题目描述一个最简单的计算器,支持+,-,*,/四种运算。仅需考虑输入输出为整数的情况,数据和运算结果不会超过int表示的范围。然而:如果出现除数为00......
  • 解决pip无法更新问题的简单方法:WARNING: You are using pip version 20.2.1; however,
    用pip安装python应用的程序包时,也遇到了同样的问题,pip无法正常更新,因此就不能用pip下载安装程序包了。需要必须把pip更新到最新的状态后,才能使用pip的便捷功能。当时网上搜搜答案解决了,没有记录下来。今天使用pip使,又遇到了同样的问题,依然是网上一顿搜,试了各种方法,才成功安装好了......
  • 横向滚动条 css js html
    目的:1.练习手写滚动条2.市面上多是竖向滚动条,横向滚动条较少3.横向滚动条,需要滑动到容器底部才能使用,不方便,因此想自己写一个横向滚动条放置在容器内部的视口高度的最低处3.问题复现:如果容器的内容超过了容器的宽度,就会出现横向滚动条(暂不考虑换行),但是如果该容器的高......
  • 这是DDD建模最难的部分(其实很简单)
     本文书接上回《为了落地DDD,我是这样“PUA”大家的》,欢迎关注我的同名公众号。https://mp.weixin.qq.com/s/DjC0FSWY1bgJyLPIND5evA 什么是最重要的事 如果你认真读过前面的文章,那么一定知道我们的核心逻辑:领域驱动是一种价值观,这个价值观是:“领域(边界)”的明确是软件设......
  • 项目管理工具Maven的简单配置示例
    Maven是一个强大的项目管理工具,它基于项目对象模型(POM)的概念,通过一小段描述信息来管理项目的构建、报告和文档。以下是一些关于Maven的具体例子,涵盖了项目配置、依赖管理、插件使用等方面:1.Maven项目基础配置Maven项目的基础配置通常体现在pom.xml文件中,该文件是Maven项目的核......
  • 大学生HTML期末大作业——HTML+CSS+JavaScript学校网站(学生信息管理系统)
    HTML+CSS+JS【学校网站】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计......
  • 分享一套包含12000多条历史上的今天发生的大事件数据库 及中国城市2017年全年GDP排行
    一、分享一套包含12000多条历史上的今天发生的大事件数据库    分享一套包括1.2万条历史上的今天的sql数据库文件。包含12000多条历史上的今天数据的SQL数据库文件.zip。详细数据可以参考使用此数据库运行的网站: http://www.guihei.com 下    资源下载链......
  • HTML 引用
    HTML中用于引文、引用和定义的几个重要元素。这些元素不仅帮助改善文档的可读性和结构,还提供了额外的语义信息,有助于搜索引擎优化(SEO)和辅助技术(如屏幕阅读器)的理解。以下是您提到的每个元素的简要回顾和额外说明:<q>元素用途:定义短的行内引用。浏览器表现:通常会自动在引用的......
  • 深入了解HTML链接:从基础到进阶——WEB开发系列06
    超链接是互联网中最有趣的创新之一,自互联网诞生起,它们就一直是互联网的一个核心特性,使网络成为一个互联的系统。超链接允许我们将文档连接到其他文档或资源,甚至是文档中的特定部分。通过一个简单的网址,可以提供应用程序。几乎所有网络内容都可以被转换为链接,点击或激活这些超链......
  • Python使用PyCharm创建一个简单的Qt Quick应用程序-hello_world_quick.py(读取qml文件
    """CreateaSimpleQuickApplication"""importsysfrompathlibimportPathfromPySide6.QtGuiimportQGuiApplicationfromPySide6.QtQmlimportQQmlApplicationEngine#打开文件,读取文件,并返回文件内容defread_file(file_path):"......