• Web开发技术——HTML基础


    html文件的基本结构

    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
        <title>My first web page</title>
      </head>
      <body>
        Hello World!
      </body>
    </html>
    1. <title> 网页标题
    2. <head> 头部部分
    3. <body> 主体部分,网页内容可以是文本、图像
    4. head + body = 网页
    5. <meta>标签:描述网页,定义页面的一些基本信息。
    6. charset=gb2312:可以避免页面中的乱码。简单中文:gb2312,繁体中文:big5,纯英文网页:iso-8859-1

    页面背景色和背景图像

    为了使网页整体美观大方,背景颜色应该尽量的浅。

    <body bgcolor="#FFCCFF" background="back_image.gif"> hello world!</body>

    文本控制标签

    标题标签:<h></h>

    <body>
        <h1>一级标题</h1>
        <h6>六级标题</h6>
    </body>

    文本字体标签:<font></font>

    <font size="12" color="red" face="宋体></font>

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

    换行标签:<br>

    <p align="center">淘宝集市</p>
    <p align="left">
        淘宝首届书友会!<br>
        欢笑大众
    </p> 

    特殊符号

    空格:&nbsp; 引号("")&quot; 小于(<):&lt; 大于(>):&gt; 版权号(@)&copy;

    <body>
        <p><font size="2" color="red"> 手机充值、IP卡/电话卡<font><br>移动&nbsp;|&nbsp; 100 | &nbsp;联通| &nbsp;50</p>
        <p><font size ="10" color="blue">Copyright &copy; 2007 &quot;淘宝网&quot; All rights.</font></p>
    </body>

    字体布局

    内容分隔标签<hr>

    <body>
        <hr size="5" color="red" width="300>
        <hr align="left" size='10' color= green width = 800>
    </body>

    无序列表

    type=circle, shape, square

    <ul type="circle">
        <li><font size="5" color="black">AAA</font></li>
        <li>BBB</li>
        <li>CCC</li>
    </ul> 

    有序列表

    type=1,a

    <ol type="1">
        <li><font size="5" color="black">AAA</font></li>
        <li>BBB</li>
        <li>CCC</li>
    </ol>

    预格式文本

    <pre>
        <img src="qq.jpg" width="159" height="133" align="left">
        腾讯-QQ币/QQ幻想-30元卡
    
        一口价:26.45元
        运费:卖家承担运费
        剩余时间:5天
        宝贝类型: 全新
        卖主声明:货到付款,可试用10
    </pre>

    超链接标签

    链接到其他页面

    <font size="2"><a href="register/register.html">【免费注册】</a></font>
    <a href="register/register.html"><font size="2">【免费注册】</font></a>

    锚标记

    <a href="#helpme">【新人上路】</a> 2、链接到锚标记所在位置
    <a name="helpme">新人上路指南</a> 1、定义锚标记
    href="#"表示空链接

    电子邮件链接

    <a href="mailto:webmaster@sohu.com">站长邮箱<a>

    图像标签

    <img src="images/adv_2.jpg "width="300" height="150" alt="明星演唱会开幕">
    alt属性:鼠标移到上面时显示,或者图像未找到时显示。

    滚动标签

    <font size=12 color="purple"><marquee scrolldelay="100 direction="up">Hello World!</marquee></font>
    scrolldelay:表示滚动延迟时间。direction:表示滚动的方向,默认为从右向左。 

    表格

    基本语法

    <table border="1"
            width="400"
            height="200"
            bordercolor="red"
            background="back.jpg"
            bgColor=#ebefff
            cellpadding="30" 
            cellspacing="40"> 
      <tr>
        <td align="center">
          Content
        </td>
      </tr>
    </table>
    1. <table>:定义表格
    2. <td>:列
    3. <tr>:行
    4. border:边框尺寸
    5. width:宽度; height: 高度;bordercolor:边框颜色;background:表格的背景颜色; bgColor:表格、行、列的背景颜色(RGB颜色对照表)
    6. align:表格、行、列的对齐方式

    跨行跨列

    <table border="1">
      <tr>
        <td>AAA</td>
        <td colspan="2">BBB</td>
      </tr>
      <tr>
        <td rowspan="2">DDD</td>
        <td>CCC</td>
        <td>FFF</td>
      </tr>
      <tr>
        <td>GGG</td>
        <td>YYY</td>
      </tr>
    </table> 

    表单

    表单的作用

    1. 注册用户
    2. 收集信息
    3. 反馈信息
    4. 为网站提供搜索工具
    <FORM action=" http://www.sohu.com"method=" post" >
    </FORM>
    action:指定哪个网页接收
    post:提交方法
    <FORM name="form3" method="post" action="">
        <INPUT type="checkbox" name="gen" value="男 " size="21"maxlength=4 checked="checked">
    </FORM>
    1. type:控件类型
    2. name:控件名称
    3. value:默认值
    4. size:控件初始宽度
    5. maxlength:最大字符长度
    6. checked:控件是否被选中
    <FORM action=" http://www.sohu.com"method=" post" >
      <input type="text" /> <!-- 文 本 框 -->
      <input type="password" /> <!-- 密 框 -->
      <input type="hidden" /> <!---->
      <input type="radio" /> <!-- 单 框 -->
      <input type="checkbox" /> <!-- 多 框 -->
      <input type="file" /> <!-- 文 件 上 传 框 -->
      <input type="button" /> <!-- 普 按 -->
      <input type="reset" /> <!---->
      <input type="submit" /> <!-- 单 提 交 按 -->
      <input type="image" /> <!-- 图 片 按 -->
      <textarea rows="5" cols="40">
        文 本 域
      </textarea>
      <select> <!-- 下 拉 框 -->
        <option>AAA</option>
        <option>BBB</option>
        <option>CCC</option>
      </select>
    </FORM>

    Frame框架

    FrameSet.html

    1. Top.html 固定部分
    2. left.html 导航功能
    3. Main.html 详细内容
    <frameset cols="25%,50%,*" rows="50%,*" border="5">
        <frame src="the_first.html">
    </frameset>
    • cols:将窗口分割成左中右3部分,可选
    • rows="50%,*":将窗口分割成上下2部分,可选
    • border:边框尺寸
    <frame src="the_first.html">??????????????????
    <frameset rows="20%,*" frameborder="0">
      <frame src="top.html" name="topframe" scrolling="no" noresize="noresize">
      <frameset cols="20%,*">
        <frame src="left.html" noresize="noresize"scrolling="no" name="leftframe">
        <frame src="right.html" name="rightframe">
      </frameset>
    </frameset> 
    • frameborder:设置边框大小
    • scrolling:滚动条
    • noresize:禁止调整框架大小
    • name:框架名, 便于文本接标target属性所引用框架名,便于文本接标target属性所引用

    如果在同一个页面中,要实现一个在框架窗口中的超链接出现在另一个框架窗口中,如何实现?

    答案:使用target目标窗口属性

    <P>
      <a href="right.html" target="rightframe">
      <IMG src="images/reg.jpg" width="158" height="31" border="0" /></A>
    </P>
    <P>
      <a href="buy.html" target="rightframe">
      <IMG src="images/buy.jpg" width="160" height="32" border="0" /></A>
    </P>
  • 相关阅读:
    mysql concat_ws 与 concat 多字段模糊匹配应用
    logstash marking url as dead 问题解决
    IntelliJ IDEA(四) :Settings(上)
    IntelliJ IDEA(三) :常用快捷键
    IntelliJ IDEA(二) :面板介绍
    IntelliJ IDEA(一) :安装与破解(支持最新2020.1)
    Echo框架
    Goland 结构体提示tag
    Mock使用
    Postman文档导出
  • 原文地址:https://www.cnblogs.com/cmhunter/p/4158813.html
Copyright © 2020-2023  润新知