HTML-知识点总结

HTML各知识点总结：

基本标签 标题标签             、段落标签  
 
  
 
  
 
  
 
  
 
  
 
  
、换行标签












、水平线标签
  
  
  
  
  
  
 、字体样式标签  
  
  
  
  
  
 、注释和特殊符号 网页插入 图像
 


 


 


 


 


 


 
、超链接             ，视频
 
 
 
 
 
 
、音频   
   
   
   
   
   
  、列表
 

 

 

 

 

 

 
、表格

 

 

 

 

 

 
、表单              、内联框架等 超链接 锚链接
 
 

 
 

 
 

 
 

 
 

 
 

 
、功能性链接 列表 有序列表












、无序列表                    、自定义列表 表格 行 
 
 
 
 
 
 
 
 
 
 
 
 
、列



















、跨行             、跨列 表单 提交格式  
 
  
 
  
 
  
 
  
 
  
 
  
、文本框












、密码框
  
  
  
  
  
  
 、单选框  
  
  
  
  
  
 、多选框
 


 


 


 


 


 


 
、下拉框 滑块等 表单设置功能 隐藏区域
 
 
 
 
 
 
、只读模式   
   
   
   
   
   
  、禁用模式 格式验证 用户提示（placehoder)
 

 

 

 

 

 

 
、必填选项（required)

 

 

 

 

 

 
、正则表达式（pattern)

注：图片或者音              、视频的路径：

1
 
 

 
 

 
 

 
 

 
 

 
 

 
、相对路径：相对于代码所在的路径  
 
  
 
  
 
  
 
  
 
  
 
  
，返回上级目录用“../
  
  
  
  
  
  
 ”

2












、绝对路径：不考虑所写代码的路径












，直接复制图片或者音                    、视频的在盘符里的路径

一 
 
 
 
 
 
 
 
 
 
 
 
 
、基本标签：

注：标签中的各个属性是用 空格 隔开！ 1



















、标题标签：

给网页中的正文设置标题
  
  
  
  
  
  
 ，同时可选择标签大小
  
  
  
  
  
  
 。

用法说明：

一级标题h1,二级标题则h2  
  
  
  
  
  
 ，后者同理 
  
  
  
  
  
  。

例如：一级标签： 格式： <h1>标题名字</h1> 2             、段落标签：

给网页中的内容分段
 


 


 


 


 


 


 
，但是不具有空格和换行功能 


 


 


 


 


 


 

。

用法说明：

段落标签用字符p表示

例如： 格式： <p>段落内容</p> 3  
 
  
 
  
 
  
 
  
 
  
 
  
、换行标签：

给网页中内容进行换行
 
 
 
 
 
 
，不具有分段和空格功能   
   
   
   
   
   
  ，且与段落标签相比
 

 

 

 

 

 

 
，内容较显的紧凑
 
 
 
 
 
 
。

用法说明：

换行标签用br表示

 

 

 

 

 

 
，并且是单标签

格式： 选择换行内容<br/>(自闭合












、建议使用) 或者 选择换行内容<br> 4
  
  
  
  
  
  
 、水平线标签：

给网页中内容进行水平线分隔开  
   
   
   
   
   
   。

用法说明：

水平线标签用Hr表示              ，也是单标签

格式： 选择换行内容<hr/>(自闭合  
  
  
  
  
  
 、建议使用) 或者 选择换行内容<hr> 5
 


 


 


 


 


 


 
、字体样式标签：

设置字体样式
 
 

 
 

 
 

 
 

 
 

 
 

 
，如粗体
 
 
 
 
 
 
、斜体 

 

 

 

 

 

 
。

用法说明：

粗体：strong

斜体：em 格式： <strong> 内容 </strong> <em> 内容 </em> 6   
   
   
   
   
   
  、注释和特殊符号：

网页中所表示实际上的中
 

 

 

 

 

 

 
、英或者数字等注释和符号

 

 

 

 

 

 

