第二章 使用HTML标签组织页面内容

前言:

使用VS Code进行一系列的实操,跟着学习,一起进步。这章大部分代码注释都在代码段里边,需要点开查阅。作者希望和大家一起探讨,不断吸取经验,感谢鼓励。之后还会有有关CSS、JavaScript、JQuery等的更新,欢迎关注收藏订阅。


学习内容:

1.HTML语言概述

2.基本HTML标签

3.表格设置

4.表单设置


一、 HTMl语言概述

<!DOCTYPE html>
<!-- 根标签,表示自己是一个HTML文档 -->
<html lang="en">
<head>
    <!-- 头部信息编辑处 -->
    <meta charset="UTF-8">
    <!-- 当前文档的字符集是采用utf-8的字符,
        也就是我们常说英文字符集;
        uft-8 是Unicode的其中一个使用方式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 页面标题,网页的名字 -->
</head>
<body>
    <!-- HTML主体标签,用于显示HTML文档所要显示的内容 -->
</body>
</html>

二、 基本HTML标签

1.标题标签:h1-h6六个标签,有三种对齐方式,左对齐:left通常默认左对齐;右对齐:right;

居中:center。

<body>
    <h3>默认左对齐</h3>
    <h3 align="left">左对齐</h3>
    <h3 align="right">右对齐</h3>
    <h3 align="center">居中</h3>
</body>

2.

<p>标签:文本文档的基本形式输出,同样可以设置三种对齐方式,可以根据浏览器页面自动换行

<hr>水平线,将段落之间用水平线隔开。  <br>强制换行

<body>
    <!-- 可以使用color设置文本颜色,font-size设置字体大小(px) -->
    <p align="center" >这是第一个p标签居中样式</p>
    <hr color="red" width="200px" size="20px">
    <!-- 水平线分开上下段落,width设置宽度,size设置水平线高度 -->
    <p>这是第二个p标签,<br>从此处换行</p>
</body>

3.<div></div>块标签,将一些文档放在一起。列表标签:有序列表ol和无序列表ul。

<body>
    <div>这是一个块
    <ol>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ol>
    <!-- 使用快捷ol>li{&}*3 -->
    <!-- ol>li{列表前的文字(如上面列表)+&(占位,依次增加)}*3(一共的列表数目) -->
    <ul>
        <li type="disc">图片1,样式为实心圆</li>
        <li type="circle">图片2,样式为空心圆</li>
        <li type="square">图片3,样式为方块</li>
    </ul>
    <!-- 同样可以使用快捷ul>li{&}*3 -->
    </div>
</body>

4.img图像

    <img src="D:\Vs Code\Vs Code练习\img\5.jpg" alt="">
    <!--绝对路径,文件在电脑上的具体位置 -->
    <img src="./img/1.jpg" alt="">
    <!-- ./img子级关系 用./查找,在同一文件下的不同位置-->
    <img src="../img/2.jpg" alt="">
    <!-- ../父级关系 可以往上层继续使用多次../ -->
    <img src="https://pic3.zhimg.com/v2-c4a43d5ae17408c37680a0fc8db61c4b_r.jpg?source=1940ef5c" alt="">
    <!-- 网络地址 网络上某些图片的url地址 -->

5.超链接<a></a>。点击后跳转到相应的网站

<body>
    <a href=""></a>
    <!-- 超文本链接标签 用href描述链接的地址-->
    <a href="https://www.jd.com">京东</a>
    <!-- 可以是某网站的url地址 后跟文本信息,单击时跳转 -->
    <a href="https://www.163.com">
<img src="../img/2.jpg" alt="" width="100px" title="网易">
<!-- 点击处也可以是一个图片、一段文字,一个符号等 -->
    </a>
    <!-- 通过点击图片跳转 -->
    <a href="https://www.taobao.com">。。</a>
    <!-- 通过点击一些符号跳转 -->
</body>

三、表格设置

创建表格使用<table>标签,表格既是一种可视化交流模式,又是一种组织整理数据的手段。人们在通讯交流、科学研究以及数据分析活动当中广泛采用着形形色色的表格。

