python之web前端day01

HTML

标签格式

  • 格式:

    • 双边:<标签名 属性1="值1" 属性2='值2' 属性3=值3>内容</标签名>

    • 单边:<标签名 属性1="值1" 属性2='值2' 属性3=值3 />

  • 特点:

    • 成对出现

    • 容错性强

    • 标签名已预定义

    • 全部小写,注意格式

    • 属性使用双引号包括

  • 说明:标签就是HTML的骨架,最重要的组成部分。

全局架构标签

  • 示例:

    <html>
    <!--注释-->
    <head>
    <title>网页标题</title>
    </head>
    <body text="red" bgcolor="#0000ff">
    这是页面的内容
    </body>
    </html>
  • 说明:

    • html:是文档中最大的标签,所有标签都要放在该标签内部

    • head:头部,存放页面显示以外的内容,如:标题、字符集等

    • body:身体,存放页面要显示的内容,其中的内容会显示在页面中。

  • 属性:

    • text:字体颜色

    • bgcolor:背景色

  • 几乎每个标签都有的属性:

    • class、id、name、style

    • 后面集合CSS与JS经常使用

常用标签(文本修饰)

  • 标题:h1~h6,字体从大到小;h1一个页面中最多一个,不要为了调整字体大小而使用。

  • 加粗:<b></b>、<strong></strong>

  • 斜体:<i></i>、<cite></cite>、<em></em>

  • 下划线:<u></u>

  • 删除线:<s></s>

  • 上标:<sup></sup>

  • 下标:<sub></sub>

  • 字体:<font></font>

    • size:大小

    • color:颜色

    • face:脸型(字体类型)

常用标签(格式控制)

  • 换行:<br />,对于任意多个空格或回车,浏览器都解析为一个空格

  • 段落:<p></p>,表示一个段落

  • 横线:<hr />,水平的直线

  • 滚动:<marquee></marquee>

  • 原样:<pre></pre>,浏览中显示的内容与文档中的格式一样

  • 无序列表:<ul></ul>,其中的每个元素都是一个<li></li>

    • type:disc(实心圆,默认),circle(空心圆),square(实心方框)

  • 有序列表:<ol></ol>

    • type:1、a、A、I

    • start:序号的其实位置

字符实体

  • 说明:HTML 中的预留字符必须被替换为字符实体,否则无法显示。

  • 提醒:不用刻意记录字符实体,用的时候查一下就可以了。

  • 示例:


    &lt; 小于 <
    &gt; 大于 >
    &nbsp; 空格
    &amp; &
  • 参考:http://www.w3school.com.cn

URL(重点)

  • 说明:统一资源定位符,是URI的一种,可以唯一的标识一个网络资源。

  • 组成:协议://主机:端口/文件?参数1=值1&参数2=值2

    • http:80端口,会自动省略

    • https:443端口

  • 例子:http://www.baidu.com:80/index.html?page=3&wd=python

超链接(a)

  • 名称:<a></a>

  • 说明:超链接,可以完成页面的跳转

  • 属性:

    • href:指定跳转地址

    • title:光标放上去的提示信息

    • target:新页面的打开目标

      • _self:当前标签栏

      • _blank:新的空白标签栏

      • _parent:覆盖父级页面

      • _top:覆盖最外层页面

    • name:设置锚点,可以用于跳转定位

      • 设置该属性后,可以根据其值进行跳转定位(设置a标签的href属性)

      • 如:<a name="p5"></a>,使用:<a href="xxx#p5"></a>

      • 说明:不但可以在一个页面内部跳转,也可以在不同页面间跳转。

原文地址:https://www.cnblogs.com/jiangtao159/p/9792355.html