HTML简介

原创已于 2024-11-19 23:51:05 修改 · 1.2k 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

于 2024-11-19 23:50:09 首次发布

web 专栏收录该内容

5 篇文章

订阅专栏

知识点一 HTML

什么是HTML？

超文本标记语言(HyperTextMarkup Language，简称HTML)

怎么学HTML？

HTML 是一门标记语言，标记语言由一套标记标签组成，学习 HTML，其实就是学习标签

开发工具

编辑器: Pycharm 浏览器:Chrome、Firefox

HTML的基本结构

HTML的基本模块

<!DOCTYPE html>               <!--文档类型-->
<html lang="en">              <!--根标签>
<head>                        <!--网页头部-->
    <meta charset="UTF-8">    <!--国际编码-->
    <title>Title</title>      <!--网页标题-->
</head>                       
<body>
                               <!--网页主体>
</body>
</html>


<!--静态页面  动态页面-->
静态页面是随着HTML代码的生成，页面的内容和显示效果就基本不会发生变化
（除非修改页面代码），而动态页面，虽然同样页面代码不发生变化，但是其显
示的内容确实可以随着时间环境或者数据操作的结果而发生变化。

因此静态页面和动态页面的认识应该定位在：是否有数据库加工这个环节。例如
去购买T-shirt，我们直接从商店购买的T-shirt就是静态页面，而我们根据不同
人兴趣定制T-shirt就是动态页面。

知识点二标签

什么是标签：？

由尖括号包裹单词构成，eg:<html>,所以标签不可能以数字开头
标签不区分大小写，推荐小写
标签可以嵌套，但不能交叉嵌套
错误示例:<a><b></a></b>正确示例:<a><b></b></a>

标签使用样式:

1.开始标签<a >标签体</a>结束标签
2.自闭合标签，eg:<br>,<hr>,<input><img>

标签属性:

a.通常为键值对形式出现，eg:color=“red”  id='eat'
b.属性只能出现在开始标签和自闭和标签内
C.属性名字全部小写，属性值必须用单引或者双引包裹
d.如属性名和属性值完全一样，直接写属性名即可，eg:“readonly”(input标签属性)

标题标签及基础标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jianqi</title>
</head>
<body>
    <a href="#add">跳转到add</a>
    <p id="test"></p>
    <h1>1级标签</h1>
    <h2>2级标签</h2>
    <h3>3级标签</h3>
    <h4>4级标签</h4>
    <h5>5级标签</h5>
    <h6>6级标签</h6>
    <p>无人扶我青云志，
        我自踏雪至山巅。</p>
    <p>无人扶我青云志，
        我自踏雪至山巅。</p>
    <div>这是一个div标签</div>
    <div>这是第二个一个div标签</div>
    <div>
        一个最原始、最干净的容器 和其他容器标签用途一样，但其他标签都特定了装什么东四
    </div>
<!--target="_blank" 重新打开一个网页，默认是_self-->
    <a href="http://www.baidu.com" target="_blank"><img src="1.png"></a>
    <a href="#test">返回顶部</a>
    <a name="add"></a>
    <div>
<!--内连标签站占一行，只需要把内连标签套在外连标签中-->
    <a href="javascript:void(0)">点进去有惊喜</a>
    </div>
</body>
</html>


<!--静态页面  动态页面-->

有序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ol type="a" start="3">
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
    </ol>
</body>
</html>

无序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul type="circle">
<!--默认desc
    空心圆circle
    正方形的实心square
    取消none
    -->
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
    </ul>
</body>
</html>

标签缩进

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
&emsp;字符宽
&nbsp;空格宽
&lt;  <
&gt;  >
-->
    <i><strong><p>&emsp;&emsp;无人扶我青云志，我自踏雪至<a href="https://baike.baidu.com/item/%E5%B1%B1%E5%B7%85/5588984" target="_blank">山巅,&lt;听泉&gt;</a></p></strong></i>
    <i>斜体</i>
    <strong>粗体</strong>
</body>
</html>

-----------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <dl>
      <dt>江苏省</dt>
      <dd>南京市</dd>
      <dd>苏州市</dd>
      <dt>贵州省</dt>
      <dd>遵义市</dd>
      <dd>贵阳市</dd>
    </dl>
</body>
</html>

快捷键使用:ul>li*n;

ol>li*n;

dI>dt+dd*n;

知识点三特殊符号

