HTML入门 超详细

已于 2022-08-31 19:01:00 修改
阅读量1.6k 收藏 10
点赞数 4
文章标签： mysql sql html html5 前端
于 2022-03-06 20:41:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55816781/article/details/123316877
版权

文章目录

HTML

一：基础认知

认识网页

1：什么是网页

文字，图片，音频，视频和超链接

2：网页后面的本质是什么

前端代码

3：代码通过什么转化为界面

浏览器的解析和渲染

五大浏览器

1：浏览器

是网页显示运行的平台

2：常见浏览器（五大）

IE，火狐，谷歌，safar，欧朋浏览器

谷歌浏览器用户群体最为广泛

3：渲染引擎（内核）

浏览器中专门对代码进行解析渲染的部分

image-20220302195241277

注意点

渲染引擎不同，解析相同代码的速度，性能和效果是不同的

谷歌浏览器效果好，推荐使用。

web标准

让不同的浏览器按照相同的标准显示效果，让展示的效果统一

web标准的三个构成

image-20220302195740881

web标准要求页面实现：结构，表现，行为三层分离

结构：HTML（决定了身体）

表现 :CSS(决定了样式美观)

行为:JavaScript(决定了交互的动态效果)

HTML 初体验

HTML的概念

HTML：超文本标记语言

专门用户网页开发的语言，主要通过HTML标签对网页的文本，图片，音频视频等进行描述

案例：文字变粗

<strong>我要变粗</strong>

HTML页面的固定结构

网页也和文章一样有固定的结构，例如整体，头部，标题，主体

网页的固定结构是通过特定的HTML标签进行描述的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>

</body>
</html>

VS Code基本认识

VS Code快捷标签

1:快速生成标签：英文+tab

2:快速保存：Ctrl+s

3：打开网页：Alt+b

​ 安装了open in browser插件

4：自动生成骨架: !+tab

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

5:注释：Ctrl+/

语法规范

结构说明

1：标签由<,>,/英文单词和字母组成，并且把标签<>包裹起来的英文单词或者字母叫做标签名

2：常见标签二部分组成，我们称之为：双标签，前部分为开始标签，后部分为结束标签，二部分之间包裹内容

3:少数标签由一部分组成，称之为单标签，自成一体 ，无法包裹内容

例如：hr,hb标签

标签属性

image-20220302211411610

1：标签的属性写在开始标签内部

2：标签上同时存在多个属性

3：属性之间以空格隔开

4：标签名与属性之间必须以空格隔开

5：属性之间没有顺序之分

HTML标签间的关系
父子关系（嵌套关系）
<head>
    <title></title>
</head>

<body>
    <p>
    </p>
</body>
兄弟关系（并列关系）
<head>
    
</head>
<body>
    
</body>

二：HTML标签学习

一：排版标签

1：标题标签h标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    普通文字
    <h1>1级标签</h1>
    <h2>2级标签</h2>
    <h3>3级标签</h3>
    <h4>4级标签</h4>
    <h5>5级标签</h5>
    <h6>6级标签</h6>
</body>
</html>

快捷键；ctrl+d，重复按即选中相同内容，可批量进行修改

特点：文字加粗，字体依次递减，独占一行

注意：h1标签对于网页尤为重要，开发有特定的使用场景，如新闻的标题，网页的logo

2：段落标签p标签
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=h1, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <h1>前端开发</h1>
   <p>前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 [1]  。</p>
   <p>前端开发从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。</p>
   <p>前端开发跟随移动互联网发展带来了大量高性能的移动终端设备应用。HTML5，Node.js的广泛应用，各类UI框架，JS类库层出不穷，开发难度也在逐步提升。 [1]</p>
</body>
</html>

特点：段落间存在间隙，独占一行

3：换行标签br标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=h1, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>前端开发</h1>
    <br>
    <p>前端开发是创建WEB页面或APP等前端界面呈现给用户的过程,通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 [1]  。</p>
    <p>前端开发从网页制作演变而来，名称上有很明显的时代特征。<br>在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。</p>
    <p>前端开发跟随移动互联网发展带来了大量高性能的移动终端设备应用。<br>HTML5，Node.js的广泛应用，各类UI框架，JS类库层出不穷，开发难度也在逐步提升。 [1]</p>
