HTML初体验

最新推荐文章于 2024-11-14 15:33:48 发布

Lam。

最新推荐文章于 2024-11-14 15:33:48 发布

阅读量234

点赞数

文章标签： html

本文链接：https://blog.csdn.net/uvyou/article/details/114593185

版权

一、何为HTML

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

我们需要了解的是HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。

二、在VSCode下创建文件

（不推荐在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>

作为新手，我们目前学习title以下的部分，在编码区右键点击选择下面选项即可打开网页（没有的话是没下插件）
在这里插入图片描述
效果展示图：

三、了解HTML规则

通过代码可以看出，在每个元素中都有开始标签和结束标签，以<>来表示，而在中间的则是表达的内容。
上面的语句可以分析为：
第一句是对文档类型的声明，也可省略。

html包含整个页面。

head是一个容器，在里面可以加入想要表达的内容。

meta charset="utf-8"这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。

link那一行表示指定页面的图标，出现在浏览器标签上。

title是设置页面的标题

body包含你能在页面看到的所有内容，包括文本，图片，音频，游戏等

四、HTML中进行注释

在 code 软件中，输入Ctrl + /即可快捷的进行注释。

五、空元素

常见的空元素有
< br >表示换行
< hr >表示水平分割线
< input >表示输入框
下面是我改写的一个例子

元素的属性

元素是可以有相关属性的，它的规则是一个属性必须包含如下内容：

一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)

属性名称，后面跟着一个 = 号。

一个属性值，由一对引号 “” 引起来。

下面是我修改的例子
在这里插入图片描述

下面是网站的效果
在这里插入图片描述

六、标题

HTML 提供了从大到小6级标题，从h1到h6，这时可能会有疑问了，我如果写成h7会报错吗，我们来试试
为了形成对比，在h7的前后加入了h6的字体和正常文本的字体
在这里插入图片描述
网站效果如下，可以看出h7这一行被解读为正常文本字体，也就是< h7 >并未起作用

七、文本格式

将下面语句写入代码查看效果

> <p>You can use the mark tag to <mark>highlight</mark> text.</p>
> <p><del>This line of text is meant to be treated as deleted
> text.</del></p> <p><s>This line of text is meant to be treated as no
> longer accurate.</s></p> <p><ins>This line of text is meant to be
> treated as an addition to the document.</ins></p> <p><u>This line of
> text will render as underlined</u></p> <p><small>This line of text is
> meant to be treated as fine print.</small></p> <p><strong>This line
> rendered as bold text.</strong></p> <p><em>This line rendered as
> italicized text.</em></p>

网站效果如下：
在这里插入图片描述
通过对比可以发现使用不同的语句可以将文本展现成不同的样式

八、超链接

使用说明：

href即为要跳转去的地址 URL（Uniform Resorce Locator)
target属性为_blank表示在新的页面打开超链接（默认是在当前页面打开即_self）
超链接标签包含的内容（当前为文字"百度一下"）即为显示在页面上供用户点击的

稍加修改，就能快速的访问棋歌教学网
在这里插入图片描述
网站效果如下：

锚点

锚点，也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。

先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可
在这里插入图片描述
网站效果：

当文本内容多时，使用锚点就很方便。

思考：经常在某些网站上看到一个浮动图标显示"回到页首"，它是如何实现的？

我猜想是该图标是固定在屏幕上的，就是界面的滚动不影响图标的位置。

九、图片及文件路径

代码如下：
在这里插入图片描述
可以看出该图片是需要联网寻找的，如果是本地图片的话加载速度会更快

src属性为要显示图片文件的位置 URL，即图片文件的路径
alt属性当获取图片出现问题时显示的文字（占位符）

当图片不存在时，感觉在相对路径下更容易出现这种问题，比如在路径下找不到该图片。
在这里插入图片描述

改为相对路径后
在这里插入图片描述

效果展示：
在这里插入图片描述

十、表格

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

代码中，< tr >表示行, < td >表示行中的单元, < th >是表头的单元

十一、列表

无序列表

无序列表使用< ul >标签，默认使用实心圆点作为每项的标志，其它的标志可以是空心圆circle，实心方块square以及不出现标志。

这是默认的效果
在这里插入图片描述
在ul后加上type square后，前面的标点变为方块

<ul type="square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

在这里插入图片描述

有序列表

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

在网站上可以看到，每段的开头是以数字进行标签的
在这里插入图片描述
当ol的类型换为字母a时，就会按照a、b、c顺序进行排列，有序列表和无序列表根据自己的特性用在不同的场合。

十二、表单

代码如下：

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

运行效果：
在这里插入图片描述
可以看到这个样式已经网站的雏形了，稍加美化，我们也可以自己制作调查问卷。
通过分析代码可以看出，checked和selected都是表示为默认选项，只是在不同的语句中使用

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

十三、其他

HTML中元素分为内联和区块

区块元素

区块元素在浏览器中是一行一行的显示，如< h1 >、< p >、< div >等

内联元素

而内联元素相反，他们是一个接一个进行显示，不会换行。如：< span >、< input >、< img >等

预设格式

输入下面代码，其中pre包含的文本会以文本自身编排的形式原样展示，因此一些特殊的格式可以使用pre
在这里插入图片描述
网站效果：

特殊字符

在pre中加入标签的话浏览器还是会将标签解读出来，而不是显示为源代码。
如果想使用预留字符就需要使用特殊字符，比如

&nbsp; 代表一个空格

更多的信息可以查阅资料。

十四、总结

经过本次HTML的实验，让我初步了解了超文本标记语言，对构建网站有了体验，在自己浏览网站时往往会感叹这个网站做得多好，感觉很复杂。这是我第一次接触HTML，虽然对HTML了解得还很初步，但是我很感兴趣，因为可以自己建立网站，设计网站的样式、文字、图片等。入门的过程并不容易，比如在表单的创建中，有些命令的名字记不住，还是得对照例子进行修改。现在的我学习的只是入门的知识，构建的网站还是low，相信以后学习得更多，能够在网站上增添更多的元素。