Html基础与表单案例
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8" />
? ? <title>Html</title>
</head>
<body>
? ? <!-- HTML的定义：HTML是超文本标记语言
? ? ? ? 超文本就是链接，标记也叫标签，带尖括号的文本
? ? ? ? 标签语法
? ? ? ? 标签成对出现，中间包裹内容
? ? ? ? <>里面放英文字母（标签名）
? ? ? ? 结束标签比开始标签多/
? ? ? ? 双标签：成对出现的标签
? ? ? ? 单标签:只有开始标签，没有结束标签
? ? ?-->
? ? ?<strong>我爱前端</strong>
? ? ?<!-- strong标签是双标签，作用：加粗文字 -->
? ? ?<hr>
? ? ?<!-- hr标签是单标签，作用：生成一条水平线 -->
? ? ?<br>
? ? ?<!--br 标签是单标签 作用： 换行 -->
? ? ?<!-- html的基本骨架
? ? ? ? HTML的基本骨架是网页模板
? ? ? ? html：整个网页
? ? ? ? head：网页头部，存放给浏览器看的代码，例如css
? ? ? ? body：网页主体，存放给用户看的代码，例如图片，文字
? ? ? ? title：网页标题
? ? ? ? 快速生成：在html文件中按 ！（英文状态）和enter键或tab键 ? ?-->
? ? ? ? <!-- 标签关系
? ? ? ? 作用：明确代码的书写位置
? ? ? ? 1.父子关系（嵌套关系）
? ? ? ? 2.兄弟关系（并列关系）
? ? ? ? -->
? ? ? ? <!-- 注释
? ? ? ? 注释就是对代码的解释和说明，能提高代码的可读性
? ? ? ? 不会在浏览器中显示
? ? ? ? 快捷键：Ctrl+/
? ? ? ? -->
? ? ? ? <!-- 标题标签
? ? ? ? 标签名：h1~h6（双标签）
? ? ? ? 特点：文字加粗，逐渐减小，独占一行（换行）
? ? ? ? -->
? ? ? ? <h1>一级标题</h1>
? ? ? ? <h2>二级标题</h2>
? ? ? ? <h3>三级标题</h3>
? ? ? ? <h4>四级标题</h4>
? ? ? ? <h5>五级标题</h5>
? ? ? ? <h6>六级标题</h6>
? ? ? ? <!-- 经验：h1标签在一个页面只用一次，用来放标题或logo
? ? ? ? h2~h6则没有限制
? ? ? ? ?-->
? ? ? ? ?<p>段落一</p>
? ? ? ? ?<p>段落二</p>
? ? ? ? ?<!-- 段落标签
? ? ? ? 一般用在新闻段落，文章段落，产品描述等
? ? ? ? 标签名：p（双标签）
? ? ? ? 显示特点：独占一行，段落之间有间隙
? ? ? ? -->
? ? ? ? 第一行内容<br><hr>第二行内容
? ? ? ?
? ? ? ? <!-- 换行于水平线标签
? ? ? ? 换行：<br>(单标签)
? ? ? ? 水平线：<hr>标签（单标签）
? ? ? ? -->
? ? ? ? <strong>加粗</strong>
? ? ? ? <em>倾斜</em>
? ? ? ? <ins>下划线</ins>
? ? ? ? <del>删除线</del>
? ? ? ? <!-- 文本格式化标签
? ? ? ? 作用：为文本添加特殊的格式。，以突出重点，都不换行。
? ? ? ? 常见的文本格式：加粗，倾斜，下划线，删除线等
? ? ? ? strong：加粗
? ? ? ? em：倾斜
? ? ? ? ins：下划线
? ? ? ? del：删除线
? ? ? ? -->
? ? ? ? <!-- 图像标签
? ? ? ? 作用：在网页中插入图片
? ? ? ? <img src='图片的URL'>
? ? ? ? src:用于指定图像的位置和名称，是<img>的必须属性
? ? ? ? 图像标签的属性（不区分先后顺序）
? ? ? ? 属性名='属性值'
? ? ? ? alt：替换文本，图片无法显示的时候显示的文字
? ? ? ? title：提示文本，鼠标悬停在图片上面的时候显示的文字
? ? ? ? width：设置宽度
? ? ? ? height：设置高度
? ? ? ? 注意：浏览器缩放图片是等比例缩放的
? ? ? ? -->
? ? ? ? <!-- 路径
? ? ? ? 路径就是指从查找文件时的起点到终点所经历的路线
? ? ? ? 相对路径：从当前文件位置出发查找目标文件
? ? ? ? 绝对路径：从盘符出发查找目标文件
? ? ? ? window电脑从盘符出发，Mac电脑从根目录出发
? ? ? ? . 表示当前文件所在文件夹
? ? ? ? / 表示进入某个文件夹里面
? ? ? ? ..当前文件的上一级文件夹
? ? ? ? -->
? ? ? ? <!-- 超链接
? ? ? ? ? ? 作用：点击跳转到其他页面
? ? ? ? ? ? <a href='xxx.xxx.xxx'>xxx</a>
? ? ? ? ?-->
? ? ? ? ?<a href="#" target="_blank">跳转</a>
? ? ? ? ?<!-- 在新窗口打开页面 -->
? ? ? ? ?<!-- 加了target='_blank' 属性跳转时可以不覆盖原网页 -->
? ? ? ? ?<audio src="音频的URL"></audio>
? ? ? ? ?<!-- 音频标签
? ? ? ? ? ? 常见属性：
? ? ? ? ? ? src：必须属性，作用：音频的URL
? ? ? ? ? ? controls：作用是显示音频控制面板
? ? ? ? ? ? loop：作用是循环播放
? ? ? ? ? ? autoplay：作用是自动播放,但浏览器为了用户体验会禁用
? ? ? ? ? ? -->
? ? ? ? <video src="视频的URL"></video>
? ? ? ? <!--
? ? ? ? ? ? src：必须属性，作用：视频的URL
? ? ? ? ? ? controls：作用是显示视频控制面板
? ? ? ? ? ? loop：作用是循环播放
? ? ? ? ? ? muted：禁音播放
? ? ? ? ? ? autoplay：作用是自动播放,但浏览器为了用户体验只能在静音状态下自动播放
? ? ? ? ?-->
? ? ? ? ?<!-- 列表
? ? ? ? ? ? 作用：布局内容排列整齐的区域
? ? ? ? ? ? 列表分类：无序列表，有序列表，定义列表
? ? ? ? -->
? ? ? ? <ul>
? ? ? ? ? ? <li>列表条目1</li>
? ? ? ? ? ? <li>列表条目2</li>
? ? ? ? </ul>
? ? ? ? <!-- 无序列表
? ? ? ? 作用：布局排列整齐的不需要规定顺序的区域
? ? ? ? 标签：ul嵌套li，ul是无序列表，li是列表条目
? ? ? ? 注意：ul标签里面只能包裹li标签，li标签里面可以包裹任何内容
? ? ? ? -->
? ? ? ? <ol>
? ? ? ? ? ? <li>列表条目1</li>
? ? ? ? ? ? <li>列表条目2</li>
? ? ? ? </ol>
? ? ? ? <!-- 有序列表
? ? ? ? 作用：布局排列整齐的需要规定顺序的区域
? ? ? ? 标签：ol嵌套li，ol是有序列表，li是列表条目
? ? ? ? 注意：ul标签里面只能包裹li标签，li标签里面可以包裹任何内容
? ? ? ? -->
? ? ? ? <dl>
? ? ? ? ? ? <dt>我是标题</dt>
? ? ? ? ? ? <dd>我是描述</dd>
? ? ? ? </dl>
? ? ? ? <!-- 定义列表
? ? ? ? 标签：dl嵌套dt和dd，dl是定义列表，dt是定义列表的标题，dd是定义列表的描述/详情
? ? ? ? 注意：dl里面只能包含dt和dd，dd和dt可以包含任何内容
? ? ? ? -->
? ? ? ? <table border="1">
? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <th>姓名</th>
? ? ? ? ? ? ? ? <th>数学</th>
? ? ? ? ? ? </tr>
? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <td>小雷</td>
? ? ? ? ? ? ? ? <td>150</td>
? ? ? ? ? ? </tr>
? ? ? ? </table>
? ? ? ? <!-- 表格
? ? ? ? 网页中的表格于Excel表格类似，用来展示数据
? ? ? ? 标签：table嵌套tr，tr嵌套td/th
? ? ? ? table：表格
? ? ? ? tr：行
? ? ? ? th：表头单元格
? ? ? ? td：内容单元格
? ? ? ? 注意：在网页中，表格默认没有边框线，使用border属性可以为表格添加边框线
? ? ? ? -->
? ? ? ? <table border="1">
? ? ? ? ? ? <thead>
? ? ? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? ? ? <th>姓名</th>
? ? ? ? ? ? ? ? ? ? <th>数学</th>
? ? ? ? ? ? ? ? </tr>
? ? ? ? ? ? </thead>
? ? ? ? ? ?<tbody>
? ? ? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? ? ? <td>小雷</td>
? ? ? ? ? ? ? ? ? ? <td>150</td>
? ? ? ? ? ? ? ? </tr>
? ? ? ? ? ? </tbody>
? ? ? ? ? ? <tfoot>
? ? ? ? ? ? ? ? <td>第一</td>
? ? ? ? ? ? ? ? <td>满分150</td>
? ? ? ? ? ? </tfoot>
? ? ? ? </table>
? ? ? ? <!-- 表格结构标签
? ? ? ? 作用：用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰
? ? ? ? thead：表格头部，表格头部内容
? ? ? ? tbody：表格主体，主要内容区域
? ? ? ? tfoot：表格底部，汇总信息区域
? ? ? ? 不会改变网页只是让代码更清晰
? ? ? ? -->
? ? ? ? <table border="1">
? ? ? ? ? ? <thead>
? ? ? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? ? ? <th>姓名</th>
? ? ? ? ? ? ? ? ? ? <th>数学</th>
? ? ? ? ? ? ? ? </tr>
? ? ? ? ? ? </thead>
? ? ? ? ? ?<tbody>
? ? ? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? ? ? <td>小雷</td>
? ? ? ? ? ? ? ? ? ? <td rowspan="2">150</td>
? ? ? ? ? ? ? ? ? ? ?<!-- 上下合并150这个单元格，要加rowspan，合并几个值就写几个 -->
? ? ? ? ? ? ? ? </tr>
? ? ? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? ? ? <td>小雷</td>
? ? ? ? ? ? ? ? ? ? <!-- <td>150</td> -->
? ? ? ? ? ? ? ? ? ? <!-- 把被合并的单元格去掉 -->
? ? ? ? ? ? ? ? </tr>
? ? ? ? ? ? </tbody>
? ? ? ? ? ? <tfoot>
? ? ? ? ? ? ? ? <td colspan="2">满分150</td>
? ? ? ? ? ? ? ? <!-- 左右合并满分150这个单元格，要加colspan，合并几个值就写几个 ?-->
? ? ? ? ? ? ? ? <!-- <td>满分150</td> -->
? ? ? ? ? ? ? ? <!-- 把被合并的单元格去掉 -->
? ? ? ? ? ? </tfoot>
? ? ? ? </table>
? ? ? ? <!-- 合并单元格
? ? ? ? 作用：将多个单元格合并成一个单元格，以合并同类信息
? ? ? ? 步骤：
? ? ? ? 1.明确合并目标
? ? ? ? 2.保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）
? ? ? ? 跨行合并，保留最上单元格，添加属性rowspan
? ? ? ? 跨列合并，保留最左单元格，添加属性colspan
? ? ? ? 3.删除其他单元格
? ? ? ? 注意：不要跨结构（tf，tb，th）合并
? ? ? ? -->
? ? ? ?
? ? ? ? 文本框：<input type="text" placeholder="请输入文本">
? ? ? ? <br><br>
? ? ? ? 密码框：<input type="password" placeholder="请输入密码">
? ? ? ? <br><br>
? ? ? ? 多选框：<input type="checkbox" checked>
? ? ? ? <!-- 默认选中 -->
? ? ? ? <br><br>
? ? ? ? 单选框1：<input type="radio" name="gender" checked="checked">
? ? ? ? <!-- 默认选中 -->
? ? ? ? <br><br>
? ? ? ? 单选框2：<input type="radio" name="gender">
? ? ? ? <br><br>
? ? ? ? 上传文件：<input type="file">
? ? ? ? <br><br>
? ? ? ? 上传文件：<input type="file" multiple>
? ? ? ? <!-- 表单
? ? ? ? 作用：收集用户信息
? ? ? ? input的基本使用
? ? ? ? input标签type属性值不同，则功能不同
? ? ? ? <input type=''>
? ? ? ? 属性有：
? ? ? ? text:文本框，用于输入单行文字
? ? ? ? password:密码框
? ? ? ? radio:单选框
? ? ? ? checkbox:多选框
? ? ? ? file:上传文件
? ? ? ? input的占位文本
? ? ? ? 占位文本：提示信息
? ? ? ? <input type='' placeholder='要提示的信息'
? ? ? ? 单选框radio
? ? ? ? 常用属性：
? ? ? ? name：控件名称，控件分组，同组只能选中一个（单选功能）
? ? ? ? checked：默认选中，属性名和属性值相同，简写位一个单词
? ? ? ? 上传文件 file
? ? ? ? 默认情况下，文件上传表单控件只能上传一个文件，添加multiple属性可以实现文件多选功能。
? ? ? ? <input type='file' multiple>
? ? ? ? 多选框-checkbox
? ? ? ? 多选框也叫复选框
? ? ? ? 默认选中：checked
? ? ? ? -->
? ? ? ? 城市：
? ? ? ? <select>
? ? ? ? ? ? <option>北京</option>
? ? ? ? ? ? <option selected>广州</option>
? ? ? ? ? ? <!-- 加了selected是可以设置默认选中广州 -->
? ? ? ? ? ? <option>上海</option>
? ? ? ? ? ? <option>深圳</option>
? ? ? ? </select>
? ? ? ? <!--下拉菜单
? ? ? ? ? ? 标签：select嵌套option，select是下拉菜单整体，option是下拉菜单的每一项
? ? ? ? ?-->
? ? ? ? ?文本域：
? ? ? ? ?<textarea>输入文本</textarea>
? ? ? ? ?<!-- 文本域标签
? ? ? ? 作用：多行输入文本的表单控件
? ? ? ? 标签：textarea 双标签
? ? ? ? 右下角有拖拽功能，未来都会禁用的，会用css设置尺寸
? ? ? ? -->
? ? ? ? 点文字也会选中
? ? ? ? <!-- 完整写法 写法一 -->
? ? ? ? <input type="radio" name="gender" id='man'><label for='man'>男</label>
? ? ? ? <!-- 简单写法 写法二 -->
? ? ? ? <label><input type="radio" name="gender">女</lab1>
? ? ? ? <!-- label标签
? ? ? ? 作用：网页中，某个标签的说明文本
? ? ? ? 经验：用label标签绑定文字和表单控件的关系，增大表单控件的点击范围
? ? ? ? 写法一：
? ? ? ? label标签只包裹内容，不包裹表单控件
? ? ? ? 设置label标签的for属性值和表单控件的id属性值相同
? ? ? ? <input type ='radio' id ='man'>
? ? ? ? <label for='man'>男</label>
? ? ? ? 写法二：
? ? ? ? 使用label标签包裹文字和表单控件，不需要属性
? ? ? ? <label><input type='radio' 女 <label>
? ? ? ? 提示：支持label标签增大点击范围的表单控件：文本框，密码框，上传文件，单选框，多选框，下拉菜单，文本域等等 ? ?
? ? ? ? -->
? ? ? ? <form action=''>
? ? ? ? ? ? 用户名：<input type='text'>
? ? ? ? ? ? <br><br>
? ? ? ? ? ? 密码：<inpu1 type='password'>
? ? ? ? ? ? <button type='submit'>提交</button>
? ? ? ? ? ? <button type='resest'>重置</button>
? ? ? ? ? ? <button type='button'>普通按钮</button>
? ? ? ? </form>
? ? ? ? <!-- 按钮标签 button
? ? ? ? <button type=''>按钮</button>
? ? ? ? type属性值说明：
? ? ? ? submit：提交按钮，点击后可以提交数据到后台（默认功能）
? ? ? ? reset：重置按钮，点击后将表单控件恢复默认值
? ? ? ? button：普通按钮，默认没有功能，一般配合JavaScript使用
? ? ? ? 注意：表单标签要放在form表单区域才能使用,action-''是未来发送数据的地址
? ? ? ? -->
? ? ? ? <div>这是div<div>
? ? ? ? ? ? <!-- div是大盒子 ?独占一行-->
? ? ? ? <span>这是span<span>
? ? ? ? ? ? <!-- span是小盒子 可以在同一行 -->
? ? ? ? <!-- 无语义的布局标签
? ? ? ? 作用：布局网页，划分网页区域，摆放内容
? ? ? ? div：独占一行
? ? ? ? span：不换行
? ? ? ? -->
? ? ? ? 我是空 格
? ? ? ? <!-- 字符实体
? ? ? ? 作用：在网页中显示预留字符
? ? ? ? 空格： 在代码中敲键盘空格，网页只识别一个
? ? ? ? 小于号：⁢
? ? ? ? 大于号：>
? ? ? ? -->
</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>
? <h1>注册信息</h1>
? <form action="">
? ? <!-- 表单控件 -->
? ? <!-- 个人信息 -->
? ? <h2>个人信息</h2>
? ? <label>姓名：</label><input type="text" placeholder="请输入真实姓名">
? ? <br><br>
? ? <label>密码：</label><input type="password" placeholder="请输入密码">
? ? <br><br>
? ? <label>确认密码：</label><input type="password" placeholder="请输入确认密码">
? ? <br><br>
? ? <label>性别：</label>
? ? <label><input type="radio" name="gender"> 男</label>
? ? <label><input type="radio" name="gender" checked> 女</label>
? ? <br><br>
? ? <label>居住城市：</label>
? ? <select>
? ? ? <option>北京</option>
? ? ? <option>上海</option>
? ? ? <option>广州</option>
? ? ? <option>深圳</option>
? ? ? <option>武汉</option>
? ? </select>
? ? <!-- 教育经历 -->
? ? <h2>教育经历</h2>
? ? <label>最高学历：</label>
? ? <select>
? ? ? <option>博士</option>
? ? ? <option>硕士</option>
? ? ? <option>本科</option>
? ? ? <option>大专</option>
? ? </select>
? ? <br><br>
? ? <label>学校名称：</label><input type="text">
? ? <br><br>
? ? <label>所学专业：</label><input type="text">
? ? <br><br>
? ? <label>在校时间：</label>
? ? <select>
? ? ? <option>2015</option>
? ? ? <option>2016</option>
? ? ? <option>2017</option>
? ? ? <option>2018</option>
? ? </select>
? ? --
? ? <select>
? ? ? <option>2019</option>
? ? ? <option>2020</option>
? ? ? <option>2021</option>
? ? ? <option>2022</option>
? ? </select>
? ? <!-- 工作经历 -->
? ? <h2>工作经历</h2>
? ? <label>公司名称：</label><input type="text">
? ? <br><br>
? ? <label>工作描述：</label>
? ? <br>
? ? <textarea></textarea>
? ? <br><br>
? ? <!-- 协议 和 按钮 -->
? ? <input type="checkbox"><label>已阅读并同意以下协议：</label>
? ? <ul>
? ? ? <li><a href="#">《用户服务协议》</a></li>
? ? ? <li><a href="#">《隐私政策》</a></li>
? ? </ul>
? ? <br><br>
? ? <button>免费注册</button>
? ? <button type="reset">重新填写</button>
? </form>
</body>
</html>
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！