关于web:前端学习笔记一一html的常用标签

1.1 html 概述

html 全称：Hyper Text Markup Language(超文本标记语言)

超级文本标记语言是规范通用标记语言（SGML）下的一个利用，也是一种标准，一种规范，它通过标记符号来标记要显示的网页中的各个局部。

网页文件自身是一种文本文件，通过在文本文件中增加标记符。能够通知浏览器如何显示其中的内容（如：文字如何解决，画面如何安顿，图片如何显示等）。

浏览器按程序浏览网页文件，而后依据标记符解释和显示其标记的内容，对书写出错的标记将不指出其谬误，且不进行其解释执行过程，编制者只能通过显示成果来剖析出错起因和出错部位。但须要留神的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因此可能会有不同的显示成果。

1.2 html 特点
超级文本标记语言文档制作不是很简单，但功能强大，反对不同数据格式的文件嵌入，这也是万维网流行的起因之一，其次要特点如下：
1. 繁难性：超级文本标记语言版本升级采纳超集形式，从而更加灵便不便。
2. 可扩展性：超级文本标记语言的广泛应用带来了增强性能，减少标识符等要求，超级文本标记语言采取子类元素的形式，为零碎扩大带来保障。
3. 平台无关性：尽管集体计算机大行其道，但应用 MAC 等其余机器的大有人在，超级文本标记语言能够应用在宽泛的平台上，这也是万维网流行的另一个起因。
4. 通用性：另外，HTML 是网络的通用语言, 一种简略、通用的全置标记语言。它容许网页制作人建设文本与图片相结合的简单页面，这些页面能够被网上任何其他人浏览到，无论应用的是什么类型的电脑或浏览器。

1.3 html 语法规定

<!DOCTYPE html>
<html>
  <head>
    <!-- 设置页面的字符集编码 -->
    <meta charset="utf-8" />
    <!-- 设置页面的题目 -->
    <title></title>
  </head>
  <body>
    <!-- 须要展现的信息 -->
  </body>
</html>

1.html 构造：包含 head body
2.html 标签是以尖括号突围的关键字
3.html 标签通常是成对呈现的，有开始就有完结，蕴含成对标签、独立标签
4.html 通常都有属性，格局: 属性名=“属性值”(多个属性之间空格隔开)
5.html 标签不辨别大小写, 倡议小写

2.1 构造标签

    <html><html>: 根标签         
    <head>：头标签          
     <title></title>: 页面的题目       
    </head>      
    <body></body>：主体标签：网页内容

属性：

color: 文本的色彩 <font color="red"> 内容 </font>
bgcolor: 背景色     <body bgcolor="bisque"> </body>
background: 背景图片

色彩的示意形式：

第一种形式：应用色彩名称: red green blue                 
第二种形式：RGB 模式 #000000  #ffffff  #325687   #377405

2.2 排版标签

1. 正文标签：

<!-- 正文 -->

2. 换行标签： <br/>
3. 段落标签：<p> 文本文字 </p>

      特点：段与段之间有行高                         
      属性：align 对齐形式  (left：左对齐   center：居中  right：右对齐)          
4. 水平线标签:```<hr/>  ```                    
      属性:   
          width：水平线的长度(两种: 第一种: 像素示意；第二种，百分比示意)                                       
          size: 水平线的粗细 (像素示意，例如：10px)                                 
          color: 水平线的色彩                                  
          align: 水平线的对齐形式(left：左对齐   center：居中  right：右对齐)

2.3 容器标签

<div></div>: 块级标签，独占一行，换行
<span></span>: 行级标签，所有内容都在同一行

     作用：

<div></div>: 次要是联合 css 页面分块布局
<span></span>: 进行敌对提示信息

2.4 文字标签

2.4.1 根本文字标签

<font></font>

   属性：size: 设置字体大小
         color: 设置字体色彩
         face: 设置字体

2.4.2 题目标签

<h1></h1>—-<h6></h6>
随着数字增大文字逐步变小，字体是加粗的，内置字号，默认占据一行；

2.5 列表标签

2.5.1 无序列表

无序列表标签：<ul></ul>

         属性：type : 三个值，别离为
              circle(空心圆) ,disc(默认, 实心圆),square(彩色方块)

列表项：<li></li>

   示例如下：<ul type="square"> 无序列表
            <li> 苹果 </li>
            <li> 香蕉 </li>
            <li> 橘子 </li>
        </ul>

2.5.2 有序列表

ol
有序列表标签：<ol></ol>

         属性：type：1、A、a、I、i（数字、字母、罗马数字）列表项：``` <li></li>```

      示例如下：<ol type="I"> 有序列表
            <li> 苹果 </li>
            <li> 香蕉 </li>
            <li> 橘子 </li>
        </ol>