</body>
</html>

特点：单标签，让文字强制转换。

4：水平线标签hr标签

特点：单标签，在页面上显示一条水平线

2：文本格式化标签

场景：让文字加粗，下划线，倾斜，删除等下效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <b>加粗</b>
    <u>下划线</u>
    <i>倾斜</i>
    <s>删除线</s>
    <hr>
    <strong>加粗</strong>
    <ins>下划线</ins>
    <em>倾斜</em>
    <del>删除线</del>
</body>
</html>

image-20220303190618230

语义：突出重要性的强调语境

推荐使用第二组

因为strong，ins，em，del，表示的强调语义更加强烈！

3：图片标签

特点：单标签，展现的效果需要对标签的属性进行设置

<img src="" alt="" title="">

src:目标图片的路径（当网页和目标文件在同一个文件夹中，直接写名字加后缀名）

alt：替换文本，当图片加载失败后展现的文本信息

title:提示文本，当鼠标悬停在图片中，会显示的信息、

注意点：title属性不但可以用于图片标签，还可以用于其他标签，例如标题标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>美女子</title>
</head>
<body>
<img src="../img01.jpg" alt="和服美女" title="好好看的女生哇">
<h1 title="这是一个h1标签">标题1</h1>
</body>
</html>

图片标签中的width和height属性

属性值：宽度和高度

注意点：如果只设置了width和height中的一个，图片会自动等比例缩放

​ 实际开发中，可以设置一个，避免设置不当造成图片变形、

4：路径介绍

绝对路径：

目录下的绝对位置，可直接达到目标位置，通常以盘符开始的路径，也有以网址开始的路径

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="E:\Java\File\QQLogin\tankLogin.jpg" alt="坦克大战">
<img src="http://stu.ityxb.com/img/avatar.c5dbec73.png" alt="">
</body>
</html>
相对路径

从当前文件开始出发找到目标文件的过程

相对路径的分类

同级目录：当前文件和目标文件在同一个目录下，直接写目标文件的名字即可，或者./+图片名字

下级目录：目标文件夹/目标文件名或者./目标文件夹/目标文件名

上级目录：…/（回到上级目录）目标文件夹/目标文件名

5：音频标签

场景;在页面中插入音频

<audio src="" controls autoplay></audio>

src:音频的路径

controls：显示播放的控件

autoplay：自动播放（部分浏览器不支持）

loop：循环播放

注意点：音频标签只支持三种格式：MP3，Wav，Ogg

6：视频标签

场景：在页面中插入视频

<video src="../resources/video/怦然心动.mp4" contrals></video>

src:视频的路径

controls：显示播放的控件

autoplay：自动播放（部分浏览器不支持）

loop：循环播放

muted：静音

建议使用MP4文件格式

7：链接标签

场景：点击之后，从一个页面跳转到另外一个页面

称呼：a标签，超链接，锚链接

<a href="https://www.baidu.com/">点击之后进入百度网页</a>
<br>
<a href="14音频标签.html">点击进入音频标签</a>

属性名：herf

属性值：点击之后跳转的网页，外部链接和内部链接

显示特点：

  • ​ 默认的文字下划线

  • ​ a标签从为点击过，默认文字颜色为蓝色

  • ​ a标签点击过后，文字颜色为紫色（清空浏览器记录恢复蓝色）

target属性

属性值：目标网页的打开格式

取值：

_self:默认值，覆盖原网页

_blank:在新窗口跳转

空链接

<a href="#">空链接</a>

功能

  • 点击之后回到顶部

  • 开发中不确定链接最后跳转位置，用空链接占了这个位置

案例实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <h1>今日热词搜索</h1>
  <hr>
<h2>1、好听的音乐</h2>
  <br>
<p>好听的音乐各有各的精彩，而这首欧美流行歌曲，以欢快的内容，动感的节奏 <br>深得人心，接下来就让我们一起来听一听吧</p>
  <audio src="../resources/audio/music1.mp3" controls autoplay loop>music</audio>
  <br>
