ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

HTML-知识点总结

2022-06-19 19:06:03  阅读:117  来源: 互联网

标签:总结 知识点 网页 标签 表单 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>
`

标签:总结,知识点,网页,标签,表单,HTML,内容,提交,格式
来源: https://www.cnblogs.com/lw14589/p/16389254.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有