HTML期末复习,重要知识点摘录

HTML复习知识点摘录

1.html基本模板

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>

</body>
</html>

在这里插入图片描述

2.基本标签

<h>标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

</body>
</html>

2.段落标签<p>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>

</body>
</html>
3. <a>链接标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<a href="https://www.runoob.com">这是一个链接使用了 href 属性</a>

</body>
</html>

注意使用的属性是href实现跳转页面
在这里插入图片描述

4.<img>图像标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<img src="/images/logo.png" width="258" height="39" />

</body>
</html>

使用的链接属性是src
在这里插入图片描述

图像映射

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

3.HTML属性

在这里插入图片描述
在这里插入图片描述

4.文本格式化

在这里插入图片描述
在这里插入图片描述

5.HTML使用CSS

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

HTML表格<table>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<h4>没有单元格间距:</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>单元格间距="0":</h4>
<table border="1" cellspacing="0">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>单元格间距="10":</h4>
<table border="1" cellspacing="0">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

</body>
</html>

在这里插入图片描述

ulol不汇总了,太基础了,写一下<dl>

在这里插入图片描述

HTML区块

在这里插入图片描述

表单

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

    <h2>表单</h2>

    <form action="/" method="post">
        <!-- 文本输入框 -->
        <label for="name">用户名:</label>
        <input type="text" id="name" name="name" required>

        <br>

        <!-- 密码输入框 -->
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" required>

        <br>

        <!-- 单选按钮 -->
        <label>性别:</label>
        <input type="radio" id="male" name="gender" value="male" checked>
        <label for="male">男</label>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">女</label>

        <br>

        <!-- 复选框 -->
        <input type="checkbox" id="subscribe" name="subscribe" checked>
        <label for="subscribe">订阅推送信息</label>

        <br>

        <!-- 下拉列表 -->
        <label for="country">国家:</label>
        <select id="country" name="country">
            <option value="cn">CN</option>
            <option value="usa">USA</option>
            <option value="uk">UK</option>
        </select>

        <br>

        <!-- 提交按钮 -->
        <input type="submit" value="提交">
    </form>

</body>
</html>

在这里插入图片描述

转义

在这里插入图片描述

相关推荐

  1. Web期末复习知识

    2023-12-22 10:34:06       40 阅读
  2. 汇编期末复习知识

    2023-12-22 10:34:06       12 阅读
  3. 期末复习重点!!!)

    2023-12-22 10:34:06       38 阅读

最近更新

  1. TCP协议是安全的吗?

    2023-12-22 10:34:06       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-22 10:34:06       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-22 10:34:06       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-22 10:34:06       20 阅读

热门阅读

  1. jar包文件替换

    2023-12-22 10:34:06       39 阅读
  2. 雨云,你最好的服务器供应商选择

    2023-12-22 10:34:06       50 阅读
  3. K8S学习指南(32)-k8s网络插件cilium

    2023-12-22 10:34:06       34 阅读
  4. Hotspot源码解析-开篇

    2023-12-22 10:34:06       38 阅读
  5. [RK-Linux] RK3399支持M.2 NVMe SSD启动

    2023-12-22 10:34:06       46 阅读
  6. leetcode15. 三数之和

    2023-12-22 10:34:06       36 阅读