<h2>2、好看的视频</h2>
<p>好看的视频也可以让人心情愉悦哦，而下面这个视频就是以青春，校园，美女为元素，上演了一部精彩的mv <br>点击链接即可欣赏哦</p>
  <video src="../resources/video/怦然心动.mp4" controls autoplay >怦然心动</video>
</body>
</html>

二：列表标签

无序列表

场景：在网页中表示一组无顺序之分的列表，如：新闻列表

显示特点：列表的每一项前默认显示圆点标识

标签组成：

  1. ul：表示无序列表的整体，用于包裹li标签

  2. li：表示无序列表的每一项，用于包含每一行的内容

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>水果列表</h1>
<ul>
    <li>榴莲</li>
    <li>香蕉</li>
    <li>橘子</li>
    <li>苹果</li>
</ul>
</body>
</html>

    image-20220304202354676

注意点：

  • ul标签中只允许包含li标签

  • li标签可以包含任意内容

    <li><p>我是一个p标签</p></li>

有序列表

场景：在网页中表示一组有顺序之分的列表，例如排行榜

标签组成

  1. ol表示有序列表的整体，用于包裹li标签
  2. li表示有序列表的每一项，用于包含每一行的内容

显示特点

列表的每一项前默认显示序号标识

注意点

同无序标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>成绩排行表</h1>
<ol>
    <li>小姐姐：100分</li>
    <li>小帅哥：80分</li>
    <li>小可爱：60分</li>
</ol>
</body>
</html>

image-20220304202326122

自定义列表

场景：在网页的底部导航中通常会使用自定义列表实现

标签组成

dl：表示自定义列表的整体，用于包裹dt/dd标签

dt：表示自定义列表的主题

dd：表示自定义列表的针对的每一项内容

显示特点

dd会默认显示缩进效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<dl>    
    <dt>帮组中心</dt>
    <dd>账户管理</dd>
    <dd>购物指南</dd>
    <dd>订单操作</dd>
</dl>
</body>
</html>

image-20220304202246230

注意点

dl标签中只允许显示缩进效果

dt/dd标签可以包含任意内容

总结

无序列表最为常用，有序列表偶尔用，自定义列表底部导航用

三：表格标签

表格的基本标签

场景：在网页中以行+列的单元格的方式整齐展示和数据，如：学生成绩表

基本标签

table：表格整体，用于包含多个tr

tr：表格每行，用于包裹td

td：表格单元格，用于包含内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <table>
      <tr>
          <td>姓名</td>
          <td>成绩</td>
          <td>评语</td>
      </tr>
      <tr>
          <td>小哥哥</td>
          <td>100</td>
          <td>小哥哥真帅气</td>
      </tr>
      <tr>
          <td>小姐姐</td>
          <td>100分</td>
          <td>小姐姐真漂亮</td>
      </tr>
      <tr>
          <td>总结</td>
          <td>郎才女貌</td>
          <td>佳成</td>
      </tr>
  </table>
</body>
</html>

image-20220304204214583

表格的嵌套规则

  • table>tr>td
表格的相关属性

场景：设置表格相关展示效果

常见相关属性

border 数字 边框宽度

width 数字 表格宽度

height 数字 表格高度

<table border="1" width="300" height="200">

image-20220304204554198

注意点：实际开发时针对于样式效果推荐使用CSS设置

表格标题和表头单元格标签

场景：在表格中表示整体大标题和一列小标题

caption：表格大标题，表示表格整体大标题，默认在表格整体顶部局中位置显示

th：表头单元格，表示一列小标题，通常用于表格第一行，默认内部文字加粗并局中显示

 <caption>学生成绩单</caption>
      <tr>
          <th>姓名</th>
          <th>成绩</th>
          <th>评语</th>
      </tr>

image-20220305111456389

注意点：

  • caption标签书写在table标签内部
  • th标签书写在tr标签内部（用于替换td标签）
表格的结构标签

场景：让表格的内容结构分组，突出表格的不同部分（头部，主体，底部）使语义更加清晰

结构标签：

thead：表格头部

tbody：表格主体

