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

43次阅读

共计 9475 个字符,预计需要花费 24 分钟才能阅读完成。

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 标签不辨别大小写, 倡议小写

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></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

 定义列表   <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 表单标签

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 文档称为一个框架,并且每个框架都独立于其余的框架。应用框架的害处:开发人员必须同时跟踪更多的 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>

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; 空格   

正文完
 0