。

格式： 空格：内容1 &nbsp; 内容2 大于号：内容1 &gt; 内容2 小于号：内容1 &lt; 内容2 版权符号：&copy; 内容

二

 

 

 

 

 

 
、网页插入：

1              、图像：

在网页中插入图片             。

格式 <img src="https://www.cnblogs.com/lw14589/p/path" alt="text" title="text" width="x" height="y" /> 其中 src: 图像地址 alt: 图像的替代文字（当图片不存在或者找不到时












，就会用alt中内容来表示这个图片） title: 悬停在图片上的文字 width和height:设置图片大小 2
 
 

 
 

 
 

 
 

 
 

 
 

 
、超链接

在网页中加入超链接                    ，可以实现跳转功能 
 

 
 

 
 

 
 

 
 

 
 

 
 。

锚链接：

1












、需要一个锚标记

锚标记可以在本页面标记 
 
 
 
 
 
 
 
 
 
 
 
 
，在其他页面实现跳转； 也可以在其他页面标记



















，在本页面跳到标记的那个页面













。

2                    、知道要跳转的页面的网页链接 格式： 锚标记： <a name="内容"></a> 有的版本用的是这个： <a id="内容"> </a> 锚链接： <a href="#内容（与锚标记中的内容是相同的）">回到锚标记对应的内容中</a> 功能性链接：

如邮件链接：mailto

格式： 邮件链接： <a href="mailto:此处输入要跳转的电子邮箱"> 点击跳转 </a> 3 
 
 
 
 
 
 
 
 
 
 
 
 
、列表：

用来列举各种可能的事件或者种类等等                   。

有序列表：ol 无序列表：ul 自定义列表：dl `<!--有序列表--> <ol> <li> 内容 </li> </ol> <!--无序列表--> <ul> <li> 内容 </li> </ul> <!--自定义列表--> <dl> <!--自定义列表--> <dt> <!-- 列表名称--> <dd> 内容 </dd> </dt> </dl>` 4



















、表格：

用表格来显示各个事物的各种属性             ，简单明了 
 
 
 
 
 
 
 
 
 
 
 
 
 。

使用：

表格：table

行：tr

列：td

跨行：rowspan

跨列：colspan `<table> <!--表格--> <tr> 内容 <!--行--> <td> 内容 <!--列--> </td> </tr> </table>`

多行多列则在表格里多写几个tr             、td



















。具体事例如下代码：

点击查看代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格学习</title> </head> <body> <!--表格标签 tr:行标签 td:列标签 --> <table> <tr> <!-- colspan 跨列--> <td colspan="4">1-1</td> </tr> <!--rowspan 垮行--> <tr> <td rowspan="2">2-1 </td> <td>2-2 </td> <td>2-3 </td> </tr> <tr> <td>3-1 </td> <td>3-2 </td> <td>3-3 </td> <td>3-4 </td> </tr> <!-- 小练习--> <tr> <td colspan="3">学生成绩</td> </tr> <tr> <td rowspan="2">哈哈</td> <td> 语文</td> <td> 100</td> </tr> <tr> <td> 数学</td> <td> 100</td> </tr> <tr> <td rowspan="2">嘻嘻</td> <td> 语文</td> <td> 100</td> </tr> <tr> <td> 数学</td> <td> 100</td> </tr> </table> <table> <!--表格--> <tr> <!--行--> <td> <!--列--> </td> </tr> </table> </body> </html> 三  
 
  
 
  
 
  
 
  
 
  
 
  
、表单： 1












、提交表单的形式：常用get/post （get方式提交  
 
  
 
  
 
  
 
  
 
  
 
  
，可以在url中看到用户提交的信息












，不安全
  
  
  
  
  
  
 ，但是这种方式高效；post相对较安全  
  
  
  
  
  
 ，但是要想信息不被泄露仍需后期加密） 格式： <form method="get/post" action="发送地址"> 表单内容</form> 2
  
  
  
  
  
  
 、输入框：

