HTML

一、HTML文档结构分析

<!DOCTYPE html>
<html>
<body>
  <h1>我的第一个Web页</h1>
  <p>暂无内容</p>
</body>
</html>

在这里插入图片描述

二、标签

1.标题

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

<h1>一级标题</h1>
<p>标题内容</p>
<hr>
<h2>二级标题</h2>
<p>标题内容</p>
<hr>

在这里插入图片描述

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

在这里插入图片描述

在这里插入图片描述

锚点

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

先使用id属性生成某元素的锚点,然后再使用超链接指向该锚点即可。

<!-- 文档其余部分 -->
<h2 id="C4">锚点内容</h2>
<!-- 文档其余部分 -->
<a href="#C4">跳到锚点内容</a>
<!-- 文档其余部分 -->
3.图片及文件路径 img
图片

在页面插入一张图片如下:

<img src="../1.jpg" >

src属性为要显示图片文件的位置 URL,即图片文件的路径`
在这里插入图片描述

文件路径

获取图片文件,我们需要指定该文件位于何处,这称为文件路径。文件路径有相对路径和绝对路径两种。

4.表格 table

有时,页面的内容需要用表格来进行呈现。我们使用<table>等标签即可:

<table>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
    </tr>
    <tr>
      <td>张三</td>
      <td></td>
      <td>20</td>
    </tr>
    <tr>
      <td>李四</td>
      <td></td>
      <td>60</td>
    </tr>
  </table>

在这里插入图片描述

5.列表 list
有序列表

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

<ol type="a">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ol>

在这里插入图片描述

无序列表

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

<ul type="square">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

在这里插入图片描述

6.表单 form
<form>
</form>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值