tfoot：表格底部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <table border="1" width="300" height="200" >
      <caption>学生成绩单</caption>
      <thead>
      <tr>
          <th>姓名</th>
          <th>成绩</th>
          <th>评语</th>
      </tr>
      </thead>
      <tbody>
      <tr>
          <td>小哥哥</td>
          <td>100</td>
          <td>小哥哥真帅气</td>
      </tr>
      <tr>
          <td>小姐姐</td>
          <td>100分</td>
          <td>小姐姐真漂亮</td>
      </tr>
      </tbody>
     <tfoot>
     <tr>
         <td>总结</td>
         <td>郎才女貌</td>
         <td>佳成</td>
     </tr>
     </tfoot>
  </table>
</body>
</html>

注意点：

  • 表格结构标签用于包裹tr标签
  • 表格的结果标签课省略
合并单元格

场景：将水平或者垂直多个单元格

  1. 合并步骤：明确合并那几个单元格
  2. 通过左上原则，确定保留谁和删除谁
    • 上下合并一只保留最上的，删除其他
    • 左右合并一只保留最左的，删除其他

属性名：

rowspan：合并单元格个数，跨行合并，将多行单元格垂直合并

colspan：跨列合并，将多列单元格水平合并

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<table border="1" width="300" height="200" >
  <caption>学生成绩单</caption>
  <thead>
  <tr>
    <th>姓名</th>
    <th>成绩</th>
    <th>评语</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>小哥哥</td>
    <td  rowspan="2">100</td>
    <td>小哥哥真帅气</td>
  </tr>
  <tr>
    <td>小姐姐</td>
<!--    <td>100分</td>-->
    <td>小姐姐真漂亮</td>
  </tr>
  </tbody>
  <tfoot>
  <tr>
    <td>总结</td>
    <td colspan="2">郎才女貌</td>
<!--    <td>佳成</td>-->
  </tr>
  </tfoot>
</table>
</body>
</html>

注意点：只有同一个标签中的单元格才能合并，不能跨结构标签合并（thead,tbody,tfoot)

总结
  1. 表格基本标签：table>tr>td
  2. 表格标题和表头单元格标签：table>caption/tr>th

3:表格结构标签：table>thead>tr>td

4:标签相关属性：border，width，height

5:合并单元格：rowspan，colspan

四：表单标签

input系列标签基本介绍

场景：在网页中显示收集用户信息的表单效果，如：登录页，注册页

标签名：input

  • input标签可以通过type属性值的不同，展现不同效果

type属性值：

text：文本框，用于输入单行文本

password：密码框，用于输入密码

radio：单选框，用于多选一

checkbox：多选框，用于多选一

file：文件选择，用于上传文件

submit：提交按钮，用于提交

reset：重置按钮，用于重置

button：普通按钮，默认无功能，之后配合js添加功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

昵称：<input type="text" name="昵称" ><br><br>

密码：<input type="password" name="密码"><br><br>

性别：<input type="radio">男
    <input type="radio">女 <br><br>

爱好：<input type="checkbox">敲代码
    <input type="checkbox">打游戏
    <input type="checkbox">睡懒觉<br><br>

<input type="file"><br><br>

<input type="submit">
<input type="reset">

</body>
</html>
1：文本框text

场景：在网页中显示输入单行文本的表单控件

常用属性

placeholder：占位符，提示用户输入内容的文本

昵称：<input type="text" name="昵称" placeholder="请输入您的昵称">

image-20220305145652012

value属性：用户输入的内容，提交之后会发送给后端服务器

name属性：当前控件的含义，提交之后可以告诉后端发送过去的数据是什么含义

后端接受到数据的格式是：name属性值=value的属性值

2：密码框password

常用属性：placeholder

注意点：type属性值不能拼错或者多加空格，否则相当于设置了默认值状态：text文本框

3：单选框radio

常用属性：

name：分组，有相同name属性值的单选框为一组，一组中同时只能有一个被选中。

check：默认选中

性别：<input type="radio" name="sex" checked>男
    <input type="radio" name="sex">女 <br><br>

image-20220305153639037

注意点

  • name属性对于单选框有分组功能
  • 有相同name属性的单选框为一组，一组中只能同时有一个被选中