输入框：input

比如输入框  
  
  
  
  
  
 、密码框等等都用input标签 
 


 


 


 


 


 


 
，标签中的“type 
  
  
  
  
  
  ”的值决定了是输入框还是其他标签元素等等             。并且尽量用“name 


 


 


 


 


 


 

”命名元素

type:

text(文本框)
 
 
 
 
 
 
，password（密码框）   
   
   
   
   
   
  ，checkbox（多选框）
 

 

 

 

 

 

 
，radio（单选框）

 

 

 

 

 

 
，submit（提交）              ，reset （重置）
 
 

 
 

 
 

 
 

 
 

 
 

 
，file（上传文件）












，hidden（隐藏区域）                    ，image（图片 
 
 
 
 
 
 
 
 
 
 
 
 
，点击该图片也可以提交表单）



















，button（按钮）等

value:

表单组件的初始值 
 
  
 
  
 
  
 
  
 
  
 
  
 。当type为radio或者checkbox时             ，必须指定一个值












。

size:

指定表单组件的初始宽度
  
  
  
  
  
  
 。当type为text或password时  
 
  
 
  
 
  
 
  
 
  
 
  
，表单元素的大小以字符为单位 
  
  
  
  
  
  。而其他组件类型












，宽度以像素为单位 


 


 


 


 


 


 

。

maxlength：

type为text或password时
  
  
  
  
  
  
 ，输入的最大字符数

checked：

type为radio或者checkbox时  
  
  
  
  
  
 ，表示指定按钮已被选中
 


 


 


 


 


 


 
，不可更改
 
 
 
 
 
 
。

注：同一类型的单选框
 
 
 
 
 
 
，name名称必须一样   
   
   
   
   
   
  ，不一样则不为单选  
   
   
   
   
   
   。 格式： 文本框：<input type="text" name="名字" > 密码框：input type="password" name="名字" > 多选框：<input type="checkbox" name="名字"> 单选框：<input type="radio" name="名字"> 提交：<input type="submit" name="名字"> 重置<input type="reset" name="名字"> 上传文件：<input type="file" name="名字"> 隐藏区域：<input type="hidden" name="名字"> 图片：<input type="image" name="名字"> 按钮：<input type="button" name="名字"> 3
 


 


 


 


 


 


 
、下拉框：

下拉框：select

格式 <select name="下拉框的名称"> <option value="选项的值1"> </option> （可在option标签中加入selected表示已被选择的选项） <option value="选项的值2"> </option> </select> 4
 
 
 
 
 
 
、搜索框：

在网页中添加搜索
 

 

 

 

 

 

 
，可快速找到网页中某个内容 

 

 

 

 

 

 
。

格式： <input type="search" name="名字"> 5   
   
   
   
   
   
  、滑块：

类似音量调节的滑块

 

 

 

 

 

 
，可用来调节大小

 

 

 

 

 

 

。

格式： <input type="range" max="滑块所能滑的最大值" min="滑块所能滑的最小值"> （滑块对应的值要在表单提交后的网页的网址上看到） 6
 

 

 

 

 

 

 
、文件域：

上传文件：file

格式： <input type="file" name="名字"> 7

 

 

 

 

 

 
、文本域：

多行文本：textarea

格式： <textarea name="名字" rows="行" cols="列"> 文本内容 </textarea> 表单的提交和重置：

提交：submit

重置：reset 格式 提交：<input type="submit" name="sub" src="https://www.cnblogs.com/lw14589/p/%E6%8F%90%E4%BA%A4%E5%9C%B0%E5%9D%80"> 或者以图片形式提交：<input type="image" src="https://www.cnblogs.com/lw14589/p/%E5%9B%BE%E7%89%87%E5%9C%B0%E5%9D%80" alt="图片提交"> 重置：<input type="reset" name="res" > 四              、表单初级验证：