<body>
    <!-- 进行下边的实列操作可以介绍 -->
    <p>合并单元格6和7:colspan</p>
    <p>合并单元格15和20:rowspan</p>
    <p>水平合并,保存左边,删除右边</p>
    <p>垂直合并,保存上边,删除下边</p>
    <!-- 快速创建表格的方法:
    这里的列子是:table>tr*5>td*5,五行五列的 
    tr后边乘以所需的行数,td后边乘以所需的列数-->
    <table border="1" width="400" height="400">
    <!-- border设置的是表格边线的宽度(border=0表示无边框),
     width设置的是表格的宽度,height设置的是表格的高度 -->
     <caption>这是五行五列的表格</caption>
     <!-- caption:这里可以填写表格的名字 -->
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
            <td>单元格4</td>
            <td>单元格5</td>
        </tr>
        <tr>
            <td colspan="2">单元格6单元格7</td>
            <!-- colspan将列合并,水平方向上的单元格合并 -->
            <td>单元格8</td>
            <td>单元格9</td>
            <td>单元格10</td>
        </tr>
        <tr>
            <td>单元格11</td>
            <td>单元格12</td>
            <td rowspan="3">单元格13 18 23</td>
            <!-- rowspan将行合并,垂直方向上的单元格合并 -->
            <td>单元格14</td>
            <td rowspan="2">单元格15单元格20</td>
        </tr>
        <tr>
            <td colspan="2" rowspan="2">单元格16 17 21 22</td>
            <!-- 同时合并水平和垂直方向上的单元格 -->
            <td>单元格19</td>
        </tr>
        <tr>
            <td>单元格24</td>
            <td>单元格25</td>
        </tr>
    </table>
</body>

表头一般在第一行,可以将<td>标签换成<th>标签,<th>标签的作用是将其文本加粗居中

四、表单设置

表单在网页中主要负责数据采集功能,分为表单标签、表单域和表单按钮。

1.表单基本定义及文本框和密码框:

    <body>
        <form action="https://www.baidu.com" method="get">
            <!-- action里边写的是服务器地址,代表提交后在哪里处理,
        method是提交表单的方法 -->
            <!-- 表单域 -->
            用户名: <input type="text">
            密 码: <input type="password">
            <input type="submit" value="登录">
            <!-- 提交按钮 input是标签名 type属性为submit 
     value值为按钮上的文字显示(如提交 默认为提交) -->
            <input type="reset" value="重置按钮">
            <!-- 重置按钮 type属性为reset value值默认为重置 -->
        </form>
    </body>

2.多行文本框

<textarea rows="显示的行数" cols="每行的字符数" name="元素名">

                                                           初始文本信息(可以不写)    </textarea>

 3.单选按钮与复选框

单选按钮type属性使用radio,复选框type属性使用checkbox。

<body>
    <!-- 以列子说明 -->
    <form action="https://www.baidu.com" method="get ">
        男: <input type="radio" name="sex" value="man">
        女: <input type="radio" name="sex" value="woman">
        <!-- 单选文本按钮 name属性必须一致(因为这是在单选按钮组中) 
        value值为服务器获取的处理值 -->
        <br>
        <!-- 换行展示,效果更直观整齐 -->
        选择喜欢的水果:
        <br>
        苹果:<input type="checkbox" name="1[]" value="apple">
        香蕉:<input type="checkbox" name="1[]" value="banana">
        梨子:<input type="checkbox" name="1[]" value="pear">
        <!-- 复选框按钮,name属性可以不同,因为它是多选项 -->
        <br>
        <input type="submit">
        <!-- 提交按钮 -->
    </form>
</body>

 4.表单元素分组与下拉列表和列表框

当表单里包含较多元素时,通过<fieldset>实现信息的分组,嵌套在<form>里面。

<body>
    <form action="https://www.baidu.com">
        <!-- 提交到百度处理 -->
        <fieldset align="center">
            <!-- legend设置分组的标题 设置在显示中间 -->
            <legend>这是第一个分组表单 </legend>
            <!-- 本表单的文本设置,对控件的定义等 -->
            <p>你好</p>
            请输入信息: <input type="text">
            提交:<input type="submit">
            重置:<input type="reset">
        </fieldset>
        <fieldset align="center">
            <!-- 显示在中间 -->
            <legend>这是第二个分组表单</legend>
            <!-- 下拉列表 必须点开下拉才能显示全部信息-->
            <select name="1">
                <option>1</option>
                <option>2</option>
                <option>3</option>
            </select>
            <!-- 使用快捷select>option*3(所需的列表项数量)
                创建三个下拉列表选项 填入基本信息 -->
            <input type="submit">
        </fieldset>
        <fieldset align="center">
              <!-- 显示在中间 -->
            <legend>这是第三个分组表单</legend>
        <select name="2" size="4">
            <!-- 列表框 直接显示所有信息出来 
            size表示的是显示数量,是下拉的变形-->
            <option value="">4</option>
            <option value="">5</option>
            <option value="">6</option>
            <option value="">7</option>
            <input type="submit">
        </select>
        </fieldset>
    </form>
</body>

》》》》》》》》》》》》》》》》》》》》》

谢谢你在百忙之中观看,小鱼在这里致以诚挚的问候。若代码有误,还望指出,您的指出是我前进的动力,希望您多多支持!今天的学习就到此为止吧,咱们下期再见。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值