你好!WEB网页开发

最新推荐文章于 2021-06-10 12:41:53 发布

小米渣1

最新推荐文章于 2021-06-10 12:41:53 发布

阅读量274

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_51098062/article/details/115246695

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML的基础知识，包括如何创建文件、新建HTML文档、设置标题、创建超链接、插入图片、构建表格、使用列表和表单。同时，讲解了区块元素和内联元素的区别，并展示了预设格式的使用。通过实例代码，帮助读者理解每个元素的功能和用法。

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

这里写目录标题

创建文件

新建工作目录
前面我们已经安装了开发软件 code 及其相关的插件（code下载）。运行该软件，打开/新建一个文件夹，
在这里插入图片描述
点击图中所示，即可自动保存代码

新建 HTML 文件
接下来在该文件夹下新建一个后缀名为html 的文件

在该文件中输入如下内容

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <title>页面标题</title>
</head>
<body>
  <h1>我的第一个Web页</h1>
  <p>当前有点丑：)</p>
</body>
</html>

看看结果
Web 浏览器如 Chrome、 Firefox、Edge、Safari 等用来读取 HTML 文件并呈现出来。（再次推荐使用 Chrome 或 Firefox）

在开发工具 code 中我们已经安装了open in browser插件，因此在 code 的编辑区点击鼠标右键即可看到快捷方式将该文件在浏览器中打开
在这里插入图片描述

代码分析

在这里插入图片描述

标题

在这里插入图片描述

超链接 a

在这里插入图片描述

锚点

注意：

元素的id值必须是唯一的，也即页面不能再有其它元素的id值为C4
超链接中的地址需要有#符号

思考：
经常在某些网站上看到一个浮动图标显示"回到页首"，它是如何实现的？
使用超链接，添加首页的网址即可：
在这里插入图片描述

图片及文件路径 img

在页面插入一张图片如下：
在这里插入图片描述
文件路径
为获取图片文件，我们需要指定该文件位于何处，这称为文件路径。文件路径有相对路径和绝对路径两种。

上面图片的例子即为绝对路径。下面是相对路径的例子

在这里插入图片描述

表格

有时，页面的内容需要用表格来进行呈现。我们使用

等标签即可：

<table>
<tr>
  <th>Firstname</th>
  <th>Lastname</th>
  <th>Age</th>
</tr>
<tr>
  <td>Jill</td>
  <td>Smith</td>
  <td>50</td>
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td>
  <td>94</td>
</tr>
  </table>

代码中，表示行, 表示行中的单元, 是表头的单元（将会加粗显示）
在这里插入图片描述

列表

无序列表

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

结果：

Coffee
Tea
Milk

无序列表使用

标签，默认使用实心圆点作为每项的标志，其它的标志可以是空心圆circle，实心方块square以及不出现标志。
- Coffee
- Tea
- Milk
有序列表
1. Coffee
2. Tea
3. Milk
有序列表使用
1. 标签，默认使用数字作为每项的标志，其它的标志可以是大写字母A，小写字母a，罗马字母i等。
  1. Coffee
  2. Tea
  3. Milk

在这里插入图片描述

表单

<form>
  <!-- 文本框，注意有 placeholder 提示符 -->
  用户名：<br>
  <input type="text" name="name" placeholder="请输入用户名"><br>
  <!-- 密码框 -->
  密码：<br>
  <input type="password" name="ps" placeholder="请输入密码"><br>
  年龄：<br>
  <!-- 数字输入框，注意 min 和 value 属性-->
  <input type="number" name="age" min="18" value="18"><br>
  <!-- 单选按钮, 注意 checked 属性 -->
  性别：<br>
  <input type="radio" name="gender" value="male" checked> 男<br>
  <input type="radio" name="gender" value="female"> 女<br>
  <input type="radio" name="gender" value="other"> 其它<br>
  <!-- 下拉列表，注意 selected 属性 -->
  党派：<br>
  <select name="party">
    <option value="D">民主党</option>
    <option value="R" selected>共和党</option>
    <option value="N">无党派</option>
  </select><br>
  <!-- 多选框 -->
  您有哪些交通工具：<br>
  <input type="checkbox" name="vehicle1" value="Bike"> 自行车<br>
  <input type="checkbox" name="vehicle2" value="Motocycle" checked> 摩托车<br>
  <input type="checkbox" name="vehicle3" value="Car"> 轿车<br>
  <input type="checkbox" name="vehicle4" value="Jet"> 飞机<br>
  <!-- 日期选择器 -->
  您的工作日期：<br>
  <input type="date"><br>
  <!-- 文件选择器 -->
  上传您的照片:<br>
  <input type="file" name="photo"><br>
  <!-- 文本输入区域，注意 rows 和 cols 属性 -->
  您的建议：<br>
  <textarea name="message" rows="5" cols="30">
    The cat was playing in the garden.
  </textarea><br><hr>
  <!-- 表单提交/重置按钮，将表单中的数据取消或传输给服务器端进行处理 -->
  <input type="submit" value="提 交">
  <input type="reset" value="重 置">
</form>

提示：当提交时，表单中没有name属性的元素将不会提交，比如上面工作日期的选择器。有name属性的元素其value的值将提交给服务器。

可以根据代码修改表格内容
在这里插入图片描述
比如：

<form>
    <!-- 文本框，注意有 placeholder 提示符 -->
    学院：<br>
    <input type="text" name="name" placeholder="请学院名称"><br>
    <!-- 密码框 -->
    专业：<br>
    <input type="password" name="ps" placeholder="请输入专业名称"><br>
    
  </form>

在这里插入图片描述

区块元素和内联元素
区块：
区块元素在浏览器显示时，通常会以新行来开始（和结束）。如：<h1>, <pre>, <ul>, <table>，<div> 等。

<h2>区块元素</h2>
<div>Hello</div>
<div>World</div>
<p>单独一行</p>

在这里插入图片描述
内联：
内联元素相反，他们总是一个接一个进行显示，不会新起一行。如： <span>, <input>, <td>, <a>, <img>等。

<h3>下面的元素将在一行中显示</h3>
<span>姓名：</span>
<input name="username">
<span>哈哈哈</span>
<a href="https://google.com/">Google</a>
<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg">