HTML基础(入门)

最新推荐文章于 2024-11-15 11:24:51 发布

~浮生

最新推荐文章于 2024-11-15 11:24:51 发布

阅读量136

点赞数 1

文章标签： html 前端开发语言 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_73202205/article/details/129010956

版权

HTML是一种超文本标记语言，用于创建网页结构，包括标题、段落、链接、图片、列表和表单等元素。VisualStudioCode提供了快捷方式生成HTML代码，入门案例展示了如何创建基本的HTML文档，包括文档声明、头部和主体内容。HTML5引入了更多增强功能和语义化的标签，使其更强大且易于扩展。

摘要由CSDN通过智能技术生成

什么是HTML

HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。

超文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入

简易性：超文本标记语言版本升级采用超集方式，从而更加灵活方便。

可扩展性：超文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超文本标记语言采取子类元素的方式，为系统扩展带来保证。

平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超文本标记语言可以使用在广泛的平台上

通用性：HTML 允许你格式化文本,添加图片,创建链接,输入表单,框架和表格等等.并可将之存为文本文件，浏览器即可读取和显示。

入门案例

创建一个 index.html 文件

通过 Visual Studio Code 快捷键 ! 可以快速生成或输入html:5,按下tab键

<!DOCTYPE html>
<html lang="en">
  <head>
     <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>Document</title>
  </head>
  <body>
     网页主体区域
  </body>
</html>

其中:

<!DOCTYPE html> 声明为 HTML5 文档

<html> 元素是 HTML 页面的根元素

<head> 元素包含了文档的元（meta）数据

<title>指定整个网页的标题，在浏览器最上方显示

<meta> 元数据（metadata), 提供有关页面的基本信息

<body> 元素包含了可见的页面内容

存后运行，即可在浏览器中打开如下界面 Visual Studio Code 快捷键 Alt + B 可快速打开

基础标签详解

H1~H6 定义标题标签

<body>
  <h1>一级标题</h1>
  <h2>二级标题</h2>
  <h3>三级标题</h3>
  <h4>四级标题</h4>
  <h5>五级标题</h5>
  <h6>六级标题</h6>
</body>

p 用来表示段落的标签

<body>
  <p>文本</p>
  <p>夜雨翻江春浦涨，船头鼓急风初熟。</p>
  <p>风光人不觉，已著后园梅。</p>
</body>

div 块级元素标签

<body>
  <!-- 一个没有基础样式的块级元素  常用于包裹标签 -->
  <div>div标签</div>
</body>

a 超链接标签

<body>
  <a href="填写需要跳转的链接">a标签</a>
</body>

不常用的文本标签

<body>
  <b>粗体文本</b>
  <i>斜体文本</i>
  <u>文本下划线</u>
  <s>删除线</s>

  <br>
  强制换行

  <hr>
  定义水平线
</body>

ing 插入图片

<body>
  <!-- width:图片的宽度   height:图片高度 -->
  <img width="900px" height="500px" src="图片路径" alt="提示图片的含义">
</body>

ul li ol li列表标签

<body>
  <!-- 有序列表 -->
  <ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
  </ol>

  <!-- 无序列表 -->
  <ul>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
  </ul>

</body>

for

input 输入框

<body>
  <div>
    第一个表单框:<input type="text">
  </div>
  <div>
    第二个表单框:<input type="text">
  </div>
</body>

type 属性规定 input 元素的类型

实例

<body>
  <!-- 输入框 -->
  用户名:<input type="text" name="username">
  <br>
  <!-- 密码输入框  type="password" 会自动隐藏密码显示为***-->
  密 码：<input type="password" name="password">
  <br>
  <!--单选框-->
  <!--想要多个单选按钮互斥，需要把他们的name设为一样的-->
  性别：
  <input type="radio" name="gender" value="1">男
  <input type="radio" name="gender" value="2">女
  <br>
  <!--复选框-->
  爱好:
  <input type="checkbox" name="hobby" value="1">旅游
  <input type="checkbox" name="hobby" value="2">电影
  <input type="checkbox" name="hobby" value="3">阅读
  <br>
  <!--上传按钮-->
  上传图片:
  <input type="file">
  <br>
  <!--注册按钮-->
  <input type="submit" value="注册">
  <!--重置按钮-->
  <input type="reset" value="重置">
  <!--按钮-->
  <input type="button" value="一个普通按钮">
</body>