收藏
PHPz批改状态：合格
老师批语：
.html后缀结尾<p>内容</p>和单标签（不成对出现）：<hr />。推荐使用小写。RGB(255,255,255)。red 红色 | green 绿色 | blue 蓝色 | pink 粉色 | purple 紫色等,。#ff0000 简写：#f00 前两位表示红色，中间两位表示绿色，最后两位表示蓝色,。<!-- 注释内容 -->| 序号 | 字符 | 含义 |
|---|---|---|
| 1 | 空格 | |
| 2 | > | < |
| 3 | < | > |
| 4 | © | 版权符号 © |
<!--声明头--><!DOCTYPE html><html><!--头标签--><head><!-- <title></title>设置页面字符串 --><title></title><!-- meta 设置页面字符集 --><meta charset="utf-8" /><!-- <link /> 定义两个文档之间连接的关系 --><link /></head><!--体标签--><body><!--段落标签--><p></p><!--加粗--><b></b><!--强调某段文本--><strong></strong><!--强调某段文本--><em></em><!--斜体--><i></i></body></html>
<head>中常用的标签| 序号 | 标签 | 解释 |
|---|---|---|
| 1 | <title></title> |
设置页面字符串 |
| 2 | <meta charset="utf-8" /> |
设置页面字符集 |
| 3 | <meta http-equiv="content-type" content="text/html;charset=utf-8" /> |
html4 设置页面字符集,http-equiv 告知浏览器的行为;name 告知浏览器的内容 |
| 4 | <link /> |
定义两个文档之间连接的关系 ,rel = “表示文档与被连接文档之间的关系” type = “被连接文档的类型” href = “被连接文档的地址” |
| 5 | <style></style> |
加载 CSS 样式 |
| 6 | <script></script> |
加载 JS 脚本 |
| 7 | <meta name="viewport" content="initial-scale=2.0,width=device-width" /> |
阻止移动浏览器自动调整页面大小,name = “viewport” 说明此 meta 标签定义视口的属性;initial-scale = 2.0 意思是将页面放大两倍;width = device-width 告诉浏览器页面的宽度的能与设备的宽度 |
<head lang="en"><!--lang是language的意思,lang="en" 属性对页面声明主要语言，en表示英文，zh-cn表示中文。搜索引擎不会判断该站点是中文还是英文，它让搜索引擎知道你得站点是中文站，这些都是HTML规范，越规范，越容易被收录--><!-- 设置页面字符串 --><title></title><!-- 设置页面字符集 --><meta charset="utf-8" /><!-- 设置页面字符集 --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!--http-equiv 告知浏览器的行为--><!-- 设置5秒后自动跳转到学习猿地 --><meta http-equiv="refresh" content="5;url=https://www.lmonkey.com" /><!-- 设置浏览器5秒刷新一次 --><meta http-equiv="refresh" content="5" /><!--name 告知浏览器的内容--><!-- 设置网站关键字，多个关键字之间用英文状态下的逗号分割 --><meta name="keywords" content="关键字1,关键字2" /><!-- 设置网站的描述 --><meta name="description" content="描述的内容" /><!-- 定义两个文档之间连接的关系 --><!--rel = "表示文档与被连接文档之间的关系"type = "被连接文档的类型"href = "被连接文档的地址"--><link /><!-- 加载标题icon图标 --><link rel="icon" type="" href="" /><!--了解级别--><!-- 加载CSS样式 --><link rel="stylesheet" type="text/css" href="" /><!-- 书写CSS样式 --><style></style><!-- 书写JS脚本 --><script></script><!--阻止移动浏览器自动调整页面大小--><!--name = "viewport" 说明此meta标签定义视口的属性initial-scale = 2.0 意思是将页面放大两倍width = device-width 告诉浏览器页面的宽度的能与设备的宽度--><meta name="viewport" content="initial-scale=2.0,width=device-width" /><!--允许用户将页面最大放大至设备宽度3倍，最小压缩至设备宽度的一半--><metaname="viewport"content="width=device-width,maximun-scale=3,minimum-scale=0.5"/><!--禁止用户缩放，可以在混合APP时，为了使html页面更逼真，使页面无法缩放。user-scalable=no是禁止缩放--><meta name="viewport" content="initial-scale=1.0,user-scalable=no" /></head>
<body>中常用的标签| 序号 | 标签 | 解释 |
|---|---|---|
| 1 | <p></p> |
段落标签 |
| 2 | <b></b> |
加粗 |
| 3 | <strong></strong> |
强调某段文本 |
| 4 | <em></em> |
强调某段文本 |
| 5 | <i></i> |
斜体 |
| 6 | <br/> |
换行 |
| 7 | <hr /> |
水平线 |
| 8 | <u></u> |
下划线标签 |
| 9 | <del></del> |
删除线标签 |
| 10 | <hn></hn> |
h 族标题标签 |
| 11 | <bdo></bdo> |
覆盖默认的文本方向 |
| 12 | <sub></sub> |
下标文本 |
| 13 | <sup></sup> |
上标文本 |
| 14 | <details></details> |
交互式控件、可见的或者隐藏的补充细节 |
| 15 | <summary></summary> |
为 details 定义标题 |
| 16 | <dialog></dialog> |
定义对话框或窗口 |
| 17 | <pre></pre> |
原格式输出 |
| 18 | <figure></figure> |
用于对元素进行组合。多用于图片与图片描述组合 |
| 19 | <mark></mark> |
标记文本 |
<body><!-- <p></p> 段落标签，段落上下都会空一行 --><p><!-- <b></b>, <strong></strong>都显示加粗 --><!-- <i></i> <em></em> 都显示斜体 --><b>28日，</b>国家卫健委疾控局副局长吴良有表示，<strong>上海疫情整体呈现明显下降趋势</strong>，社会面疫情风险逐步降低，但防控形势依然严峻，<mark><i>防反弹防外溢任务</i><em>十分艰巨</em></mark>。</p><!-- <hr>分割线 --><hr />近期全国疫情主要有以下几个特点:继续呈现点多面广态势,4月全国共有31个省份261个地市报告本土疫情;规模化与散发聚集性疫情并存;继续呈现多点多源多链的复杂局面。上海疫情...<hr /><!-- h1-h6 标题标签，1-6字体逐渐缩小，H7与默认一样 --><h1>th045386->help大叔</h1><h2>th045386->help大叔</h2><h3>th045386->help大叔</h3><h4>th045386->help大叔</h4><h5>th045386->help大叔</h5><h6>th045386->help大叔</h6><h7>th045386->help大叔</h7><hr /><!-- <bdo dir=""></bdo> 默认覆盖文本方向 --><bdo dir="">默认覆盖文本方向</bdo><bdo dir="rtl">默认覆盖文本方向</bdo><hr /><!-- <sub></sub> 下标文本<sup></sup> 上标文本 --><p>H<sub>2</sub>0<sub>2</sub></p><p>3<sup>2</sup>=9</p><hr /><!-- <details></details> 交互式控件、可见的或者隐藏的补充细节，配合<summary></summary>设置标题 --><details><summary>最新上映电影</summary>名称：灭绝重启版<br />票价：￥45.00<br />描述: 灭绝的一生</details><hr /><!-- <pre></pre> 原样输出文本 --><pre>1+ 1========2</pre><hr /><!-- <figure></figure> 分组组合其他标签 --><figure><img src="./img/s.png" alt="figure标签" title="figure标签" /><figcaption>figure的标题</figcaption></figure><br /><p>你是<mark>大长腿</mark>吗？</p></body>
<!-- <div></div> 区块元素，独占一行 --><div></div><!-- <span></span>行内元素 --><span></span><!-- <header></header> 头部 --><header></header><!-- <footer></footer>脚步 --><footer></footer><!-- <nav></nav> 导航 --><nav></nav><!-- <address></address>地址 --><address></address><section></section><!-- <article></article>文章 --><article></article><!-- <aside></aside>侧边栏 --><aside></aside>
<!-- <ul></ul>声明为有序列表，li，列表元素 --><ul></ul><!-- <ol></ol>声明为有序列表，li，列表元素 --><ol></ol><li></li><dl></dl><dt></dt><dd></dd>
| 属性 | 描述 |
|---|---|
href="url地址" |
跳转的目标地址 |
href="mailto: 1815810057@qq.com" |
发邮件 |
href="tel:183****9413" |
打电话 |
href="demo3.zip" |
下载 浏览器不能解析的文档 |
href="#a + 设置锚点的id" |
锚点 |
target="__self" |
当前窗口打开 |
target="_blank" |
新窗口打开 |
<!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>body常用的标签-a链接</title></head><body><!--相对路径而言：相对于自己的位置来查找../ 代表上一级目录./ 当前目录绝对路径：从根开始查找网络地址：https://www.so.com:80/s?ie=utf-8&fr=none&src=360sou_newhome&nlpv=basezc&q=%E7%BE%8E%E5%A5%B3https:// 协议www.so.com 域名 名字 192.168.100.123:80 端口 门牌号 apache 服务器软件s 文件简写? 就是访问该页面所需要的参数ie utf-8& 表示继续参数礼品(参数)fr = nonehttp://localhost:63342/lesson01/first.html--><!--1、链接到网址--><!--/*taget属性：--><!--* _self: 当前窗口打开--><!--* _blank: 新窗口打开--><!--*--><!--*/--><a href="[www.help10086.net](http://help10086.net/login)" target="_blank">help的网页</a><!--2、下载html不能解析的文件--><!--/*--><!--* download属性：指定下载文件名--><!--*/--><a href="DASHU.rar" download="下载大叔文件">下载文件</a><!--3、发邮件--><a href="mailto:1815810057@qq.com">发邮件</a><!--4、打电话--><a href="tel:1831445****">打电话</a><!--5、锚点--><a href="#anchor">锚点</a><h3 id="anchor" style="margin-top: 1000px;">锚点</h3></body></html>
| 序号 | 属性 | shuomih |
|---|---|---|
| 1 | src | 设置图片路径 |
| 2 | width | 设置图片宽度 width、height 一般设置一个，另外一个会等比例缩放 |
| 3 | height | 设置图片高度 |
| 4 | title | 设置图片标题 |
| 5 | alt | 图片不生效时，显示文本 |
<!-- img比较常用，其他可参考w3c --><imgsrc="../lesson01/img/a.jpeg"width="200"alt="我是HTML5"title="我是标题"/><!-- <map></map><area /><audio></audio><source /><video></video><embed /><progress></progress><meter></meter>-->
<!-- <table></table>声明表格 --><table></table><!-- <caption></caption>设置文字，可以上表格标题 --><caption></caption><!-- <tr></tr> 表格行 --><tr></tr><!-- <th></th>表头列 --><th></th><!-- <td></td>表体列 --><td></td><!-- <thead></thead>表头 --><thead></thead><!-- <tbody></tbody>表格主体 --><tbody></tbody><!-- <tfoot></tfoot>表尾 --><tfoot></tfoot><table border="1" width="480px" cellspacing="0" style="text-align:center;"><thead style="background-color: #f50303;height: 40px;font-size: 18px;"><!-- <th> --><td>时间</td><td>周一</td><td>周二</td><td>周三</td><td>周四</td><td>周五</td><td>周六</td><!-- </th> --></thead><tbody><tr><td rowspan="4" style="background-color: #b2dcf8;">上午</td><td>vs code编辑器</td><td>css</td><td>php</td><td>js</td><td>laravel</td><td>layui</td></tr><tr><!-- <td>上午</td> --><td>vs code插件</td><td>css</td><td>php</td><td>js</td><td>laravel</td><td>layui</td></tr><tr><!-- <td>上午</td> --><td>html入门</td><td>css</td><td>php</td><td>js</td><td>laravel</td><td>layui</td></tr><tr><!-- <td>上午</td> --><td>html元素</td><td>css</td><td>php</td><td>js</td><td>laravel</td><td>layui</td></tr><tr><td colspan="7" style="text-align:center;background-color:#fafab3">中午休息</td></tr><tr><td rowspan="3" style="background-color: #b2dcf8;">下午</td><td>html标签</td><td>css</td><td>php</td><td>js</td><td>laravel</td><td>layui</td></tr><tr><!-- <td>下午</td> --><td>table</td><td>css</td><td>php</td><td>js</td><td>laravel</td><td>layui</td></tr><tr><!-- <td>下午</td> --><td>form表单</td><td>css</td><td>php</td><td>js</td><td>laravel</td><td>layui</td></tr><tr><td>备注</td><td colspan="7">放学要完成作业才能睡觉</td><!-- <td>周二</td><td>周三</td><td>周四</td><td>周五</td><td>周六</td> --></tr></tbody></table>
| 属性 | 描述 | 说明 |
|---|---|---|
| width | 表格宽度 | |
| height | 表格高度 | |
| align | 表格在页面的水平摆放位置 | 取值：left/center/right |
| background | 表格的背景图片 | |
| bgcolor | 表格的背景颜色 | |
| border | 表格边框的宽度（以像素为单位） | 表格默认没有边框 |
| bordercolor | 表格边框颜色 | 当 border >= 1 时起作用 |
| cellspacing | 单元格之间的间距 | |
| Cellpadding | 单元格内容与单元格边界之间的空白距离大小 |
| 属性 | 描述 |
|---|---|
| height | 行高 |
| align | 行内容的水平对齐方式 |
| valign | 行内容的垂直对齐方式 |
| Bgcolor | 行的背景颜色 |
| 属性 | 描述 |
|---|---|
| width/height | 单元格的宽度和高度 |
| align | 设置水平对齐方式，取值 left/center/right |
| valign | 设置垂直对齐方式，可取值 top/middle/bottom |
| bgcolor | 单元格的背景颜色 |
| colspan | 设置单元格跨列 |
| rowspan | 设置单元格跨行 |
| 标签 | 含义 | 说明 |
|---|---|---|
<form></form> |
为用户输入创建 HTML 表单 | |
<input /> |
输入框 | type 属性有多个值，对应不同输入框 |
<label></label> |
为 input 元素定义标注(绑定元素) | label for 属性值=input 的 id |
<button></button> |
按钮 | |
<textarea></textarea> |
多行文本输入域 | |
<select></select> |
下拉列表 | |
<option></option> |
为下拉列表定义列表项 | |
<fieldset></fieldset> |
将表单内的相关元素分组 | |
<legend></legend> |
为 fieldset 定义标题 | |
<optgroup></optgroup> |
为下拉列表定义分组 | |
<datalist></datalist> |
定义可选数据列表 |
表单元素属性
| 序号 | 元素 | 属性 |
| —— | —————— | ——————————————— |
| 1 | <form> | action、method |
| 2 | <input> | for |
| 3 | <label> | type、name、value、placeholder |
| 4 | <select> | name |
| 5 | <datalist> | id 与 input list=""关联 |
| 6 | <option> | value、label、selected |
| 7 | <textarea> | cols、rows、name |
| 8 | <button> | type、name |
表单元素属性含义
| 序号 | 属性 | 含义 |
| —— | ——————- | ————————————————————————————————— |
| 1 | name | 元素/控件名称，用做服务器脚本的变量名称 |
| 2 | value | 提交到服务器端的数据 |
| 3 | placeholder | 输入框的提示信息 |
| 4 | form | 所属的表单，与<form name = ""> 对应 |
| 5 | autofocus | 页面加载时自动获取焦点 |
| 6 | required | 必填，必须项 |
| 7 | readonly | 改控件内容只读 |
| 8 | disabled | 是否禁用 |
| 9 | selected | 为下拉列表定义默认选中 |
| 9 | checked | 为单选、多选定义默认选中 |
| 10 | min | 用于设定表单的最小值 |
| 11 | max | 用于设定表单的最大值 |
| 12 | multiple | 设定当前表单允许同时选中多个文件，适用于 input[type=file] |
| 13 | pattern | 用于自定义验证规则(需要配合正则的语法) |
| 14 | step | 取消表单验证，适用于 form 标签 |
| 15 | formaction | 用于在提交按钮中修改当前表单的提交页面 |
| 16 | formmethod | 用于在提交按钮中修改当前表单的提交方式 |
| 17 | formenctype | 用于在提交按钮中修改当前表单提交数据编码类型(不用，文件上传时适用) |
| 18 | tabindex | 切换索引属性 tab 键 |
input 元素 type 属性值
| 序号 | 属性 | 名称 | 描述 |
| —— | ————— | ————— | —————————————————————————————————————— |
| 1 | text | 文本框 | 默认值 |
| 2 | password | 密码框 | 输入内容显示为* |
| 3 | radio | 单选按钮 | 多个选项中仅允许提交一个选项，应设置默认值,name 值一样,通过 value 值区分选择 |
| 4 | checkbox | 复选框 | 允许提交一个或多个选项，应设置默认值，name 值设置为数组形式hobby[] |
| 5 | hidden | 隐藏域 | 页面不显示但数据仍会提交 |
| 6 | file | 文件上传 | 本地文件上传，有 accept、multiple 属性,form 提交方式必须为post |
| 7 | submit | 提交按钮 | 点击会提交按钮所有的表单 |
| 8 | reset | 重置按钮 | 重置输入控件中的内容为默认 |
| 9 | button | 自定义按钮 | 一般使用 js 脚本定义点击后的行为 |
| 10 | email | 邮箱 | 输入肉容必须是邮箱格式 |
| 11 | number | 整数 | 输入肉容必须是整数格式 |
| 12 | url | URL 地址 | 输入肉容必须是有效的 URL 格式 |
| 13 | seaech | 搜索框 | 通常与 autocomplete 配合 |
| 14 | date | 日期控件 | 不同浏览器可能会有不同 |
| 15 | color | 调色板 | 可直接选择颜色 |
| 16 | tel | 电话号码 | 手机端会弹出数字键盘 |
button 元素 type 属性值
| 序号 | 属性 | 名称 | 描述 |
| —— | ——— | ———— | ——— |
| 1 | submit | 提交按钮 | 默认值 |
| 2 | button | 按钮 | |
contentEditable 内容可编辑属性; designMode 页面可编辑属性
<frameset></frameset>代替body标签定义框架页(H5取消)<frame />定义frameset标签中每个框架页的内容<iframe></iframe>在页面中开一块空间连接一个子页面
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title>form表单</title></head><body><!-- 表单中有<input type="file"/>则提交方式必须为post,必须设置enctype="multipart/form-data"属性 --><!-- <form action="" method="post" enctype="multipart/form-data"> --><form action="" method="get">用户名：<inputtype="text"autofocusname="uaername"value=""tabindex="2"placeholder="请您输入用户名"/><br />密码：<input type="password" required name="pwd" tabindex="1" /><br /><!-- name属性值一样 --><!-- label for属性值与input id值一样 --><!-- checked，设置默认选中项 -->单选:<input type="radio" name="sex" value="0" id="nv" /><label for="nv">女</label><label> <input type="radio" name="sex" value="1" checked />男 </label><input type="radio" name="sex" value="2" />保密<br /><!-- checked，设置默认选中项 --><!-- 复选框，name值要写成类似数组形式，hobby[] -->复选： 爱好：<input type="checkbox" name="hobby[]" value="0" />吃<input type="checkbox" name="hobby[]" value="1" id="he" /><label for="he">喝</label><input type="checkbox" name="hobby[]" value="2" checked />玩<input type="checkbox" name="hobby[]" value="3" checked />乐<br />文件上传<input type="file" name="pic" id="" /><br /><input type="submit" value="登录" /><hr /><!-- 用图片代替提交按钮 --><input type="image" src="./img/a.jpeg" width="50" title="" alt="" /><input type="reset" name="" value="重置按钮" /><input type="hidden" name="" value="隐藏域" /><input type="button" name="" value="按钮" /><button>提交按钮</button><button type="submit">提交按钮</button><button type="button">按钮</button><hr /><textarea name="address" id="" cols="50" rows="5"></textarea><hr /><select name="" id=""><option value="">初中</option><option value="">高中</option><option value="" selected>本科</option><option value="">专科</option></select><hr /><input type="email" name="" value="" /><input type="url" name="" value="" /><input type="number" name="" value="" /><input type="range" name="" value="" /><input type="search" name="" value="" /><input type="color" name="" value="" /><!-- disabled 禁用 --><input type="tel" name="" value="110" disabled /><input type="date" name="" value="" /><input type="time" name="" value="" /><input type="week" name="" value="" /><input type="month" name="" value="" /><input type="datetime-local" name="" value="" /></form></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