参考HTML特殊字符符号大全-优快云博客https://blog.youkuaiyun.com/qq_45301392/article/details/128848810?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522c0c1135442e7c4afc61b97bd855fc559%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=c0c1135442e7c4afc61b97bd855fc559&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-128848810-null-null.142%5Ev100%5Econtrol&utm_term=html%E4%B8%AD%E7%9A%84%E7%89%B9%E6%AE%8A%E5%AD%97%E7%AC%A6&spm=1018.2226.3001.4187

知识点四表格

什么是表格？

表格其实就是大家平时看到的二维表，比如Excel表格之类

表格如今的地位

表格布局火于90年代，如今一般用于后台展示数据

表格初识

表格分为表头，表身和表脚

表格整体的结构

    *table  表格标签
    *thead  表头标签
    *tbody  表身标签
    *tfoot  表脚标签

表格的其他补充
caption 表格标题
rowspan 合并行
colspan  合并列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    table{
      border-collapse: collapse;  /* 边框合并 */
      text-align: center;  /* 居中 */
      width: 300px;
    }
  </style>
</head>
<body>
    <table border="2">
        <thead>
            <tr>
                <th>序号</th>
                <th>班级</th>
                <th>姓名</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="2">10</td>  <!-- 合并行 -->
                <td>python</td>
                <td>捡起</td>
                <td>牛</td>
            </tr>
            <tr>
                <td>11</td>
                <td rowspan="2">java</td>  <!-- 合并列 -->
                <td>fufu</td>
                <td>虎</td>
            </tr>
            <tr>
                <td>12</td>
                <td>math</td>
                <td>beibei</td>
                <td>兔</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

知识点五表单

表单是什么

表单是搜集用户数据信息的各种表单元素的集合区域

表单的作用

用于收取用户数据并向后台发送，前后交互的方式之一

表单的应用

表单常应用于 登录注册，搜索，文件上传等

表单的属性

form表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--    <form action="http://www.baidu.com/s" method="get">-->
<!--        <input type="text" name="wd" placeholder="请输入你要搜索的内容">-->
<!--        <input type="submit" value="提交">-->
        <form action="https://www.sogou.com/web" method="get">
            <input type="text" name="query" placeholder="请输入你要搜索的内容"><!-- name用作服务区作为数据交互 -->
            <input type="submit" value="提交">
<!--
type 属性规定 input 元素的类型
name    作为可与服务器交互数据的HTML元素的服务器端的标示。
button  定义可点击按钮(多数情况下，用于通过 JavaScript 启动脚本)。
checkbox    定义复选框。
hidden  定义隐藏的输入字段。
file    定义输入字段和"浏览"按钮，供文件上传。
image   定义图像形式的提交按钮。
password    定义密码字段。该字段中的字符被掩码。
radio   定义单选按钮。
reset   定义重置按钮。重置按钮会清除表单中的所有数据。
submit  定义提交按钮。提交按钮会把表单数据发送到服务器。
text    定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符
-->

        </form>
</body>
</html>

form表单完整版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="" method="get">
        <p>
            用户名：<input type="text" name="uer" placeholder="请输入用户名">
        </p>
        <p>
            密&emsp;码<input type="password" name="paw" placeholder="请输入密码">
        </p>
        <p>
            性&emsp;别
           <input type="radio" name="sex" value="female">女
           <input type="radio" name="sex" value="male">男
        </p>
        <p>
            爱&emsp;好
            <input type="checkbox" name="hobby" value="sing">唱歌
            <input type="checkbox" name="hobby" value="dance">跳舞
            <input type="checkbox" name="hobby" value="swim">游泳
        </p>
        <p>
          上传文件：<input type="file" name="file">
        </p>
        <p>
            <textarea name="xing" cols="30" rows="10" placeholder="写上你未来的计划">

            </textarea>
        </p>
        <p>
          <input type="submit" value="提交">
          <input type="reset" value="重置">
        </p>
    </form>
</body>
</html>

form领域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form>
        <fieldset>
            <legend>Personalia</legend>
            Name:<input type="text"><br>
            Email:<input type="text"><br>
            Date of birth:<input type="text">
        </fieldset>
    </form>
</body>
</html>

form下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form>
        <p>
            地址
            <select name="addr">
                <optgroup label="江苏省">
                    <option value="NJ">南京市</option>
                    <option value="SZ">苏州市</option>
                </optgroup>
                <optgroup label="贵州省">
                      <option value="ZY">遵义市</option>
                      <option value="GY">贵阳市</option>
                  </optgroup>
            </select>
        </p>
    </form>
</body>
</html>