创建 Html 文件
- Html 文件以
.html后缀结尾 - 电脑文件夹中创建 html 文件时注意文档类型是否为 html
- 关于文件命名
- 可以以中文命名，但是不允许使用中文。
- 不允许使用特殊字符。
- HTML 文件名推荐使用小写。
- 创建完 HTML 文件后依然是文本文件格式，那么需要将系统中隐藏已知文件类型扩展名勾选掉
Html 文件标签
- html 标签分双标签（成对出现）：
<p>内容</p>和单标签（不成对出现）：<hr />。 - 有且只有这两种类型。
- html 标签不区分大小写，
推荐使用小写。
Html 标签属性
颜色值的设置
- 浏览器都支持颜色名称集合，颜色值是一个关键字或者是一个 RGB 格式的数字，在网页中都用的很多,
RGB(255,255,255)。 - 使用英文单词作为颜色值：
red 红色 | green 绿色 | blue 蓝色 | pink 粉色 | purple 紫色等,。 - 六位的十六进制颜色值：
#ff0000 简写：#f00 前两位表示红色，中间两位表示绿色，最后两位表示蓝色,。
Html 注释
- 注释的内容不会被浏览器解析出来。
- 格式:
<!-- 注释内容 -->
Html 代码格式
- 任何回车或者空格在源代码中都不起作用，可以使用回车或者空格进行代码排版，要求保持严格的缩进规则，缩进以 tab 键为准。
Html 实体字符
| 序号 |
字符 |
含义 |
| 1 |
|
空格 |
| 2 |
> |
< |
| 3 |
< |
> |
| 4 |
© |
版权符号 © |
Html 结构
<!--声明头--><!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>
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倍，最小压缩至设备宽度的一半--> <meta name="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>
a 链接
| 属性 |
描述 |
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%B3 https:// 协议 www.so.com 域名 名字 192.168.100.123 :80 端口 门牌号 apache 服务器软件 s 文件简写 ? 就是访问该页面所需要的参数 ie utf-8 & 表示继续参数礼品(参数) fr = none http://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 --><img src="../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 | 按钮 | |
Html 全局属性
contentEditable 内容可编辑属性; designMode 页面可编辑属性
Html 框架标签
<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"> 用户名： <input type="text" autofocus name="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>
