• 静态Web开发 HTML


    静态Web开发

    一章 HTML(Hyper Text Markup Language)


    1节
    html入门

    HTML
    超文本标记语言
    由浏览器解释执行
    开发人员编写的超文本文档就是网页

    XHTML
    HTML升级到XML得过度产品
    完全兼容HTML4.01
    并且具有XML的语法

    不区分大小写
    头部分是给HTML页面增加一些辅助或属性信息,它里面的内容会最先加载,体部分是真正存放数据的地方

    <head>
    <meta http-equiv="Content-type" content="text/html;charset=utf-8"> //该文档采用哪种编码集utf-8
    </head>

    <font color="red" size="2">能看到我嘛</font> //不指定编码,乱码;标签不区分大小写

    可以使用专业的HTML编译器来编译HTML:
    Adobe Dreamweaver
    Microsoft Expression Web
    CoffeeCup HTML Editor
    对于初学者,推荐使用文本编译器来学习HTML
    Editplus,Notepad++

    2节
    字体标签

    <title></title>
    <font color="red" sixe="+2" face="微软雅黑"></font> //size不能指定大小,只能+ -;face指定字体样式;font已经不赞成使用,都是用css

    标题标签
    <h1></h1>
    ...
    <h6></h6> //六级标签

    特殊字符
    &lt; <
    &gt; >
    &nbsp; 空格
    &quot; "
    &reg; ®
    &trade; ™
    &amp; &
    &copy; ©

    常见的单标记标签:<br/> //显示他们需要转移
    常见的双标记标签:<front></front>

    3节
    列表标签

    disc :  CSS1 默认值。实心圆
    circle :  CSS1 空心圆
    square :  CSS1 实心方块
    decimal :  CSS1 阿拉伯数字
    lower-roman :  CSS1 小写罗马数字
    upper-roman :  CSS1 大写罗马数字
    lower-alpha :  CSS1 小写英文字母
    upper-alpha :  CSS1 大写英文字母   // ul属性中有三个值,用于规定列表的符号,不赞成使用

    无序列表
    <ul style="list-style-type:disc">
    <li>第一</li><li>第二</li><li>第三</li>
    </ul>

    有序列表

    <ol style="list-style-type:upper-alpha">
    <li>一</li><li>二</li><li>三</li><li>四</li>
    </ol>

    定义列表(definition list)
    <dl>
    <dt>游戏</dt> //definition table
    <dd>穿越火线</dd> //description描述
    <dd>lol</dd>
    <dt>部门</dt>
    ...
    </dl>

    4节
    图像标签

    <img sc="..."
    boder="3px" //边框
    title="鼠标移到的提示文本"
    alt="显示不出来时提示" //不同浏览器的版本可能提示不出来,不能超过1024字符
    width="200px"
    height="300px"
    />


    5节
    表格标签------------------------------------------------------------------------------------------------------------------------------(*)

    //用于格式化数据
    //cellspacing="0px" 单元格与相邻单元格之间的距离;collapse ;cellpadding 单元格内容与边框的距离
    <table border width="100%" cellpadding="5px" cellspacing="0px" style="border-collapse:collapse">
    <caption>标题</caption>
    <thead>
    <tr>
    <th>编号</th><th>姓名</th><th>年龄</th>
    </tr>
    </thead>
    <tbody> //多个tbody标签,可以局部控制数据的加载,减少等待时间
    ...
    </tbody>
    <tfoot> //与tbody是一样的,在表格的尾部新增一行
    </tfoot>
    <tr>
    <td>编号</td><td>姓名</td><td>年龄</td>
    </tr>
    ...
    </table>

    <td>常用属性
    colspan> rowspan ---合并单元格

    6节
    超链接(hyperLink)

    <a href="http://www.rupeng.com" target="_blank">如鹏</a>
    target:指定在哪个窗口中打开,有4个值
    _blank 在新开的空白窗口窗口中打开链接
    _parent:在父级窗口中打开
    _self: 在自身页面中打开(默认)
    _top: 在整个浏览器的最顶端(前端)打开

  • 相关阅读:
    「LibreOJ NOI Round #2」不等关系
    Atcoder Grand Contest 036 D
    「CTS2019」氪金手游
    「CTS2019」珍珠
    「APIO2016」烟花表演
    「PKUWC2018/PKUSC2018」试题选做
    「PKUWC2018」猎人杀
    「WC 2019」数树
    CodeForces 794 G.Replace All
    「BZOJ 4228」Tibbar的后花园
  • 原文地址:https://www.cnblogs.com/adolphyang/p/4685503.html
Copyright © 2020-2023  润新知