HTML学习总结

最新推荐文章于 2024-11-11 13:13:28 发布

有着大白牙的眯眯眼

最新推荐文章于 2024-11-11 13:13:28 发布

阅读量103

点赞数

文章标签： html

本文链接：https://blog.csdn.net/qq_50765541/article/details/115140098

版权

HTML结构

HTML文件以<html>开始，以</html>结束。
在<html>和</html>内有<head>和<body>两大基本框架，head一般是属性的设置，body内写入网页的内容。
如下图所示

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <title>页面标题</title>
</head>
<body>
  <h1>标题</h1>
  <p>内容</p>
</body>
</html>

HTML的元素

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

常用元素

1.链接：
<a>，href属性为目标地址，target属性为_blank表示在新的页面打开超链接

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

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

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

3.表格：
<table>，<tr>表示行, <td>表示行中的单元, <th>是表头的单元，使用方法：

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

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

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

有序列表使用<ol>标签，默认使用数字作为每项的标志，其它的标志可以是大写字母A，小写字母a，罗马字母i等。
有序列表示例：

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

5.锚点：
锚点，也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。
先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。

<!-- 文档其余部分 -->
<h2 id="C4">第四章 论零号病人的重要性</h2>
<!-- 文档其余部分 -->
<a href="#C4">跳到第四章</a>
<!-- 文档其余部分 -->
...

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

总结

多写多练才能学得快。