2.5.3 定义列表

 定义列表   <dl>
                <dt> 苹果 </dt>
                <dd> 苹果是一种水果，富含维生素 C，美容养颜，吃了长命....</dd>
           </dl>

2.5.4 列表嵌套

<ul>
    <li> 咖啡 </li>
        <li> 茶
            <ul>
                <li> 红茶 </li>
                <li> 绿茶
                    <ul>
                        <li> 中国茶 </li>
                        <li> 非洲茶 </li>
                    </ul>
                </li>
            </ul>
        </li>
    <li> 牛奶 </li>
</ul>

2.6 图片标签

 <img/> 独立标签

属性:

  src：图片地址：相对路径（同一个网站）绝对路径（不同网站）width: 宽度
  height: 高度
  border: 边框
  align: 对齐形式，代表图片与相邻的文本的相当地位（有三个属性值：top middle bottom）alt: 图片的文字说明
  hspace 和 vspace 设定图片边际上下左右空白，免得文字或其它图片过于贴近

2.7 链接标签
超链接能够是文本，也能够是一幅图像，您能够点击这些内容来跳转到新的文档或者以后文档中的某个局部。

<a> 文本或图片 </a>
属性：

    href: 跳转页面的地址(跳转到外网须要增加协定)；name: 名称，锚点(回到锚点: 顶部，底部，两头)，在拜访锚点的书写格局:#name 的值                        
    target:_self(本人)  _blank(新页面，之前页面存在)  _parent  _top  默认_self
     _search 相等于给页面起一个名字，如果再次关上时，如果页面存在，则不再关上新的页面。能够是任意名字。

2.8 表格标签
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被宰割为若干单元格（由 <td> 标签定义）。数据单元格能够蕴含文本、图片、列表、段落、表单、水平线、表格等等。

2.8.1 一般表格

(table,tr,td)

 <!--border: 边框的宽度 bordercolor: 边框的色彩 cellspacing: 单元格的边距 width: 宽度 height: 高度 -->
        <table border="1" bordercolor="red" cellspacing="0" align="center" width="200" height="100">
            <tr>
                <td> 学号 </td>
                <td> 姓名 </td>
            </tr>
            <tr>
                <td>1</td>
                <td>aa</td>
            </tr>
        </table>

2.8.2 表格的表头

(th)

  <table border="1" bordercolor="red" cellspacing="0" align="center">
                <caption> 学生表 </caption>
                <tr>
                    <th> 学号 </th>
                    <th> 姓名 </th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>aa</td>
                </tr>
        </table>

2.8.3 表格的列合并

colspan 属性

<table border="1" bordercolor="red" cellspacing="0" align="center">
                <tr>
                    <td colspan="4" align="center"> 学生表 </td>
                </tr>
                <tr>
                    <td> 学号 </td>
                    <td> 姓名 </td>
                    <td colspan="2"> 各科问题 </td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>aa</td>
                    <td>80</td>
                    <td>90</td>
                </tr>
        </table>

2.8.4 表格的行合并

rowspan 属性

<table border="1" bordercolor="red" cellspacing="0" align="center">
            <tr>
            <td colspan="4" align="center"> 学生表 </td>
            </tr>
            <tr>
                <td> 学号 </td>
                <td> 姓名 </td>
                <td> 语文问题 </td>
                <td> 数学问题 </td>
            </tr>
            <tr>
                <td rowspan="2">1</td>
                <td rowspan="2">aa</td>
                <td>80</td>
                <td>90</td>
            </tr>
            <tr>
                <td>80</td>
                <td>90</td>
            </tr>
</table>

2.9 文本格式化标签

    <b>     定义粗体文本。<big>   定义大号字。<em>    定义着重文字。<i>     定义斜体字。<small>     定义小号字。<strong>    定义减轻语气。<sub>   定义下标字。<sup>   定义上标字。<ins>   定义插入字。<del>   定义删除字。

html 表单用于收集不同类型的用户输出

3.1 form 标签

罕用属性：action：示意动作，值为服务器的地址，把表单的数据提交到该地址上解决
         method: 申请形式：get 和 post
         enctype: 示意是表单提交的类型
                默认值：```application/x-www-form-urlencoded```  一般表单
                      ``` multipart/form-data ``` 多局部表单(个别用于文件上传)
     get:
       1. 地址栏, 申请参数都在地址后拼接 ```path?name="张三"&password="123456"```
       2. 不平安
       3. 效率高
       4.get 申请大小有限度，不同浏览器有不同，然而大概是 2KB
