HTML技术(基础/列表/表格/表单)
2024-04-15 17:24:56
HTML技术
- 前言
- 一、HTML介绍
- 1.1 发展
- 1.2 HTML文件的基本结构
- 1.3 HTML标签和HTML元素概念
- 1.3.1 HTML标签
- 1.3.2 HTML元素
- HTML元素属性
- 1.4 HTML标签介绍
- 1.4.1 基本标签
- 1.4.2 特殊符号
- 1.4.3 列表标签
- 1.无序列表< ul> 、< li>
- 2.有序列表< ol> 、< li>
- 3.定义列表< dl>< dt>< dd>
- 4.嵌套列表
- 1.4.4 表格标签< table>< tr>< th>< td>< caption>
- 表格属性
- 1.4.5 表单标签< form>< input>< textarea>
- 1.4.6 表单和表格组合使用
- 1.4.7 < div>和< span>
前言
ubuntu下写HTML文本使用工具VS Code,win可使用H Builder
快速生成标准的html代码：
（1）在第一行输入！
（2）按Tab键或者选择代码提示中的！
快捷键(可自己更改)：
ctrl + k,然后按ctrl + c 快速生成注释 < !-- -->
shift+end 从头选中一行
shift+home 从尾部选中一行
快速复制 我设成了ctrl+alt+d
ctrl+] 行缩进
ctrl+[ 减少行缩进
ctrl+shift+L 实现同时编辑多处相同文字
alt+shift+左键点击 实现同时编辑点击处文字
ctrl + D 选中相同的
shift + 方向键
ctrl + 方向键 按边界挪
ctrl + shift + 方向键 按边界挪再选中
Alt+↑ 向上移动一行
Alt+↓ 向下移动一行
Visual Studio Code默认是在VScode的控制台下查看html页面，这对于我们调试和查看效果十分不方便。所以这里可安装一下扩展插件open in browser，在浏览器中查看html页面。安装完成后，选择你要在浏览器打开的HTML页面，按快捷键Alt + B 就可以在默认浏览器下打开你写的页面了。使用快捷键 Shift + Alt + B 可以选择其他浏览器打开。
web前端的三大核心技术：
HTML：结构
CSS：样式
JavaScript：行为
一、HTML介绍
HTML(Hyper Text Markup Language超文本标识语言)
- 是一种用来制作超文本文档的简单标记语言(不是开发语言)，是web开发的基本技术，对应的产出物-网页，页面- 用HTML编写的超文本文件成为HTML文件，也称Web文件
1.1 发展
HTML5是一个新的网络标准，仍处于发展阶段,它希望能够减少对外部插件的需求依赖(比如Flash),并且提供更过能有效增强网络应用的API。
1.2 HTML文件的基本结构
基本结构如下：
<HTML>
<HEAD>
<TITLE>我的第一个网页</TITLE>
</HEAD><BODY>Hello World!
</BODY>
</HTML>
注：基本结构为静态网页，变成动态需借助js
假如是用一个文本文档来编写的html结构，只需要把这个文档的后缀名字改成.html或者.htm就可以。
1.3 HTML标签和HTML元素概念
1.3.1 HTML标签
- HTML标记标签通常被称为HTML标签(HTML tag)
- 是由尖括号包围的关键词，比如< html>
- 通常成对出现，比如< b>< /b>
- 标签对中的第一个标签是开始标签(开放标签)，第二个是结束标签(闭合标签)
一个页面大部分都是由一对一的标签或者一个个的标签组合而成的。
创建标签的快捷键： 单词 + tab键 -> <单词>
1.3.2 HTML元素
- HTML元素是指从开始标签到结束标签之间所有的代码
- HTML文档由嵌套的HTML元素组成
- 空的HTML元素：没有内容/元素; 单个出现的标签，在开始使用的时候就已经结束了。
例：< br>换行
HTML元素属性
HTML元素属性：指的是给标签添加一些新的属性,修饰标签。格式：<开始标签 属性名='"属性值"><结束标签>- 属性放在开始标签中bgcolor 背景色background 背景图片
使用Visual Studio Code 来编写HTML代码 见这里
- 图上的 < meta charset="UTF-8" > 编码格式设置标签
测试过程会出现问题：当你去打开一个页面，页面显示的有乱码- 颜色表示法：1.颜色对应的英语单词 2.RGB颜色表示法(#号后面写6位字符和数字，或者#后面写3位字符或者数字，例：#ff00ff #ffffff)
<!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>页面属性</title>
</head>
<body bgcolor="#808a87">我是灰色背景页面
</body>
</html>
<!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>背景图</title>
</head>
<body background="img/1.jpg"></body>
</html>
1.4 HTML标签介绍
1.4.1 基本标签
- 标题标签: < h1>到< h6 >
数字越大，字体越小，自动换行和加粗 - 段落标签:< p>< /p>
align属性：改变出现位置 - 水平线: < hr>
- 换行:< br>
- 超链接标签:< a href=“指定要跳转到的页面”>< /a>
href属性：链接的地址 target属性：可以改变链接打开的方式，默认情况下：在当前页面打开 _self 新窗口打开 _blank 若想文本文件中所有的超链接都可以在新的窗口打开，可在head中使用base标签 - base标签
单标签，作用就是改变链接的默认行为 <base target="_blank"> - 注释
< !--This is a comment--> - 嵌入元素(声频、视频):
< embed src="文件名"> - 文本修饰标签:
< font>字体、字号标签font color可设置字体颜色
< big>定义大号字
< small>定义小号字
< b>粗体bold
< i>斜体italic
< strong>< /strong>强调(加粗
< em>< /em>强调(斜体
< sub>< /sub>下标
< sup>< /sup>上标
< del>< /del>文字当中划线表示删除 (一般del和ins标签配合使用)
< ins>< /ins>文字下划线表示插入 - 图片标签：
< img>:图片 ->单标签 src：引入图片的地址。 alt：当图片出现问题时，可以显示一段友好的提示文字 title：提示信息; width、height:图片的大小 - 锚点跳转：
第一种格式：#号加id地址 第二种:#号加name属性,注意name属性是加给a标签的 相比后者比较麻烦
<!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>标题标签</title>
</head>
<body><h1 align="right">我是h1标签</h1><h2>我是h2标签</h2><h3>我是h3标签</h3><h4>我是h4标签</h4><h5>我是h5标签</h5><h6>我是h6标签</h6><hr><a href="属性.html">点击我能够跳转</a><a href="http://www.baidu.com" target="_blank">跳转百度</a><a href="https://www.bilibili.com"><img src="./img/1.jpg" alt="" width="300" height="300"></a><p>我是段落一的第一句话。我是段落一的第二句话。我是段落一的第三句话。</p><p align="center">我是段落二的第一句话。我是段落二的第二句话。我是段落二的第三句话。</p><p><strong>强调加粗</strong><em>斜体强调</em>a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup> H<sub>2</sub>O</p><p>促销：原价<del>300</del>,现价<ins>150</ins>!!!</p><hr><!-- <img src="http://slide.collection.sina.com.cn/images/v1/collection/arrowHover.png" alt="链接出错啦" title="这是一张图片的提示信息" width="300" height="300"> --><img src="./img/1.jpg" alt="链接出错啦" title="这是一张图片的提示信息" width="300" height="300"></body>
</html>
HTML5 标签含义之元素周期表
注：在一个网页中，h1标题最重要，并且一个html文件中只能存在一个h1标签;h5、h6标签不经常用
<!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>锚点跳转</title>
</head>
<body><a href="#html">HTML</a><a href="#css">CSS</a><a href="#javascript">JavaScript</a><h2 id="html">HTML超文本标记语言</h2><p>模拟的段落</p><p>模拟的段落</p><p>模拟的段落</p><p>模拟的段落</p><p>模拟的段落</p><p>模拟的段落</p><p>模拟的段落</p><p>模拟的段落</p><p>模拟的段落</p><h2 id="css">CSS层叠样式表</h2><p>模拟的段落</p><p>模拟的段落</p><p>模拟的段落</p><p>模拟的段落</p><p>模拟的段落</p><p>模拟的段落</p><p>模拟的段落</p><p>模拟的段落</p><p>模拟的段落</p><h2 id="javascript">JavaScript</h2><p>模拟的段落</p><p>模拟的段落</p><p>模拟的段落</p><p>模拟的段落</p><p>模拟的段落</p><p>模拟的段落</p><p>模拟的段落</p><p>模拟的段落</p><p>模拟的段落</p> <!-- <a href="#html">HTML</a><a href="#css">CSS</a><a href="#javascript">JavaScript</a><a name='html'></a><h2>HTML超文本标记语言</h2><p>模拟的段落</p><p>模拟的段落</p><p>模拟的段落</p><p>模拟的段落</p><p>模拟的段落</p><p>模拟的段落</p><p>模拟的段落</p><p>模拟的段落</p><p>模拟的段落</p><a name="css"></a><h2>CSS层叠样式表</h2><p>模拟的段落</p><p>模拟的段落</p><p>模拟的段落</p><p>模拟的段落</p><p>模拟的段落</p><p>模拟的段落</p><p>模拟的段落</p><p>模拟的段落</p><p>模拟的段落</p><a name="javascript"></a><h2>JavaScript</h2><p>模拟的段落</p><p>模拟的段落</p><p>模拟的段落</p><p>模拟的段落</p><p>模拟的段落</p><p>模拟的段落</p><p>模拟的段落</p><p>模拟的段落</p><p>模拟的段落</p>-->
</body>
</html>
1.4.2 特殊符号
<!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>特殊符号</title>
</head>
<body><p><html></p><p>hello world</p>
</body>
</html>
1.4.3 列表标签
1.无序列表< ul> 、< li>
< ul> 、< li> ：列表的最外层容器、列表项
注：ul和li必须是组合出现的，他们之间是不能有其他标签的,但li内部可以有其他标签
type属性：改变前面标记的样式(一般都是用CSS去控制)
<!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>列表标签</title>
</head>
<body><!--正确的写法--><ul type="circle"><li>第一项</li><li>第二项</li></ul><!-- 错误的写法<ul><li><p><li>第一项</li></p></li></ul> -->
</body>
</html>
加type属性前
加type属性
2.有序列表< ol> 、< li>
注：有序列表用的非常少，经常用的是无序列表，无序列表可以代替有序列表
type属性值如下：
<!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>列表标签</title>
</head>
<body><ol><li>第一项</li><li>第二项</li><li>第三项</li></ol><ol type="a"><li>第一项</li><li>第二项</li><li>第三项</li></ol></body>
</html>
3.定义列表< dl>< dt>< dd>
列表项需要添加标题和对标题进行描述的内容时会用到定义列表
< dl>:定义列表
< dt>:定义专业术语或名词
< dd>:对名词进行解释和描述
<body><dl><dt>HTML</dt><dd>超文本标记语言</dd><dt>CSS</dt><dd>层叠样式表</dd><dt>JavaScript</dt><dd>网页脚本语言</dd></dl>
</body>
4.嵌套列表
列表之间可以互相嵌套形成多层级列表
<body><ul><li>辽宁省<ul><li>沈阳</li><li>大连</li><li>丹东</li></ul><li>山东省<ul><li>济南</li><li>青岛</li><li>烟台</li></ul></li></ul><hr><dl><dt>中国</dt><dd><dl><dt>辽宁省</dt><dd>沈阳</dd><dd>大连</dd><dd>丹东</dd></dl><dl><dt>山东省</dt><dd>济南</dd><dd>青岛</dd><dd>烟台</dd></dl></dd></dl></body>
1.4.4 表格标签< table>< tr>< th>< td>< caption>
< table>:表格的最外层容器
< tr>:定义表格行
< th>:定义表头
< td>:定义表格单元
< caption>:定义表格标题
注：之间是由嵌套关系的，要符合嵌套规范
语义化标签：< tHead>、< tBody>、< tFoot>
注：语义化标签主要是为了规范，并不会出现在页面中；在一个table中tbody是可以出现多次的，但是thead和tfoot只能出现一次
<!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>表格标签</title>
</head>
<body><table><caption>天气预报</caption><thead><tr><th>日期</th><th>天气情况</th><th>出行情况</th></tr></thead><tbody><tr><td>2021年5月3日</td><td><img src="./img/qing.png" alt="" width="50" height="50"></td><td>天气晴朗，适合出行</td></tr><tr><td>2021年5月4日</td><td><img src="./img/yu.png" alt="" width="50" height="50"></td><td>有雷阵雨，出门请带伞</td></tr></tbody><tfoot></tfoot></table>
</body>
</html>
表格属性
border：表格边框
cellpadding：单元格内的空间
cellspacing：单元格之间的空间
rowspan：合并行
colspan：合并列
align：左右对齐方式 left、center、right
valign：上下对齐方式 top、middle、bottom
<!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>表格标签</title>
</head>
<body><table border="1" cellpadding="30" cellspacing="30"><caption>天气预报</caption><thead><tr align="right"><th colspan="2">日期</th><th>天气情况</th><th>出行情况</th></tr></thead><tbody><tr valign="top"><td rowspan="2">2021年5月3日</td><td>白天</td><td><img src="./img/qing.png" alt="" width="50" height="50"></td><td>天气晴朗，适合出行</td></tr><tr><td>夜晚</td><td><img src="./img/yu.png" alt="" width="50" height="50"></td><td>天气晴朗</td></tr><tr valign="bottom"><td rowspan="2">2021年5月4日</td><td>白天</td><td><img src="./img/yu.png" alt=""width="50" height="50"></td><td>有雷阵雨，出门请带伞</td></tr><tr><td>夜晚</td><td><img src="./img/yu.png" alt=""width="50" height="50"></td><td>有雷阵雨</td></tr></tbody><tfoot></tfoot></table>
</body>
</html>
练习：制作如下的表格
如何在HTML表格的td标签中添加字体颜色
<!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>表格练习</title>
</head>
<body><table border="1" cellpadding="10" cellspacing="0"><thead><tr><th>班级名次</th><th>科目</th><th>授课内容</th><th>增值服务</th><th>课时</th><th>价格</th><th>试听</th><th>购买</th></tr></thead><tbody><tr align="center" valign="middle"><td rowspan="3"><b>真题精解班</b></td><td>行测+申论</td><td>全科历年真题精解</td><td rowspan="3">课后赠2套模拟卷24小时以内答疑</td><td>48</td><td><font color="red">1280元</font></td><td><img src="./img/试听.png" alt="" width="30" height="30"></td><td><img src="./img/购物车.png" alt="" width="30" height="30"></td></tr><tr align="center" valign="middle"><td>行测</td><td>行测历年真题精解</td><td>32</td><td>980元</td><td><img src="./img/试听.png" alt="" width="30" height="30"></td><td><img src="./img/购物车.png" alt="" width="30" height="30"></td></tr><tr align="center" valign="middle"><td>申论</td><td>申论历年真题精解</td><td>16</td><td>580元</td><td><img src="./img/试听.png" alt="" width="30" height="30"></td><td><img src="./img/购物车.png" alt="" width="30" height="30"></td></tr><tr align="center" valign="middle"><td rowspan="3"><b>高分技巧班</b></td><td>行测+申论</td><td>全科技巧强化</td><td rowspan="3">入学试卷测评24小时答疑</td><td>32</td><td><font color="red">980元</font></td><td><img src="./img/试听.png" alt="" width="30" height="30"></td><td><img src="./img/购物车.png" alt="" width="30" height="30"></td></tr><tr align="center" valign="middle"><td>行测</td><td>行测速解技巧强化</td><td>18</td><td>680元</td><td><img src="./img/试听.png" alt="" width="30" height="30"></td><td><img src="./img/购物车.png" alt="" width="30" height="30"></td></tr><tr align="center" valign="middle"><td>申论</td><td>申论行测速解技巧强化</td><td>14</td><td>580元</td><td><img src="./img/试听.png" alt="" width="30" height="30"></td><td><img src="./img/购物车.png" alt="" width="30" height="30"></td></tr></tbody><tfoot></tfoot></table>
</body>
</html>
1.4.5 表单标签< form>< input>< textarea>
< form>：表单的最外层容器
< input>：(单标签)用于搜集用户信息，根据不同的type属性值，决定是什么控件，如输入框、密码框、复选框等。
注：表单相比表格没有严格的嵌套规范
<!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>表单标签</title>
</head>
<body><form action="https://www.baidu.com"> <!--action属性后的属性值是表单数据要提交到的位置--><h2>输入框：</h2><input type="text"><h2>密码框：</h2><input type="password"><h2>复选框</h2><input type="checkbox">苹果<input type="checkbox">草莓<input type="checkbox">榴莲<h2>单选框</h2><input type="radio" name="gender">男<input type="radio" name="gender">女<h2>上传文件</h2><input type="file"><h2>提交按钮和重置按钮</h2><input type="submit"><input type="reset"></form>
</body>
</html>
注：type单选框要借助相同name属性来将两个单选框合并为一组，这样才能实现单选，否则如图，两个都能选中
H5表单中还有一些新的Input类型
请输入邮件地址：<input type="email" name="em"><br><br>请输入数字：<input type="number" max="20" min="0" step="2" value="8"><input type="submit" value="提交" name="sub">
注：input类型为email时，在输入框中若不输入带@的地址，提交时会提示请输入邮箱地址
表单中还有一些常用的属性
例：
- 一开始就想让苹果和草莓被选中,使用checked属性；
- 表单不让人点击/输入,disabled
- 输入框中有提示语：(例：请输入密码) placeholder
<form action="https://www.baidu.com"> <!--action属性后的属性值是表单数据要提交到的位置--><h2>输入框：</h2><input type="text" placeholder="请输入用户名"><h2>密码框：</h2><input type="password" placeholder="请输入密码"><h2>复选框</h2><input type="checkbox" checked>苹果<input type="checkbox" checked>草莓<input type="checkbox" disabled>榴莲
- 关于提交有不同的方法(告诉浏览器如何将编码后的数据发给服务器)-method属性 ，属性值有两个：get和post
get：浏览器会将表单中数据直接提交到表单指定的action URL之后,(本地化数据存储)
post：直接连接服务器，然后将html表单中的值发送给Web服务器。这种方式是没有字符长度限制的。
利用name属性
<form action="1_基本标签.html" method="GET"> <h2>输入框：</h2><input type="text" name="wenben" maxlength="10" size="30"><h2>密码框：</h2><input type="password" name="pwd" maxlength="8" size="33"><h2>复选框</h2><input type="checkbox" name="sg01" value="pingguo" checked>苹果<input type="checkbox" name="sg02" value="caomei" checked >草莓<input type="checkbox" name="sg03" value="liulian" disabled>榴莲<h2>单选框</h2><input type="radio" name="gender" value="nan">男<input type="radio" name="gender" value="nv">女<h2>上传文件</h2><input type="file"><h2>提交按钮和重置按钮</h2><input type="button" value="普通按钮" name="btn"><input type="submit" value="提交按钮" name="sub"><input type="reset" value="重置按钮" name="re">
提交后,URL显示：
以下标签会自动添加一些属性，涉及后端，暂时删去不看
- < textarea>:多行文本框
- < select>、< option>:下拉菜单
- < label>:辅助表单
无显示效果 ,使选择范围变大，提升用户体验
<!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>表单标签</title>
</head>
<body><form action="https://www.baidu.com"> <!--action属性后的属性值是表单数据要提交到的位置--><h2>多行文本框</h2><textarea cols="30" rows="10"></textarea><!--初始默认输入行是上海--><h2>下拉菜单</h2><select><option>北京</option><option selected>上海</option> <option>杭州</option></select><!--初始默认请选择，且该项不可被选中--><select><option selected disabled>请选择</option><option>北京</option><option>上海</option> <option>杭州</option></select><!--下拉菜单显示3项，默认1--><select size="3"><option selected disabled>请选择</option><option>北京</option><option>上海</option> <option>杭州</option></select><!-- 下拉菜单内容可鼠标滑动多选 --><select multiple> <option selected disabled>请选择</option><option>北京</option><option>上海</option> <option>杭州</option></select><!--multiple属性也可用于上传文件，实现同时上传多个文件--><input type="file" multiple><!-- label属性实现点击男女字符也可选中，利用for属性以及id来和前面的name属性实现映射，一一对应 --><h2>单选框</h2><input type="radio" name="gender" id="man"><label for="man">男</label><input type="radio" name="gender" id="woman"><label for="woman">女</label></form>
</body>
</html>
练习题：
<!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>表单练习</title>
</head>
<body><form action="">电子邮箱: <input type="text"><br>设置密码: <input type="password"><br>真实姓名: <input type="text"><br> 性别: <input type="radio" name="gender" id="man"> <label for="man">男</label> <input type="radio" name="gender" id="woman"> <label for="woman">女</label><br> 生日:<select name="" id=""><option value="" selected disabled>请选择</option><option value="">1990</option><option value="">1991</option><option value="">1992</option><option value="">1993</option><option value="">1994</option><option value="">1995</option></select>年<select name="" id=""><option value="" selected disabled>--</option><option value="">01</option><option value="">04</option><option value="">09</option><option value="">10</option><option value="">12</option></select>月<select name="" id=""><option value="" selected disabled>--</option><option value="">1</option><option value="">4</option><option value="">8</option><option value="">20</option><option value="">28</option></select>日<br> <a href="">为什么要填写我的生日?</a><br> 我现在:<select name="" id=""><option value="" selected disabled>请选择身份</option><option value="">学生</option><option value="">老师</option></select> <small>(非常重要)</small><br> <img src="./img/验证码.jpeg" alt=""><a href="">看不清楚换一张?</a><br> 验证码: <input type="text"><br><input type="submit"></form>
</body>
</html>
对齐方式和提交有待改进
可以尝试将表格和表单组合使用
1.4.6 表单和表格组合使用
一般将table写到表单里，因为表单没有严格的嵌套规范; td标签中可用其他标签，和列表相似
<!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><form action=""><table border="1" cellpadding="30"><tbody><tr align="center"><td rowspan="4">总体信息</td><td colspan="2">用户注册</td></tr><tr align="right"><td>用户名：</td><td><input type="text" placeholder="请输入用户名"></td></tr><tr align="right"><td>密码：</td><td><input type="password" placeholder="请输入密码"></td></tr><tr align="center"><td colspan="2"><input type="submit"> <input type="reset"></td></tr></tbody></table></form>
</body>
</html>
重写上次的练习题：
<!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><form action=""><table><tbody><tr align="left"><td>电子邮箱：</td><td><input type="text"></td></tr><tr align="left"><td>设置密码：</td><td><input type="password"></td></tr><tr align="left"><td>真实姓名：</td><td><input type="text"></td></tr><tr align="left"><td>性别：</td><td colspan="2" align="left"><input type="radio" name="gender" id="man"> <label for="man">男</label><input type="radio" name="gender" id="woman"> <label for="woman">女</label></td></tr><tr align="left" valign="top"><td rowspan="2">生日：</td><td colspan="3"><select name="" id=""><option value="" selected disabled>请选择</option><option value="">1995</option><option value="">1996</option></select>年<select name="" id=""><option value="" selected disabled>--</option><option value="">9</option><option value="">11</option></select>月<select name="" id=""><option value="" selected disabled>--</option><option value="">20</option><option value="">28</option></select>日</td></tr><td align="left"><a href="">为什么要填写我的生日?</a></td></tr><tr align="left" valign="top"><td rowspan="2">我现在：</td><td colspan="2"><select name="" id=""><option value="" selected disabled>请选择身份</option><option value="">学生</option><option value="">老师</option></select><small>(非常重要)</small></td></tr><tr><td colspan="2" align="left"><img src="./img/验证码.jpeg" alt="" width="30%" height="30%"><a href="">看不清楚换一张?</a></td></tr><tr align="left"><td>验证码：</td><td><input type="text"></td></tr><tr align="left"><td></td><td><input type="submit"></td></tr></tbody></table></form>
</body>
</html>
注：第一列弄成了左对齐，右对齐又乱了，思路没理清……
1.4.7 < div>和< span>
< div>(块)：全称division,"分割、分区"的意思,用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。div还可以嵌套多层div
< span>(内联)：对文字进行修饰的
注：这两者都是没有任何默认样式的，需要配合CSS才行
例：
黑框：块div
红框：标题h2 标题中的html5字和别的字颜色不同，可以用span标签
绿框：图片img
黄框：段落p
蓝框：链接a
<!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><!-- <div>这是一个块</div><span>这是一个内联</span> --><div><h2>[**教育]<span style="color: red;">html</span>-中国数万程序员的选择-官方首页</h2><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgx.xiawu.com%2Fxzimg%2Fi4%2Fi4%2FTB1I8_9LXXXXXbkXXXXXXXXXXXX_%21%210-item_pic.jpg&refer=http%3A%2F%2Fimgx.xiawu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622742777&t=66a15a593d26a7a966fda2434a2f383f" alt="" width="30%" height="30%"><p>balblablablabla</p><a href="#">www.mobiletrain.org 2019-04 评价 广告</a></div><div><h2>[**教育]<span style="color: red;">html</span>-中国数万程序员的选择-官方首页</h2><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgx.xiawu.com%2Fxzimg%2Fi4%2Fi4%2FTB1I8_9LXXXXXbkXXXXXXXXXXXX_%21%210-item_pic.jpg&refer=http%3A%2F%2Fimgx.xiawu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622742777&t=66a15a593d26a7a966fda2434a2f383f" alt="" width="30%" height="30%"><p>balblablablabla</p><a href="#">www.mobiletrain.org 2019-04 评价 广告</a></div>
</body>
</html>
之后将div块和CSS结合起来进行加样式，我们进入下一章CSS！
HTML技术(基础/列表/表格/表单)相关推荐
- Bootstrap框架(基础篇)之列表,表格,表单
继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul><li>-& ...
- 定义列表的特点html,HTML的列表表格表单知识点
无序列表格式 ...
- HTML基本结构 标签 列表 表格 表单 form input 单选框radio 多选框checkbox 列表框select option 按钮button
文章目录 HTML HTML基本结构 网页的基本标签 标题标签 段落标签 换行标签 水平线 字体样式标签 HTML注释和特殊符号 图像标签 常见的图片格式 语法 案例 链接标签 页面间链接 语法 锚链 ...
- (18)C#传智:HTML,属性,标签,元素,body,Font,A,列表,表格,表单,Div,Span,框架
比较简单,无事的跳过,直接w3c.school 一.HTML简介 一个实例:右键查看源文件(标签,属性,内容...) HTML文档=网页 HTML超文本标记语言(Hyper ...
- css文本,背景,动画和html列表,表格,表单总结
css文本标签的应用 文本 text-shadow文本阴影:1px 2px 3px color 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 第2个长度值用来设置对象的阴影垂直偏移值.可以为负 ...
- html语法中表格命令具备哪些属性,html 语法介绍 标签及有关属性 列表 表格 表单...
1.HTML简介 HTML是用来做网页 HTML:Herp Text MarkUp Language 超文本标记语言 超文本:超:超链接 包含超链接的文本 标记语言: 标记:标签 语言:制作网页的语言 ...
- js table 生成序号_el-table树形表格表单验证，js树形列表生成序号
树形表格表单验证预览 树形列表生成序号 首先需要生成一个序号用来确定表单验证的目标row,通过广度优先遍历,以1,1.1,1.1.1的规则对树形列表生成确定唯一值的索引,因为列表自身可以做CURD,因 ...
- CSS基础——CSS 列表和表单【学习笔记】
CSS 列表和表单 1. 列表标签(重点) 表格是用来显示数据的,列表是用来布局的. 概念: 容器里面装载着结构,样式一致的文字或图表的一种形式,叫列表 特点: 列表最大的特点就是 整齐 .整洁. 有 ...
- html如何制作一个漂亮的表格？+ 列表制作 + 表单制作（干货！直接收代码）
https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记 如有转载,请注明出处(如不注明,盗者必究) 目录 html如何 ...
- 第三章 表格、列表和表单（黑马程序员课程笔记）
1.表格标签 1.2 表格的基本语法 1.3 表头单元格标签 1.4 表格属性 1.5 表格结构标签 1.6 合并单元格 2.列表 2.1 无序列表 2.2 有序列表 2.3 自定义列表 3.表单标 ...
最新文章
- urlencode和quote的用法
- 不幸的是MyApp已停止。 我该如何解决？
- Python实现九九乘法表
- 我的linkedin profile
- vue router获取整条路径参数
- leetcode 621. Task Scheduler | 621. 任务调度器（Java）
- 程序员的前20个搜索和排序算法面试问题
- 【linux】学习6
- 小学奥数 7834 分成互质组 python
- CentOS 修改主机名（host）
- MySQL数据库中的删除命令：delete、truncate、drop
- python 手机号码识别_python3库可以识别电话号码、姓名、电子邮件和地址
- VSCode使用EmmyLua调试Lua代码
- AD学习之旅（1）— Altium Designer 16 软件下载与安装
- 用HTML来做导航栏
- ARM汇编 BIC和ORR指令
- 带表情字符插入mysql字段报错问题处理 Incorrect string value: ‘\xF0\xA5\x8C\x93\xE5\x85...‘ for column ‘nickName‘
- 计算机视觉书籍资源推荐_Computer Vision Principles, Algorithms, Applications, Learning
- LeCo-88.合并两个有序数组
- 第一次软工作业（数独）