编程小白福音之HTML基础知识(一)

    技术2022-07-10  169

    第一章 HTML入门

    什么是网页?

           由浏览器识别的,用于显示信息的文件;信息包括:新闻、购物、邮件等。

    什么是网站?

           由众多网页组成的群体,网页之间可能通过相互调用实现信息的查看。

    网页的组成元素

    文本:用来描述信息的文字图像:增强信息的生动性和直观性动画:强烈视觉的冲击效果表格:布局的合理性其它:视频、背景音乐等

     

    网页访问的三个要素

    1.网站的存储空间

    服务器用于网页的存放

    2.网站的域名

    通过域名指向需要访问的网页

    3.网页的访问地址

    什么是HTML?

           HTML(Hyper Text Markup Language)超文本标记语言,是构成网页的基本语言。

    网页的基本结构

    网页的声明网页的头部网页的主体

    示例:

        网页的标题

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title>首页</title> </head> <body> </body> </html>

     

    页面显示效果:

          

    HTML标签

    1.标题标签(h1-h6)

    2.段落(p)和换行(br)

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title>首页</title> </head> <body> <p>This is paragraph</p> <p>This is <br> paragraph</p> <p>This is paragraph <br></p> </body> </html>

    结果:

    第二章 图像与超级链接

    图像标签<img>

    语法:

    <img

    src=”图像路径”

    title=”提示信息”

    alt=”图像路径不正确显示的内容”

    width=”宽度”

    height=”高度” />

    图像类型:

    JpgPngGifBmp

    链接路径:

    相对路径

     相对于当前文件的路径(推荐使用)

    ./ 代表当前目录

    ../ 代表上一级目录

    ../../ 代表上一级目录的上一级目录

    绝对路径(链接外部资源文件时使用)

    文件实际存放的位置的完整路径

     

    超级链接

    什么是超级链接?

                  超级链接以称为超链接,使用相互独立的页面互相链接。

       使用方法:

           <a href=”链接的路径” target=”目标窗口名”>链接文本</a>

    超级链接分类:

    1.页面链接

    2.功能链接(我们游览网页时,邮箱链接)

    3.锚链接(连接到指定的地方)

    步骤1:添加锚记(给标签添加id属性) <标签名 id=”锚名”></标签名> 如: <body id=”top”>… </body> 步骤2:使用a标签链接到锚记 <a href=”#锚名”>链接文本</a> 如:<a href=”#top”>返回顶部</a>

    第三章 列表

    无序列表 ul-li

       

    UL (UnOrdered List) LI(List Item) <ul> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li> </ul>

      

       无序列表类型:

          

    disc

    默认值。实心圆。

    circle

    空心圆。

    square

    实心方块。

    <ul type="value">

     

      

     

         嵌套的列表:

          

          

    有序列表

           OL(Ordered List)

           LI(List Item)

    语法:

      <ol>

           <li>List Item 1</li>

    <li>List Item 1</li>

    <li>List Item 1</li>

     </ol>

    示例:

          

    有序列表的类型:

          

    1

    默认值。数字有序列表。(1、2、3、4)

    a

    按字母顺序排列的有序列表,小写。(a、b、c、d)

    A

    按字母顺序排列的有序列表,大写。(A、B、C、D)

    i

    罗马字母,小写。(i, ii, iii, iv)

    I

    罗马字母,大写。(I, II, III, IV)

     

    有序列表的start属性:

           start 属性规定有序列表的开始点

     <ol start=”value”>

           属性值:

    number

    数字。有序列表的开始点。

     

    定义列表

           DL(Description List)

           DT(Description Term)

           DD(Description Definition)

    语法:

           <dl>

                  <dt>电脑</dt>

                  <dd>这是一台用于开发程序的电脑</dd>

                  <dd>这是一台用于开发游戏的电脑</dd>

           </dl>

    示例2:

    第四章 表格

    表格的作用

     为了页面的美观,显示数据规范

    表格的属性:

    <table border=”xx像素” width=”xx像素或百分比” cellpadding=”” cellspacing=”” align=””>

    </table>

    1.border           pixels     规定表格边框的宽度。

    2.cellpadding    pixels %  规定单元边沿与其内容之间的空白。

    3.cellspacing     pixels %  规定单元格之间的空白。

    4.Width             pixels %  规定表格的宽度。

    单元格属性:

           <td width=”” height=”” align=”” valign=””>内容</td>

    第五章 HTML的表单

     

    表单的典型应用:

    注册、登录、网上购物、问卷调查等

    表单的基本语法:

    ‘<form action=” ” method=” ” name=” ”></form>

    Form的属性:

    属性名值说明actionURL当提交表单时向何处发送表单数据(自取,在Java开发中serve pack包中名称一致)methodGET/POST发送HTTP的方式nameform_name表单的名字(自取)

    表单元素

         单行文本框

    <input type=”text”

      name=”名称”

      value=”值”

      size=”显示宽度”

      maxlength=”最多输入字符数”

      readonly=”只读” />

     

    <tr> <th colspan="2">用户注册</th> </tr> <tr> <td width="80px">用户名称</td> <td> <input type="text" placeholder="" name="username" id="username" size="10" maxlength="12"> </td> </tr>

     

    密码框

    <input type=”password”

      name=”名称”

      value=”值”

      size=”显示宽度”

      maxlength=”最多输入字符数”

           readonly=”只读” />

    <tr> <td width="80px">密码</td> <td> <input type="password" name="password" id="password" maxlength="6" size="10"> </td> </tr>

          

    单选框

           <input type=”radio”

      name=”名称”

      value=”值”

      checked=”是否选中” />显示文本

    <tr> <td width="80px">性别</td> <td> <!-- checked是默认选为男性 --> <input type="radio" name="sex" id="sex" value="男" checked>男 <input type="radio" name="sex" id="sex" value="女" >女 </td> </tr>

     

    复选框

    <input type=”checkbox”

      name=”名称”

      value=”值”

      checked=”是否选中” />显示文本

    <tr> <td width="80px">爱好</td> <td> <input type="checkbox" name="hobby" id="hobby" value="电影">电影 <input type="checkbox" name="hobby" id="hobby" value="游戏">游戏 <input type="checkbox" name="hobby" id="hobby" value="玩">玩 </td> </tr>

     

    下拉列表

    <select name=”名称” multiple=”是否多选” size=”可见项数”>

           <option

    value=”选项值”

    selected=”是否选中”>选项显示文本</option>

           <option value=”选项值”>选项显示文本</option>

    </select>

    <tr> <td width="80px">年级</td> <td> <!-- multiples是多选,写上 multiple="multiple"即确定 --> <select name="grade" id="grade"> <option value="1">一年级</option> <option value="2">二年级</option> <option value="3">三年级</option> </select> </td> </tr>

    Select标签的属性使用:

    <tr> <td width="80px">年级</td> <td> <!-- multiples是多选,写上 multiple="multiple"即确定 --> <select name="grade" id="grade" multiple="multiple"> <option value="1">一年级</option> <option value="2" selected>二年级</option> <option value="3">三年级</option> </select> </td> </tr>

    设置默认选中项:

    <tr> <td width="80px">年级</td> <td> <!-- multiples是多选,写上 multiple="multiple"即确定 --> <select name="grade" id="grade"> <option value="1">一年级</option> <option value="2" selected>二年级</option> <option value="3">三年级</option> </select> </td> </tr>

    多行文本框(文本域)

    <textarea name=”名称”

     cols=”列数” rows=”行数”>值</textarea>

    <tr> <td width="80px">内容</td> <td> <textarea name="text" id="text" cols="30" rows="10"></textarea> </td> </tr>

    按钮

    普通按钮

    <input type=”button” value=”普通按钮” />

    提交按钮

    <input type=”submit” value=”提交按钮” />

    重置按钮

    <input type=”reset” value=”重置按钮” />

    图片按钮

    <input type=”image” src=”图片路径” />

    完整代码:

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>单行文本</title> </head> <body> <form action="index.html" method="GET" name="action"> <!-- cellpadding 代表名称与单元格的距离 cellpacing代表单元框与边框的距离 --> <table border="1px" cellpadding="0" cellspacing="0"> <tr> <th colspan="2">用户注册</th> </tr> <tr> <td width="80px">用户名称</td> <td> <input type="text" placeholder="" name="username" id="username" size="10" maxlength="12"> </td> </tr> <tr> <td width="80px">密码</td> <td> <input type="password" name="password" id="password" maxlength="6" size="10"> </td> </tr> <tr> <td width="80px">性别</td> <td> <!-- checked是默认选为男性 --> <input type="radio" name="sex" id="sex" value="男" checked>男 <input type="radio" name="sex" id="sex" value="女" >女 </td> </tr> <tr> <td width="80px">爱好</td> <td> <input type="checkbox" name="hobby" id="hobby" value="电影">电影 <input type="checkbox" name="hobby" id="hobby" value="游戏">游戏 <input type="checkbox" name="hobby" id="hobby" value="玩">玩 </td> </tr> <tr> <td width="80px">年级</td> <td> <!-- multiples是多选,写上 multiple="multiple"即确定 --> <select name="grade" id="grade" > <option value="1">一年级</option> <option value="2" selected>二年级</option> <option value="3">三年级</option> </select> </td> </tr> <tr> <td width="80px">内容</td> <td> <textarea name="text" id="text" cols="30" rows="10"></textarea> </td> </tr> </table> </form> </body> </html>

     

    Processed: 0.014, SQL: 9