4：复选框checkbox

常用属性：checked，默认选中

爱好：<input type="checkbox" checked>敲代码
    <input type="checkbox">打游戏
    <input type="checkbox">睡懒觉<br><br>

image-20220305154835332

5:文件选择file

常见属性：

multiple：多文件选择

<input type="file" multiple><br><br>

image-20220305160956631

6:按钮

submit：提交按钮，点击之后提交数据给后端服务器

reset：重置按钮，点击之后恢复表单默认值

button：普通按钮，默认无功能，配合js添加功能

<input type="submit">
<input type="reset">
<input type="button" value="普通按钮">

image-20220305161848476

注意点：

  • 如果需要实现以上按钮功能，需要配合form标签使用

  • form使用方法，用form标签把单标签一起包裹起来即可

    总结

    1. 占位符：placeholder

    2. 如果需要实现单选效果，需要设置相同的name属性值

    3. 单选框和多选框的默认选中：checked

7:按钮标签button

场景：在网页中显示用户点击的按钮

标签名：button

type属性值：

submit：提交

reset：重置

button：按钮，配合js使用

注意点：

  1. button标签是双标签，更便于包裹其他内容，如文字，图片等。
8：下拉菜单select

场景：在网页中提供多个选择项的下拉菜单表单控件

标签组成：

select标签：下拉菜单的整体

option标签：下拉菜单的每一项

常见属性：

selected：下拉菜单的默认选中

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
所在城市：<select>
   <option >上海</option>
   <option >广州</option>
   <option >深圳</option>
   <option selected>北京</option>
</select>
</body>
</html>

image-20220305171740857

9：文本域标签textarea

场景：在网页中提供可输入多行文本的表单控件

标签名：textarea

常见属性：

cols：规定文本域内的可见宽度

rows：规定文本域内可见行数

注意点：

  • 右下角可以拖拽改变大小
  • 实际开发时针对样式效果推荐使用CSS设置
10：label标签

场景：常见于绑定内容与表单标签的关系

标签名：label

使用方法：

一：

1：使用label标签把内容如文本包裹起来

2：在表单标签上添加id属性

3：在label标签的for属性中设置对应的id属性

爱好：
  <input type="checkbox" id="one"> <label for="one">敲代码</label>
  <input type="checkbox" id="tow"> <label for="tow">熬夜</label>

二：

1：直接用label标签把内容如文本和表单标签一起包裹起来

2：需要label标签的for属性删除即可

 爱好：
  <label>
      <input type="checkbox">睡觉
  </label>
  <label >
      <input type="checkbox">干饭
  </label>
总结

image-20220306143718136

2：button标签

3：select标签

4：textarea文本域标签

5：label标签

五：语义化标签

1：没有语义的布局标签div标签和span标签

场景：实际开发网页是会大量频繁的使用div和span这二个没有语义的布局标签

div标签：一行只会显示一个

span标签：一行可以显示多个

<div>我是一个div标签</div>
<div>我是一个div标签</div>
<div>我是一个div标签</div>
<span>我是一个span</span>
<span>我是一个span</span>
<span>我是一个span</span>

image-20220306144518802

2:没有语义的布局标签

场景html5

标签：

header：网页头部

nav：网页导航

footer：网页底部

aside：网页侧边栏

section：网页区块

article：网页文章

注意点：以上标签显示特点和div一致，但是比div多了不同的语义

六：字符实体

1：HTML的空格合并现象

场景：如果在html代码中同时并列出现多个空格，换行，缩进，最终浏览器中只会解析一个空格

<p>你别靠我这么近

                 好的呢</p>

image-20220306150400579

2：常见字符实体

场景：在网页中展示特殊符号效果，需要使用字符实体替代

结构：&英文；

常见字符实体：

空格：&nbsp ;

小于号：&lt ;

大于号：&gt ;

特殊场景

p标签长这个样子：&lt;p&gt;&lt;/p&gt;

综合案例

1：优秀学生信息表格
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

  <table border="1" width="400" height="400">
<!--      局中标题-->
      <caption><h3>优秀学生信息表格</h3></caption>