判断用户输入是否合理或者满足条件              ，验证失败时
 
 

 
 

 
 

 
 

 
 

 
 

 
，给出提示信息             。

1
 
 

 
 

 
 

 
 

 
 

 
 

 
、邮箱验证： 格式： <input type="email" name="email"> 2












、URL验证： 格式： <input type="url" name="url"> 3                    、数字验证： 格式： <input type="number" name="num"> (可在此标签中加入max,min,step来设置数字范围以及步长大小) 4 
 
 
 
 
 
 
 
 
 
 
 
 
、表单验证之提示：

默认提示信息：placeholder（即在文本框中默认显示的信息）可用在所有输入框中












，在单选



















、多选             、下拉框中无意义 
 

 
 

 
 

 
 

 
 

 
 

 
 。

必填选项：required （设置该项必填）

正则表达式：pattern （需要的可以在网上搜索） 五  
 
  
 
  
 
  
 
  
 
  
 
  
、表单其他功能：

隐藏某区域：hidden

设置只读模式：readonly

禁用模式：disabled

注：可在标签属性后添加这几个功能













。如隐藏一个文本框： 格式： <input type="text" name="text" hidden>(表示该文本框已经隐藏）

鼠标定位：实现点击文字就能将鼠标定位到对应的框中                   。

格式： <label for="锁定鼠标的id"> 内容如（用户名）</label> <input type="text" id="给这个文本框设置一个id名">

表单相关代码：

`

表单

<p><!--文本框--> 用户名： <input type="text" name="用户名" > </p> <p><!--密码框--> 密码： <input type="password" name="密码"> </p> <p><!--单选框--> 男： <input type="radio" name="sex"> 女： <input type="radio" name="sex"> </p> <p><!--多选框--> 中国： <input type="checkbox" name="China"> 美国： <input type="checkbox" name="America"> 韩国： <input type="checkbox" name="South Korea"> 印度： <input type="checkbox" name="India"> </p> <p><!--下拉框--> <select name="国家"> <option value="中国" name="China">中国</option> <option value="美国" name="America" selected>美国</option> <!--加selected表示默认显示美国                    ，不加 
 
 
 
 
 
 
 
 
 
 
 
 
，则默认显示中国--> <option value="韩国" name="South Korea">韩国</option> <option value="印度" name="India">印度</option> </select> </p> <P><!--搜素框--> 搜素框： <input type="search" name="search"> </P> <p><!--滑块--> 滑块： <input type="range" name="range" max="20" min="1"> </p> <p><!--文件域--> 文件域： <input type="file" name="file"> </p> <p><!--文本域--> <textarea name="textarea"> </textarea> </p> <!--表单初级验证--> <p> <!--1












、邮箱验证--> 邮箱验证： <input type="email" name="email"> </p> <p> <!--2
  
  
  
  
  
  
 、UPL验证--> URL验证： <input type="url" name="url"> </p> <p> <!--3  
  
  
  
  
  
 、数字验证--> 数字验证： <input type="number" name="num"> </p> <p><!--隐藏：hidden--> 此处文本框被隐藏： <input type="text" name="隐藏" hidden> </p> <p><!--只读模式：placeholder--> 只读模式： <input type="text" name="只读" value="12345" readonly><!--这里的value是给文本框初始显示的信息--> </p> <p><!--禁用模式：disabled--> 禁用模式： <input type="text" name="禁用" disabled> </p> <p><!--提示用户信息：placeholder--> 提示用户信息： <input type="text" name="提示" placeholder="请输入用户名"> </p> <p><!--必填：required--> 此处必填： <input type="text" name="必填" required> </p> <p><!--鼠标定位--> 鼠标定位： <label for="make"> 内容如（用户名）</label> <input type="text" id="make"> </p> <p><!--提交--> 提交： <input type="submit" name="sub" src="" alt="图片提交"> </p> <p><!--重置--> 重置： <input type="reset" name="res" > </p>

`