应用状况：个别状况用于查问数据。post：1. 地址栏：申请参数独自解决。2. 安全可靠
       3. 效率低
       4.post 申请大小实践上有限。应用状况：个别用于插入批改等操作

3.1.1 input 标签

type: 以下为 type 可能要取的值：1.1   text 文本框  输出内容
      1.2   password  明码框   密文或者掩码
      1.3   radio 示意是单选，name 必须统一；value：提交给服务器的数据
                  示意同一组中只能选中一个(checked ="checked" 示意选中)
      1.4  checkbox  示意多选，name 必须统一，示意同一组中能够选多个，返回值是个数组(checked ="checked" 示意选中)
      1.5   file：示意上传控件                
      以上具备输出性质的必须要有 name 属性, 一开始写 value 示意是默认值(当前获取输入框的内容要依据 name 来取)   
     以下按钮不具备输出性质，不须要 name 属性，然而按钮上的文字提醒应用 value 属性
      1.6 submit   提交
      1.7 reset   重置
      1.9 image   图片提交按钮
     以上所有 input 的属性：width 设置宽度，height 设置高度  border 设置边框
      1.10 button 一般按钮
      1.11 hidden  示意暗藏域，该框的内容服务器须要，然而不想让用户晓得(不想分明的显示在界面上)

name 属性：表单元素名字，只有 name 属性能力提交给服务器。

3.1.2 select 元素

(下拉列表)

<select name="city">   <!--select 标签增加该属性 multiple="multiple" 示意多选 -->  
     <!--option 示意下拉列表项 -->
    <option value="北京"> 北京 </option> 
     <!--selected="selected" 示意选中该项 -->
    <option value="上海" selected="selected"> 上海 </option>
    <option value="广州"> 广州 </option>
    <option value="杭州"> 杭州 </option>
</select>

3.1.3 textarea 元素

(文本域)

须要指定输出的区域地位大小

 <textarea cols="100" rows="5">  示意 5 行 100 列的区域能够输出内容，该元素没有 value 属性

3.1.4 示例及效果图如下

<form action=""method="get">
            <table align="center">
                <caption>
                    <h1> 注册 </h1></caption>
                <tr>
                    <td align="right"> 用户名：</td>
                    <td><input type="text" name="username" value="bluesky" /></td>
                </tr>
                <tr>
                    <td align="right"> 明码：</td>
                    <td><input type="password" name="password" /></td>
                </tr>
                <tr>
                    <td align="right"> 确认明码：</td>
                    <td><input type="password" name="confirmpwd" /></td>
                </tr>
                <tr>
                    <td align="right"> 性别：</td>
                    <td>
                        <input type="radio" name="sex" value="男" /> 男
                        <input type="radio" name="sex" value="女" checked="checked" /> 女
                    </td>
                </tr>
                <tr>
                    <td align="right"> 喜好：</td>
                    <td>
                        <input type="checkbox" name="hobby" value="篮球" checked="checked" /> 篮球
                        <input type="checkbox" name="hobby" value="足球" /> 足球
                        <input type="checkbox" name="hobby" value="乒乓球" /> 乒乓球
                        <input type="checkbox" name="hobby" value="羽毛球" /> 羽毛球
                    </td>
                </tr>
                </tr>
                <tr>
                    <td align="right"> 上传头像：</td>
                    <td>
                        <input type="file" name="upload" />
                    </td>
                </tr>
                </tr>
                <tr>
                    <td align="right"> 居住地：</td>
                    <td>
                        <select name="city">
                            <option value="北京"> 北京 </option>
                            <option value="上海" selected="selected"> 上海 </option>
                            <option value="广州"> 广州 </option>
                            <option value="杭州"> 杭州 </option>
                        </select>
                    </td>
                </tr>
                </tr>
                <tr>
                    <td align="right"> 集体介绍：</td>
                    <td>
                        <textarea cols="100" rows="5">
                 </textarea>
                    </td>
                </tr>
                </tr>
                <tr>
                    <td></td>
                    <td align="center">
                        <input type="submit" value="注册" />
                        <input type="reset" value="重置" />
                    </td>
                </tr>
            </table>
</form>

通过应用框架，你能够在同一个浏览器窗口中显示不止一个页面。每份 HTML 文档称为一个框架，并且每个框架都独立于其余的框架。应用框架的害处：开发人员必须同时跟踪更多的 HTML 文档
    很难打印整张页面

4.1 frameset

框架结构标签

框架结构标签（<frameset>）定义如何将窗口宰割为框架
        每个 frameset 定义了一系列行或列
        rows/columns 的值规定了每行或每列占据屏幕的面积

4.2 frame

框架标签

frame 标签定义了搁置在每个框架中的 HTML 文档。

4.3 根本的注意事项