<!--      头部-->
    <thead>
        <tr>
            <th>年纪</th>
            <th>姓名</th>
            <th>学号</th>
            <th>班级</th>
        </tr>
    </thead>
<!--      身体-->
      <tbody>
          <tr>
              <td rowspan="2">高三</td>
              <td>张三</td>
              <td>10</td>
              <td>三年二班</td>
          </tr>
          <tr>
              <td>赵四</td>
              <td>12</td>
              <td>三年三班</td>
          </tr>
      </tbody>
<!--      尾部-->
      <tfoot>
          <tr>
              <td>评语</td>
              <td colspan="4">你们都很优秀</td>
          </tr>
      </tfoot>
  </table>
</body>
</html>

效果：

image-20220306154212128

2：会员注册表单
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>青春不常在，抓紧谈恋爱</h1>
    <form action="">
        昵称：<input type="text" placeholder="请输入昵称"><br><br>
        性别：<input type="radio" name="gender" checked>男
        <input type="radio" name="gender">女
        <br><br>

        生日：<input type="date"> <br><br>

        城市：<select name="" id="">
        <option value="">北京</option>
        <option value="">上海</option>
        <option value="">天津</option>
        <option value="">重庆</option>
    </select><br><br>

        婚姻状况：<input type="radio" checked>未婚
        <input type="radio" name="marry">已婚
        <input type="radio" name="marry">保密
        <br><br>

        兴趣爱好：<input type="checkbox" checked>干饭
        <input type="checkbox" checked>健身
        <input type="checkbox" >读书
        <br><br>

        个人介绍： <br><br>
        <textarea name="" id="" cols="50" rows="12"></textarea>

        <h2>我承诺</h2>
        <ul>
            <li>年满18岁，单身</li>
            <li>抱着严肃的态度</li>
            <li>真诚的寻找另一半</li>
        </ul>
        <br>
        <input type="checkbox">我同意所有条款
        <br><br>
        <input type="submit" value="免费祖册">
        <input type="reset">
    </form>
</body>
</html>

效果：

image-20220306161409761

