码字不易 感谢关注__

 哈喽各位，本期给大家做一期html的入门教程！

---

那么先让我们看看什么是html吧！百度百科是这样介绍的

---

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 

---

什么意思呢？ 简单粗暴的理解就是：让浏览器知道你在说什么！

---

那么html有哪些内容呢？

---

一、基本标签：

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

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   内容2  大于号：内容1 > 内容2 
        小于号：内容1 < 内容2   版权符号：© 内容

---

---

---

二、网页插入：

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。具体事例如下代码：

点击查看代码

三、表单：

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了，如果我的教程有帮助到你欢迎订阅 加关注！也欢迎您在评论区指出我的不足！