HTML学习

最新推荐文章于 2022-03-24 11:16:30 发布

iybo

最新推荐文章于 2022-03-24 11:16:30 发布

阅读量205

点赞数

原文链接：https://editor.csdn.net/md/?articleId=117405937

版权

HTML学习

1. 何为HTML
2.HTML文档结构
3. HTML 文档结构分析
4. HTML 文档相关说明
5. 标题（heading）
6. 超链接 a及图片链接
7.表格 Table
8.列表 List
9. 表单 Form
10.其它

1. 何为HTML

HTML是超文本标记语言（HyperText Markup Language）的缩写。我们用 HTML 来构建 Web 页面即所谓的网页。

2.HTML文档结构

新建工作目录

前面我们已经安装了开发软件 code 及其相关的插件（code下载）。运行该软件，打开/新建一个文件夹。（注：该文件夹是我们的工作目录，一般不建在C盘）
在这里插入图片描述新建 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>

看看结果

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

3. HTML 文档结构分析

（1）HTML元素（elements）

HTML 使用"标记"（markup）来注明文本、图片和其他内容，以便于在浏览器中显示。HTML 标记包含一些规定的"元素"如 <head>，<title>，<body>，<header>，<footer>，<article>，<section>，<p>，<div>，<span>，<img>，<aside>，<audio>，<canvas>，<datalist>，<details>，<embed>，<nav>，<output>，<progress>，<video> 等等。

（2）剖析 HTML 文档

对于我们前面创建的 HTML 文档，分析如下：

<!DOCTYPE html>: 声明文档类型。出于历史原因需要，现在可有可无。
<html></html> : <html>元素。这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。
<head></head>: <head>元素。 这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。
<meta charset="utf-8">: 这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它，并且它能在以后避免很多其他问题。
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">: 指定页面的图标，出现在浏览器标签上。(试一试：你可随意下载一个.ico图标文件到工作目录中)
<title></title>: 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。
<body></body>: <body>元素。 包含你能在页面看到的所有内容，包括文本，图片，音频，游戏等等。

4. HTML 文档相关说明

为了将一段 HTML 中的内容置为注释，你需要将其用特殊的记号包括起来，比如：

<p>我在注释外，可以显示！</p>
<!-- <p>我在注释内！浏览器将忽略我</p> -->

空元素

一般来说，元素都拥有开始标签，内容，结束标签。但有一些元素只有一个开始标签，通常用来在此元素所在位置插入/嵌入一些东西，如<br>, <hr>, <input>, <img>, <a>等等。我们称其为空元素，如下：

<!-- 换行 -->
<p>我可以<br>换行</p> 
<!-- 水平分割线 -->
<hr>
<!-- 输入框 -->
<input>

元素的属性

元素是可以有相关属性的。属性包含元素的额外信息，这些信息不会在浏览器中显示出来。

<!-- 带属性的段落输入框 -->
<p title="这是个title属性">鼠标移上来试试！</p>
<!-- 带属性的输入框 -->
<input type="text">
<input type="password">

5. 标题（heading）

HTML 提供了从大到小6级标题，分别是:<h1> ~ <h6>，如下所示：

<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

提示:—级标题<h1>最醒目，应该用于页面的主标题，其次为二级标题，以此类推
注意:不要因为希望醒目，试图使用标题对正文的文字进行放大或加粗。正文文字的醒目可以使用文本格式或CSS进行。

6. 超链接 a及图片链接

超链接语法

<a href="https://www.baidu.com/" target="_blank">百度一下</a>

图片链接语法

<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">

7.表格 Table

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

等标签即可：

  <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>

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

8.列表 List

无序列表

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

在这里插入图片描述有序列表

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

在这里插入图片描述

9. 表单 Form

采集信息表单

<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>

在这里插入图片描述

10.其它

HTML 的元素可以以称为区块或内联的方式进行显示。
区块元素

区块元素在浏览器显示时，通常会以新行来开始（和结束）。如：<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">

在这里插入图片描述

预设格式

如果你想在网页中展示一首诗或一些特别格式的文本，那么请使用pre标签。

<!-- pre标签中的内容将保持格式不变 -->
<pre>
              我如果爱你——
              绝不象攀援的凌霄花，
              借你的高枝炫耀自己；
</pre>

在这里插入图片描述

iybo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习

HTML学习1. 何为HTML2.HTML文档结构3. HTML 文档结构分析4. HTML 文档相关说明5. 标题（heading）6. 超链接 a及图片链接7.表格 Table8.列表 List9. 表单 Form10.其它一级目录一级目录1. 何为HTMLHTML是超文本标记语言（HyperText Markup Language）的缩写。我们用 HTML 来构建 Web 页面即所谓的网页。2.HTML文档结构新建工作目录前面我们已经安装了开发软件 code 及其相关的插件（code下载）。
复制链接

扫一扫