• html学习总结


    HTML:Hypertext Marked Language

    即超文本标记语言,是一种用来制作超文本文档的简单标记语言。超文本传输协议规定了浏览器在运行 HTML 文档时所遵循的规则和进行的操作.

    创建一个HTML文档,需要两个工具,一个是HTML编辑器,一个WEB浏览器。

    HTML编辑器是用于生成和保存THML文档的应用程序。

    WEB浏览器是用来打开WEB网页文件,提供给我们查看WEB资源的客户端程序。

     

    <HTML></HTML>在文档的最外层,文档中的所有文本和html 标签都包含在其中,它表示该文档是以超文本标识语言(HTML)编写的。

    <HEAD></HEAD>是HTML文档的头部标签, 在浏览器窗口中,头部信息是不被显示在正文中的,在此标签中可以插入其它标记, 用以说明文件的标题和整个文件的一些公共属性。

    <title>和</title>是嵌套在<HEAD>头部标签中的,标签之间的文本是文档标题,它被显示在浏览器窗口的标题栏

    <BODY> </BODY>标记一般不省略,标签之间的文本是正文,是在浏览器要显示的页面内容

    HTML的标签分单标签和成对标签两种

    成对标签:<标签名</标签名>

    单独标签:<标签名>

     

    <标签名字 属性1 属性2 属性 3 … >内容</标签名字>

    作为一般的原则,大多数属性值不用加双引号。但是包括空格、%号,#号等特殊字符的属性值必须加入双引号。为了好的习惯,提倡全部对属性值加双引号。如:

    <font color="#ff00ff" face="宋体" size="30">字体设置</font>

    文字版面的编辑

    3-1 换行 <br> 单标签

    3-2 换段落标签<p>  单独、成对

    格式:

    <P>

    <P ALIGN= 参数>

    其中,ALIGN 是<p>标签的属性,属性有三个参数 left,center,right.这三个参数设置段落文字的左,中,右位置的对齐方式

    3-3 原样显示文字标签<pre> 成对、

    3-4 居中对齐标签<center> 成对标签

    3-5 引文标签 (缩排标签)<blockquote>

    <BLOCKQUOTE>

    </BLOCKQUOTE>

    <BLOCKQUOTE><BLOCKQUOTE>

    </BLOCKQUOTE></BLOCKQUOTE>

    <BLOCKQUOTE><BLOCKQUOTE><BLOCKQUOTE>

    </BLOCKQUOTE></BLOCKQUOTE></BLOCKQUOTE>

    3-6水平分隔线标签<hr> 单独

     

    3-7署名标签<address>  <address></address>标签之间的文字显示效果是斜体字。

    3-8特殊字符

    注:&copy是版权声明前的圈

     

    3-9注释标签

    <!--注释的内容-->

    <!注释的内容>

     

    3-10 字体属性

    3-10-1标题标签的格式:<hn align=参数〉标题内容</hn>

     说明:<hn>标签是成对出现的,<hn>标签共分为六级,在<h1>...</h1>之间的文字就是第一级是最大最粗的标题;<h6>...</h6>之间的文字是最后一级,是最小最细的标题文字。align 属性用于设置标题的对齐方式,其参数为 left(左), enter(中), right (右)。<hn>标签本身具有换行的作用,标题总是从新的一行开始。

    文字格式控制标签<FONT>

    3-10-2 <FONT>标签用于控制文字的字体,大小和颜色

    3-10-3特定文字样式标签

    a 物理类型标签

    粗体标签<b>

    放在<b>与</b>标签之间的文字将以粗体方式显示。

    斜体标签<i>

    放在<i>与</i>标签之间的文字将以斜体方式显示。

    下划线标签<u>

    放在<u>与</u>标签之间的文字将以下划线方式显示。

    b 常用的逻辑类型标签有八种,放在标签之间的文字受其控制

    em标签:<em>用于强调的文本,一般显示为斜体字</em>

    strong标签:<strong>用于特别强调的文本,显示为粗体字</strong>

    cite标签:<cite>用于引证和举例,通常是斜体字</cite>

    code标签:<code>用来指出这是一组代码</code>

    small标签:<small>规定文本以小号字显示</small>

    big标签:<big>规定文本以大号字显示</big>

    samp标签:<samp>显示一段计算机常用的字体,即宽度相等的字体</samp>

    kbd标签:<kbd>由用户输入文本,通常显示为较粗的宽体字</kbd>

    var标签:<var>用来表示变量,通常显示为斜体字</var>

    dfn标签:<dfn>表示一个定义或说明,通常显示为斜体字</dfn>

    sup标签:12<sup>2</sup>=144

    sub标签:硫酸亚铁的分子式是Fe<sub>2</sub>SO<sub>4</sub>

    建立列表

     

    4-1 无序列表<UL>

    格式 1:

    <UL>

            <LI>第一项

            <LI>第二项

            <LI>第三项

    </UL>

    格式 2

    <ul>

               <li type=disc>第一项

               <li type=circle>第二项

               <li type=square>第三项

    </ul>

    <LI>的属性 type

    disc 实心园

    circle空心园

    square小方块

    4-2 有序列表<OL>

    有序列表和无序列表的使用格式基本相同,它使用标签<ol></ol>,每一个列表项前使用<li>。<ol>列表的结果是带有前后顺序之分的编号。如果插入和删除一个列表项,编号会自动调整。

    4-3 嵌套列表

    4-4 定义列表的标记<DL>/<DT>/<DD>

    <dl>

            <dt>第 1项 <dd>注释 1

            <dt>第 2项 <dd>注释 2

            <dt>第 3项 <dd>注释 3

    </dl>

    第一层为列表项标签<DT>,第二层为注释项标签<DD>。<DT>和<DD>标签通常是成对使用的。

    4-5 目录列表<DIR>和菜单列表<MENU>

    格式 1:

    <dir>

       <li>第一项

       <li>第二项

       <li>第三项

    </dir>

    格式 2

    <menu>

       <li type=disc>第一项

       <li type=circle>第二项

       <li type=square>第三项

    </menu>

     

    图像的处理

    5-1 背景图像的设定

    <body background= "image-url">

    5-2 网页中插入图片标签<img>

    <IMG> 的格式及一般属性设定:

    <img src="logo.gif" width=100 height=100 hspace=5 vspace=5 border=2 align="top" alt="Logo of PenPals Garden"  lowsrc="pre_logo.gif">

    5-2 设定上下左右空白位置 hspace/vspace

    <img src="../../imge/6-5.gif" align="left" hspace="20" vspace="20">

    5-2-3 设定字画对其方式 

    图像的对齐:

    1)  单独占一行时,放在<p>…</p>中,用<p>的对齐属性进行设置。

    2)  与文本在同一行时,用其自身的 align 属性(top,middle,bottom)设置图像与文本的垂直对齐。其中:bottom为默认值。

    3)  图文混排时,可实现图像的左、右环绕文本,用 align 属性(left 图像在左、文本在右,right)。

    <img src="../../imge/6-2.jpg" align="left">

    <img src="../../imge/6-2.jpg" align="right">

    <img src="../../imge/6-2.jpg" align="top">

    <img src="../../imge/6-2.jpg" align=bottom>

    <p><img src="../../imge/6-2.jpg" align="middle">

    5-2-4 图片大小设定  

    <img src="../../imge/6-3.gif" width="350" height="200">

    5-2-5 图像边框的设定

    <img src="../../imge/xjbjtp22.jpg" border="10">

    建立超链接

    建立超链接的标签为<A>和</A>

    格式:<A HREF="资源地址"  TARGET="窗口名称" TITLE="指向连接显示的文字">超链接名称</A>

    属性“HREF”定义了这个链接所指的目标地址;目标地址是最重要的,一旦路径上出现差错,该资源就无法访问

    TARGET:该属性用于指定打开链接的目标窗口,其默认方式是原窗口。

    建立目标窗口的属性

    属性值  描 述

    _parent 在上一级窗口中打开,一般使用分桢的框架页会经常使用

    _blank  在新窗口打开

    _self  在同一个桢或窗口中打开,这项一般不用设置

    _top  在浏览器的整个窗口中打开,忽略任何框架

    TITLE:该属性用于指定指向链接时所显示的标题文字

     

    TABLE

    html 文档中,表格是通过<table>,<th>,<tr>,<td>标签来完成的 

    7-2(2) 设置分隔线的显示状态 rules

    7-2(3) 表格的边框显示状态 frame

    7-3 表格行的设定

    <TR> 的参数设定(常用): 

    <tr align="RIGHT" valign="MIDDLE" bgcolor="#0000FF" bordercolor="#FF00FF"

    bordercolorlight="#808080" bordercolordark="#FF0000">

    7-4 单元格的设定

    <th>和<td>都是插入单元格的标签,这两个标签必须嵌套在<tr>标签内。是成对出现的

     

     

    7-7 表格的标题标签<caption>

    网页的动态、多媒体效果

    8-1 滚动字幕<marquee>...</marquee>

    8-2 插入多媒体文件

    <EMBED SRC="音乐文件地址">

    嵌入背景音乐

    <BGSOUND src="your.mid" autostart=true loop=infinite>

    将音乐做成一个链接,只需用鼠标在上面单击,就可以听音乐了

    <A  HREF="音乐地址">乐曲名</A>  

    多视窗口框架

    语法格式:

               <html>

               <head>

               </head>

               <frameset>

                   <frame src="url地址1">

                   <frame src="url地址2">

                   ......

               <frameset>

               </html>

     

    可以做导航

    浮动窗口<iframe>

    <iframe src="iframe.html" name="test" align="MIDDLE" width="300" height="100"

    marginwidth="1" marginheight="1" frameborder="1" scrolling="Yes"> 

    表单

    表单在Web网页中用来给访问者填写信息,从而能采集客户端信息,使网页具有交互的功能。一般是将表单设计在一个Html 文档中,当用户填写完信息后做提交(submit)操作,于是表单的内容就从客户端的浏览器传送到服务器上,经过服务器上的 ASP 或 CGI 等处理程序处理后,再将用户所需信息传送回客户端的浏览器上,这样网页就具有了交互性。

    表单  <form></form>

    属性  action method和target

    form action="用来接收表单信息的url">,如果这个属性是空值("")则当前文档的url 将被使用

    method

    GET方式是处理程序从当前Html 文档中获取数据

    POST当前的Html 文档把数据传送给处理程序

    target用来指定目标窗口或目标帧。可选当前窗口_self,父级窗口_parent,顶层窗口_top,空白窗口_blank。

    写入标记<input>

    <input 属性1 属性2......>

    常用属性:

    1 name 控件名称

    2 type控件类型 如:botton 普通按钮,texe 文本框等

    3 align 指定对齐方式,可取top, bottom, middl

    4 size 指定控件的宽度

    5 value 用于设定输入默认值

    6 maxlength在单行文本的时候允许输入的最大字符数

    7 src 插入图像的地址

    8 event 指定激发的事件

    菜单下拉列表框<select></select><option>

    多行的文本框.<textarea></textarea>

  • 相关阅读:
    opencv-0-项目启程
    [SketchUp]-绘制自己的家
    C51_PID 水温控制系统
    latex-列表环境
    nCOV 数据简要分析 (0326)
    引入OpenCV导致私有内存巨大
    【带着canvas去流浪(15)】threejs fundamentals翻译系列1-scene graph
    【一统江湖的大前端(9)】TensorFlow.js 开箱即用的深度学习工具
    【一统江湖的大前端(8)】matter.js 经典物理
    2019年12月前端面经及总结(西安,杭州)
  • 原文地址:https://www.cnblogs.com/wangshichuan/p/3960097.html
Copyright © 2020-2023  润新知