1\. 不能将 <body></body> 标签与 <frameset></frameset> 标签同时应用
2\. 如果一个框架有可见边框，用户能够拖动边框来扭转它的大小。为了防止这种状况产生，能够在   <frame> 标签中退出：noresize="noresize"。

4.4 效果图及源代码示例

！-- 主界面 --
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <frameset rows="15%,*" border="1px">
        <frame src="FrameTop.html" name="topFrame" noresize="noresize" />
        <frameset cols="15%,*">
            <frame src="FrameLift.html" name="liftFrame" noresize="noresize"/>
            <frame src="FrameRight.html" name="rigthFrame"/>
        </frameset>
    </frameset>
</html>！-- 左侧超链接连贯栏 --
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>a{text-decoration:none}</style>
    </head>
    <body>
        <table width="100%" height="400px">
            <tr align="center" >
                <td>
                    <a href="a 连贯.html" target="rigthFrame"><font size="5"> 第一个连贯 </font></a>
                </td>
            </tr>
            <tr align="center" >
                <td>
                    <a href="Table.html" target="rigthFrame"><font size="5"> 第二个连贯 </font></a>
                </td>
            </tr>
            <tr align="center" >
                <td>
                    <a href="注册.html" target="rigthFrame"><font size="5"> 第三个连贯 </font></a>
                </td>
            </tr>
            <tr align="center" >
                <td>
                    <a href="综合案例.html" target="rigthFrame"><font size="5"> 第四个连贯 </font></a>
                </td>
            </tr>
            <tr align="center" >
                <td>
                    <a href="列表.html" target="rigthFrame"><font size="5"> 第五个连贯 </font></a>
                </td>
            </tr>
        </table>
    </body>
</html>！-- 右侧显示页面 --
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> 注册 </title>
    </head>
    <body bgcolor="aquamarine">
        <div align="center">
            <form action=""method="post">
            <table>
                <tr>
                    <th colspan="2"> 用户注册 </th>
                </tr>
                <tr>
                    <td> 用户名：</td>
                    <td><input type="text" name="uName" /></td>
                </tr>
                <tr>
                    <td> 明码：</td>
                    <td> <input type="password" name="pwb" /></td>
                </tr>
                <tr>
                    <td> 确认明码：</td>
                    <td> <input type="password" name="qpwb" /></td>
                </tr>
                <tr>
                    <td> 性别:</td>
                    <td>
                        <input type="radio" name="gender" checked="checked" value="男" /> 男
                        &nbsp;&nbsp;&nbsp;
                        <input type="radio" name="gender" value="女" /> 女
                    </td>
                </tr>
                <tr>
                    <td> 喜好：</td>
                    <td>
                        <input type="checkbox" name="hobby" value="动漫"/> 动漫
                        <input type="checkbox" name="hobby" value="游戏"/> 游戏
                        <input type="checkbox" name="hobby" value="社交"/> 社交
                    </td>
                </tr>
                <tr>
                    <td> 所在地 </td>
                    <td>
                        <select name="address">
                            <option> 北京 </option>
                            <option> 上海 </option>
                            <option> 天津 </option>
                            <option> 广东 </option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td> 上传头像 </td>
                    <td>
                        <input type="file" name="file" />
                    </td>
                </tr>
                <tr>
                    <td> 自我介绍 </td>
                    <td>
                        <textarea style="resize:none; height: 50px;" name="myself"></textarea>
                    </td>
                </tr>
                <tr >
                    <td colspan="2">
                        <input style="margin-left: 50px;" type="submit" name="submit"/>
                        <input style="margin-left: 50px;" type="reset" name="reset"/>
                    </td>
                </tr>
            </table>
        </form>

        </div>

    </body>
</html>

!-- 顶部 Hello World--
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body bgcolor="coral">
        <p align="center"><font size="7">Hello World</font></p>
    </body>
</html>

5.1 其它标签

        <!-- 该网页的关键字 -->
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <!-- 该网页的形容 -->
        <meta http-equiv="description" content="this is my page">
         <!-- 该网页的编码 -->
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">  html4.01
         <meta charset="UTF-8">  html5
        <!-- href：引入 css 文件的地址 -->
        <link rel="stylesheet" type="text/css" href="./styles.css">
        <!--src：js 的文件地址 -->
        <script type="text/javascript" src=""></script>

5.2 特殊字符

        &lt; 小于号  
        &gt; 大于号
        &amp; 与字符
        &quot; 引号 
        &reg; 己注册
        &copy; 版权
        &trade; 商标
        &nbsp; 空格

关于web:前端学习笔记一一html的常用标签

html 简介

html 根本标签

html 表单标签

html 框架标签

html 的其它标签和特殊字符