三分钟，HTML从基础开始

最新推荐文章于 2024-07-11 19:41:36 发布

大马哈鱼拌柠檬

最新推荐文章于 2024-07-11 19:41:36 发布

阅读量100

点赞数

分类专栏：学习记录文章标签： html

本文链接：https://blog.csdn.net/qq_44719839/article/details/118099561

版权

学习记录专栏收录该内容

18 篇文章 0 订阅

订阅专栏

学习目标：

HTML学习总结

学习内容：

1、什么是HTML
2、 HTML结构
3、 HTML内部搭建
4、其他

学习记录：

1.什么是HTML

HTML是超文本标记语言（HyperText Markup Language）的缩写。我们用 HTML 来构建 Web 页面即所谓的网页。
在我看来就是网页结构框架，还需要CSS(修饰)，JS(内部行为)共同构建网页，我也试着只搞一个html传到github上，出现的网页就像平时没加载出css 的网页一样，没有美观排布。

HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。
可以用控制台看当前网页的html文档。

2. HTML结构

首先说一下我的学习工具，用的visual studio code加上chrome游览器。插件有需要就下，比如自动保存插件，这个必要，因为自己写的时候有点长，要是没保存可能会真的昏过去。
然后进入重点：HTML文档结构一般包括包括标记（Html）、头部（Head）、主体（Body）三部分。
标记< html>：说明该文件是用超文本标记语言来描述的，它是文件的开头，而则表示该文件的结尾，它们是超文本标记语言文件的开始标记和结尾标记。
头部：表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容，本身不作为内容来显示，但影响网页显示的效果。
主体：网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记。
然后借助一下模板：

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

这样文档内右键Open in Default Browser，就能在目标游览器里出现一个好看的web页。
然后说一下HTML文件里的元素。就拿前面这个代码片，很容易发现，里面有很多的<>，这个东西加上里面的内容就是标签了，标签通常都是成对存在的。然后根据资料里，常见的标签如下这些：

<head>，
<title>，
<body>，
<header>，
<footer>，
<article>，
<section>，
<p>，
<div>，
<span>，
<img>，
<aside>，
<audio>，
<canvas>，
<datalist>，
<details>，
<embed>，
<nav>，
<output>，
<progress>，
<video>

这些也是用来标记的，虽然有些我用了映像也不深，但根据内容找的时候特别好找。元素是可以有相关属性的。属性包含元素的额外信息，这些信息不会在浏览器中显示出来。这也是不换格式在这个文档里无法显示元素的原因吧·····

3. HTML内部搭建

然后说一下内部的内容，HTML 提供了从大到小6级标题，分别是：h1-h6
对比到写文章的标题就是一级二级三级四级，搜索引擎用标题来索引页面的内容，用户也习惯以标题进行主要内容浏览，以决定是否查看该页面。

然后是超链接，这个就很重要了，语法如下：

<a href="https://www.baidu.com/" target="_blank">点一点，就会调转到百度</a>

这时候就右键Open in Default Browser就能看到一个蓝蓝的东西，点点就能调转，多页面里要转换也是靠这个。
还有那种如果你有图片库，还能调图片链接，当然一般我们的图片是放在css下面进行调用。
然后就是图片

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

这个图片还有大小的。但其实图片我们要确定位置的话还是在css里实现的，不然css里大了，你的图片大小没设置好也麻烦。

然后讲讲表格列表表单。这三在网页里到底是啥呢？举个例子，我们打开某宝网或者京某网这种购物网站，看他们的网页设计，相当舒服，其实就是运用了相当多的表格、列表、表单。比如他的分类，上面的一栏的分类，左侧的分类（怎么感觉电商的网站都这个排布啊……）然后这种东西有模板的可以直接用。最主要是css如何让你的表格好看！css真的太重要了！
还是上几个模板：

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

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

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

table,list,form，懂了

4.其他

下面是要注意的东西，比如在 HTML 中，某些字符是预留的。在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签，如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体。
然后其实还有其他问题，但因为太爱用模板改，所以还没有发现大问题······后面大作业一定要自己不用模板从空白开始建一个css文件和html文件来构建一个网页！