HTML-知识点总结

博客 分享
0 153
优雅殿下
优雅殿下 2022-06-19 19:00:45
悬赏：0 积分 收藏

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="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="提交地址">   或者以图片形式提交：<input type="image" src="图片地址" 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="列表学习.html" >    图片提交：    <input type="image" src="../resources/image/1.png" alt="图片提交"></p><p><!--重置-->    重置：    <input type="reset" name="res" ></p>
`
posted @ 2022-06-19 18:35 i_归零 阅读(0) 评论(0) 编辑 收藏 举报
上一篇：合宙AIR105(四):SPI,MAX72198x8LED驱动
下一篇：一句话的需求怎么测？需求文档的三种现状及应对策略
回帖
    优雅殿下

    优雅殿下 （王者 段位）

    2018 积分 (2)粉丝 (47)源码

    小小码农，大大世界

     

    温馨提示

    亦奇源码

    最新会员