• HTML入门教程,多年心血总结,一看就会


      笔者在武汉蚂蹄软件服务中心做软件开发多年,最近花一天时间总结出一套HTML入门级的教程,全篇没有任何废话,全部是精华,希望对你入门web开发有一定的帮助。

    HTML基本格式

    <html>
        <head>
    	<title>选项卡中显示的标题</title>
        </head>
        <body>
    	正文要显示的内容
        </body>
    </html>
    

      


    常用标签
    1,注释标签: <!-- -->

    2,标题标签:<h?></h?> ?=1--6(1--6大小递减)

    3,空格标签:&nbsp

    4,段落标签:<p></p>

    5,水平线:<hr/>

    6,拆行:<br/>

    7,<:&lt >:&gt &:&amp

    8,图片标签:<img src=""/>

    属性
    1,以键值对形式出现
    2,属性值用引号括起来
    3,多个属性用空格隔开


    <hr />标签
    1,align="(对齐方式)left"
    left、right、center

    2,noshade="noshade"(有无阴影)

    3,color="(颜色)Red或者#ff00ff"
    Black、White、Purple、Blue、Teal、Green、Yellow、Red、Lime、Aqua、Fuchsia、Olive、Gray、Silver、Navy

    4,width="(宽度)160或50%"

    5,size="(高度)100"

    图像标签(<img />)
    1,src="URL"

    2,alt="替换文本"

    3,width和height="宽度和高度"(只填一个,等比缩放)

    4,border="边框大小"


    字体标签(<font />)
    1,size="n或者+n或者-n"
    1--7大小递增(默认为3)【+/-n在3上加减】

    2,face="(字体名称)楷体"
    电脑上有的字体

    3,color="(颜色)Red或者#ff00ff"
    Black、White、Purple(紫)、Blue、Teal(青)、Green、Yellow、Red、Lime(柠檬、酸橙)、Aqua(浅绿)、Fuchsia(紫红)、Olive(橄榄)、Gray(灰)、Silver(银)、Navy(深蓝)


    物理字体
    1,<b>---粗体

    2,<i>---斜体

    3,<u>---下划线

    4,<sup>---上标

    5,<sub>---下标

    6,<s>---删除线

    7,<tt>---等宽字体


    逻辑字体
    1,<em>---斜体

    2,<strong>---粗体

    武汉蚂蹄软件服务中心-武汉软件开发


    相对路径
    1,同级目录---.或不写

    2,上级目录---..

    3,控制台下回到上级目录---cd..

    4,控制台下回到根目录---cd/


    预定义格式文本(<pre></pre>)
    1,通常保留空格和换行,文本以等宽字体呈现

    2,与<code>一起使用,以获得更加精确的语义

    3,不建议使用Tab


    marquee标签(已不用)
    1,用来显示元素的移动

    2,direction属性,设置方向
    left、right、up、down

    3,behavior属性,设置模式
    scroll、slide、altermate


    HTML超链接
    1,语法(<a href="URL">……</a>)

    2,……可以是字、词、句、图

    3,链接的两种方式
    ①链接到另一文档
    ②跳转到指定位置
    ---指定位置处 <a name="(标记)mark">
    ---跳转处 <a href="#mark">……</a>

    4,创建电子邮件链接
    ①URL格式:
    mailto:收件人邮箱名?(邮件到达后的参数)subject=主题名&body=邮件内容

    ②需要安装邮件客户端


    body属性
    1,text---文字颜色

    2,link---点击前链接颜色

    3,alink---点击时链接颜色

    4,vlink---点击后链接颜色

    5,bgcolor---背景颜色

    6,background---背景图片


    HTML列表
    1,无序列表 (<ul></ul>)
    ①type属性可选值
    disk(.)、circle(。)、square(▪)
    ②<li>需要列出的项目</li>

    2,有序列表 (<ol></ol>)
    ①type属性可选值
    A、a、I、i、1
    ②<li>需要列出的项目</li>

    3,自定义列表
    ①<dl>定义列表</dl>
    ②<dt>定义术语</dt>
    ③<dd>定义术语解释部分</dd>


    HTML表格
    1,语法
    <table border="1">
    <tr>
    <td>单元格内容</td>
    </tr>
    ……
    </table>

    2, <td colspan="3"></td>---该项跨3列

    3,<td rowspan="3"></td>---该项跨3行

    4,table的属性
    ①bgcolor---背景颜色
    ②border---边框
    ③bordercolor---边框颜色
    bordercolorlight---边框明亮部分颜色
    bordercolordark---边框昏暗部分颜色
    ④width---边框宽度
    ⑤height---边框高度
    ⑥cellspacing---单元格之间间隔大小
    ⑦cellpadding---单元格边框与内容之间的间隔大小

    5,td的属性
    ①align---横向对其方式(left、center、right)
    ②valign---纵向对其方式(top、middle、bottom)
    ③bgcolor---背景颜色
    ④width---单元格宽度
    ⑤height---单元格高度
    ⑥colspan---该单元格跨的列数
    ⑦rowspan---该单元格跨的行数


    HTML表单
    1,基本格式
    <form>
    放要传送的数据
    </form>

    2,常见表单
    ①TEXT---单行文本输入框

    ②PASSWORD---密码框

    ③RADIO---单选按钮
    一般不能点,要分组后才能点
    分组就是讲其name属性设成一样

    ④CHECKBOX---复选框

    ⑤SELECT---下拉列表(ComboBox或ListBox)
    <option>选项</option>
    size属性(默认为1[ComboBox],非1[ListBox])
    multiple属性---可多选(ctrl)

    ⑥RESET---重置按钮

    ⑦SUBMIT---提交按钮

    ⑧TEXTAREA---多行文本框

    3,表单元素的基本格式
    <input name="表单元素名称" type="(类型)submit" value="初始值" size="显示宽度(初始宽度)" maxlength="最大长度(最多字符个数)" checked="是否选中"/>

    4,form的常用属性
    ①action---表示提交的目标服务器
    ②method---提交的方法(get[默认]、post)

    5,按钮标签(<input type="button"/>)

    6,图像标签(<input type="image" src="URL"/>)
    可以替代submit,点击后返回表单数据的x,y坐标

    7,<input type="file"/>可以导入文件路径

  • 相关阅读:
    8.14-T1村通网(pupil)
    8.10-Day2T3 镇守府
    8.10-Day2T2 吃喝大法好
    8.10-Day2T1最小值
    8.10-DayT3游走(wander)
    8.10-Day1T2圈(circle)
    8.10-Day1T1-数字(number)
    bzoj2462: [BeiJing2011]矩阵模板
    8.7-Day1T1
    k8s高可用部署后续:SLB
  • 原文地址:https://www.cnblogs.com/liujian619/p/start-html.html
Copyright © 2020-2023  润新知