HTML中的标签

1、设置编码格式 <meta charset="UTF-8" />

    1.1 Unicode(UTF-8)<!--强烈建议-->

    1.2 中文（简体）（GBK）<!--有的中文网站也用-->

    1.3 中文（简体）（gb18030）

2、常见的文本标签有

    2.1 <title>：标识网页标题

    2.2 <h1>~<h6>:标识标题文本，一至六级标题

    2.3 <p>:标识段落文本

    2.4 <pre>:标识预定义文本，在页面中显示代码

            <pre>

                    &lt;html&gt;

                              &lt;head&gt;

                             &lt;/head&gt;

                     &lt;/html&gt;

             </pre>

    2.5 <blockquote>:标识引用文本

            <blockquote>

                <p>引用文本引用文本引用文本引用文本引用文本引用文本</p>

                <cite>www.Okay686.cn</cite><!--引用地方的链接-->

            </blockquote>

3、字符格式标签

    3.1 <b>、<strong>:标识强调文本，加粗显示

    3.2 <i>、<em>：标识引用文本，以斜体显示

    3.3 <small>:标识缩小文本，以缩小显示

    3.4 <sup>：标识上标文本，以上标效果显示

    3.5 <sub>：标识下标文本，以下标效果显示

    3.6 <cite>：标识引用文本，以引用效果显示，和<blockquote>配合使用

4、div标签：定义区域

5、链接标签——  <a>:标识超链接

    5.1.定义一个超级链接，点击跳转到新页面

    5.2.定义锚点，跳到页面指定的位置

        例5.1.1：<a href="www.okay686.cn" targer="_blank">点击我打开一个新的页面</a>

        例5.1.2：<a href="mailto:18862332293@163.com">点击这里，给我发邮件</a>

        例5.2.1：<ul>

                                <li><a href="#html">HTML简介</a></li>

                                <li><a href="#CSS">CSS简介</a></li>

                                <li><a href="#Javascript">javascript简介</a></li>

                       </ul>

                        <h2 id="html">HTML简介</h2><p>这里是开始介绍html...............</p>

                        <h2 id="CSS">CSS简介</h2><p>这里是开始介绍CSS...............</p>

                        <h2 id="Javascript">Javascript简介</h2><p>这里是开始介绍javascript...............</p>

6、超级链接URL格式（统一资源定位器）——http:协议//www.okay686.cn主机名/文件夹/文件名

    6.1 协议：协议在互联网中有各种各样的应用（http或者https）

    6.2 主机名：表示文件存放在哪台服务器上（可以通过IP地址或域名来表示）

    6.3 文件夹：确定了服务器还需要说明文件存在服务的哪个文件夹中（可以是多个层级）

    6.4 文件名：确定文件夹后，就要定位到文件（要显示的文件）

7、建立超链接：URL

    URL类型

        7.1 绝对URL：一般用于访问不同一台服务器上的资源

        7.2 相对URL：指访问同一台服务器上相同文件夹或不同文件夹中的资源

        例7.1：<h2>绝对的URL</h2>

                    <a href="http://www.okay686.cn">点击我打开老七网站</a>

         例7.2：<h2>相对URL</h2>

                    <a href="demo.html">打开demo1</a>

                    <a href="/css/xxx.html">打开xxx页面</a>

8、列表标签

    8.1 <ul>:标识无序列表

    8.2 <ol>:标识有序列表

          8.3 <li>:标识列表项

    8.4 <dl>:标识定义列表

          8.5 <dt>:标识词条

          8.6 <dd>:标识词条的解释

        例8.4：<dl>

                        <dt>知无不言，言无不尽！</dt><!-- 我是一个标题，需要解释这个标题-->

                        <dd>知道的就说，要说就一点不要保留</dd>

                        <dt>智者千虑，必有一失</dt>

                        <dd>不管多聪明的人，在很多次的考虑中，也有一定会出现个别错误</dd>

                     </dl>

9、多媒体标签

    9.1 <img>:嵌入图片

    9.2 <video>:嵌入视频

    9.3 <audio>:嵌入音频

        例9.1：<img src="img.jpg" /><!--src支持相对路径也支持绝对路径-->

        例9.2 :<video controls="controls"><!--浏览器对视频的格式要求的比较多，用source标签来加载视频的原文件或者格式-->

                        <source src="........" type="video.webm">

                        <source src="........" type="video.mp4">

                  </video>

        例9.3：<audio src="" type="audio/mpeg" controls></audio>

10、表格标签

    10.1 <table>:定义表格结构

    10.2 <caption>:定义表格标题

    10.3 <th>:定义表头

    10.4 <tr>:定义表格的行

    10.5 <td>:定义表格的单元格

11、表单标签<!--和网页进行交互，例如登录表单，付费时需要填写其他信息也是用表单-->

    11.1 <form>:定义表单结构

    11.2 <fieldset>:定义表单域<！--例如表单分成很多块，很多功能点就可以用-->

    11.3 <legend>:定义表单域标题

    11.4 <input>:定义文本域，按钮和复选框<!--有很多类型，以后重点讲解-->

    11.5 <textarea>:定义多行文本框

    11.6 <select>:定义下拉列表

    11.7 <option>:定义下拉列表中的选择项目

    11.8 <button>:定义按钮

例： <h1>登录</h1>

        <form>

            <fieldset>

                <legend>登录信息</legend>

                <label>用户名：</label>

                <input type="text" />

                <label>密码：</label>

                <input type="text" />

                <label><input type="checkbox" />记住密码</label>

                <button>登录</button>

            </fieldset>

        </form>

        <h2>

            <form>

                <fieldset>

                    <legend>发表评论</legend>

                    <textarea></textarea>

                    <button>发布</botton>

                </fieldset>

            </form>

        </h2>

 

        

 

 

 

 

 

 

 

转载于:https://my.oschina.net/u/3633511/blog/1499574