橘子味汽水ღ
关注
  • 4
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
HTML 表格
方寸想法，编码宇宙
04-25 1864
文章目录表格简述表格代码框架表格属性1.table属性2.tr属性3.thead/tbody/tfoot属性4.td和th属性单元格合并表格嵌套表格组合表格宽度的变化表格布局 表格简述 表格是一个可自定义的容器，因而它就是我们用以实现页面构设的利器。把表格称作容器缘于表格的装载特性。表格是用于装载数据的， 与我们现实中所看到和理解的表格非常一致。表格不仅仅只能装载数据，它还被广泛地应用于网页的布局...
HTML超详细讲解
weixin_49382813的博客
10-03 1052
前端知识点总结 前端知识点比较杂碎，但是不要死记硬背，多学会运用。 接下来分几部分进行总结。 HTML：网页的骨架，用来书写网页的。结构层（好比人的骨骼/身体） Css：美化网页的。表现层（好比人的穿衣打扮） javaScript：网页的灵魂，用来交互前端页面和后台服务器之间的数据的。行为层（好比一个人能歌善舞）。没有js，那么html+css就是一个静态页面，不会和后台服务器进行数据的交互。开发中也就没有什么意义了。 HTML 介绍 HTML：超文本标记语言（HyperText Markup Langua
html中表格和表单嵌套以及css基础知识
sz1125218970的博客
12-08 6140
笔记
html表格的嵌套
最新发布
2301_78986604的博客
06-14 251
【代码】html表格的嵌套。
day010：HTML表单与表格的嵌套
ZuoQi的博客
03-19 5397
一：表单与表格嵌套： <form> <table border="" cellspacing="" cellpadding="" bgcolor="" align=""> <tr> <td></td> </tr> </table> </form> 注：一定是表单form在外层，表格table在内层！！！ 二：代码举例 用户信息收集表 代码如下： 运行结果如下： ...
HTML笔记——③HTML列表、表格、表单
yanqiu12138的博客
10-28 1372
HTML的列表、表格、表单的基础知识
【HTML 基础】嵌套标签
好久不见的流星
02-04 1165
总的来说，HTML 中的嵌套标签是构建页面结构的不可或缺的工具。通过善用嵌套，我们能够创造出层次分明、结构清晰的网页，为用户提供更好的阅读和交互体验。
详解HTML
一个技术宅
10-25 402
1. HTML 1.1. HTML概述 1.1.1. HTML是什么 Html(Hyper Text Mark-up Language)就是超文本标记语言的简写，是最基础的网页语言。 实验：查看网页的源代码 1.1.2. HTML基本结构 Html是通过标签来定义的语言，代码都是由标签所组成。 Html代码不用区分大小写。 Html代码由开始结束。里面由头部分和体部分两部分组成。
HTML 30分钟入门教程
10-30
HTML（HyperText Markup Language）即超文本标记语言，是一种用于创建网页的标准标记语言。通过使用一系列预定义的标签，HTML可以用来构建结构化的文档，这些文档包含了文本、图片、链接等内容。 #### 二、HTML文档...
DJango入门案例+超详细步骤
08-05
**DJango入门案例详解** Django，作为Python领域内的一个强大Web框架，因其高效、安全且易于学习的特点，被广大开发者所青睐。本教程将基于一个实际的入门案例，逐步介绍如何使用Django从零开始构建一个简单的网页...
HTML 入门资料Demo
01-23
HTML 英文全称 " HyperText Mark-up Language " , 中文名称是 " 超文本标记语言 " 。是一种用于创建网页的标准标记语言。它使用一系列标签来描述网页内容的结构和样式，包括段落、标题、链接、图片、列表等。HTML...
学习html入门
12-24
学习HTML入门，首先要理解其基本结构和语法。 HTML由两大部分构成：头部（Head）和主体（Body）。头部不直接显示在页面上，但包含了许多对网页整体至关重要的元数据，如标题（Title）、字符编码（Character Set）、...
html + css 入门教程
02-18
### HTML + CSS 入门教程知识点详解 #### 一、基础知识概述 在开始学习HTML与CSS之前，我们首先需要明确几个基本概念。 1. **HTML（HyperText Markup Language）**： - 定义：HTML是一种标记语言，用于创建网页...
HTML之表格篇——表格的嵌套
热门推荐
xyjikl
06-29 1万+
表格的嵌套一方面是为使页面（贴子）的外观更为漂亮，利用表格嵌套来编辑出复杂而精美的效果，另一方面是出于布局需要，用一些嵌套方式的表格来做精确的编排，或者二者兼而有之。熟练地掌握表格的嵌套技巧并不是很困难的，只要你思路清晰，对表格的整体嵌套构架做到心中有数，在实际编辑时就不会出乱，发布出来的作品也就不会只是一堆代码。 下面将从最简单的表格嵌套开始演示和讲解，不会太难的。 两张表格的嵌套：
html——day2
2301_77787086的博客
07-22 1163
前端小白
利用html设置嵌套式表格,表格嵌套 HTML
weixin_39657825的博客
06-23 4837
嵌套表格就是在一个大的表格中，再嵌进去一个或几个小的表格，即插入到表格单元格中的表格。如果用一个表格布局页面，并希望用另一个表格组织信息，则可以插入一个嵌套表格。表格的嵌套一方面是为使页面的外观更为漂亮，利用表格嵌套来编辑出复杂而精美的效果，另一方面是出于布局需要，用一些嵌套方式的表格来做精确的编排，或者二者兼而有之。熟练地掌握表格的嵌套技巧并不是很困难的，只要思路清晰，对表格的整体嵌套构架做到心...
【HTML】表单和表格配合案例
MY9_19的博客
04-20 1862
表单和表格配合案例 使用表格和表单相互嵌套，将表格实现可填写，效果图如下： Html示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>人员信息</title> <link rel="stylesheet" href="for_table.css"> </head> <body> <div
表单嵌套表格实例
LIYICHENG00的博客
07-17 498
【代码】表单嵌套表格实例。
HTML之表格篇-表格嵌套表格
if_smile的博客
12-09 8503
嵌套表格一： 效果如图所示代码如下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; tabl
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

橘子味汽水ღ

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值