HTML基础知识(二)

最新推荐文章于 2021-06-10 00:22:05 发布
最新推荐文章于 2021-06-10 00:22:05 发布
阅读量142 收藏
点赞数
分类专栏： # HTML 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45419127/article/details/115269977
版权

表格

创建表格

表格是用来展示数据的 使数据更加整齐规范

  • table:表格标签
  • tr:行标签 只能嵌套在表格标签内
  • td:单元格标签 用来存储数据 只能嵌套在tr中 td可以嵌套任何标签

表格属性

表格属性


    <table border="1" height="200" width="200" cellspacing="0" cellpadding="5">
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>尧子陌</td>
            <td>男</td>
            <td>24</td>
        </tr>
        <tr>
            <td>惊鸿</td>
            <td>男</td>
            <td>24</td>
        </tr>
    </table>

在这里插入图片描述

表头单元格标签

表头单元格标签一般位于表格的第一行或第一列，用标签th表示，th和td一样但会让字体加粗并居中。

<body>
    <table border="1" height="200" width="200" cellspacing="0" cellpadding="5">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>尧子陌</td>
            <td>男</td>
            <td>24</td>
        </tr>
        <tr>
            <td>惊鸿</td>
            <td>男</td>
           <td>24</td>
        </tr>
    </table>
</body>

在这里插入图片描述

表格标题标签

表格标题标签必须位于表格中才有意义 用caption表示 且表格标题会跟随表格一起移动

<table height="315"  width="500"  border="1"  cellspacing="0" cellpadding="2"   align="center">
       <caption>个人信息表</caption>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>尧子陌</td>
            <td>男</td>
            <td>24</td>
        </tr>
        <tr>
            <td>惊鸿</td>
            <td>男</td>
            <td>24</td>
        </tr>
    </table>

表格案例

<body>
    <table border="1" cellspacing="0"  cellpadding="0" align="center" height="300"  width="500">
        <caption><h2>小说排行耪</h2></caption>
        <tr>
            <th>排名</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>今日搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="./images/down.jpg" alt=""></td>
            <td>345</td>
            <td>123</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">百度</a>
                <a href="#">图片</a>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>盗墓笔记</td>
            <td><img src="./images/up.jpg" alt=""></td>
            <td>34555</td>
            <td>123444</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">百度</a>
                <a href="#">图片</a>
            </td>
        </tr>
        <tr>
            <td>3</td>
            <td>西游记</td>
            <td><img src="./images/up.jpg" alt=""></td>
            <td>24555</td>
            <td>13444</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">百度</a>
                <a href="#">图片</a>
            </td>
        </tr>
        <tr>
            <td>4</td>
            <td>东游记</td>
            <td><img src="./images/up.jpg" alt=""></td>
            <td>3455</td>
            <td>3444</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">百度</a>
                <a href="#">图片</a>
            </td>
        </tr>
        <tr>
            <td>5</td>
            <td>甄嬛传</td>
            <td><img src="./images/up.jpg" alt=""></td>
            <td>3555</td>
            <td>1444</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">百度</a>
                <a href="#">图片</a>
            </td>
        </tr>
        <tr>
            <td>6</td>
            <td>水浒传</td>
            <td><img src="./images/up.jpg" alt=""></td>
            <td>355</td>
            <td>12344</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">百度</a>
                <a href="#">图片</a>
            </td>
        </tr>
        <tr>
            <td>7</td>
            <td>三国演义</td>
            <td><img src="./images/up.jpg" alt=""></td>
            <td>3555</td>
            <td>13444</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">百度</a>
                <a href="#">图片</a>
            </td>
        </tr>


    </table>

在这里插入图片描述

单元格合并

单元格合并的顺序：先上 后下 先左 后右

单元格合并三部曲

  • 先确定是跨行合并 跨列合并
  • 根据先上 后下 先左 后右的顺序找到合并的目标单元格
  • 删除多余的单元格
  <table border="1" cellspacing="0" cellpadding="0" width="500" height="300" align="center">
        <caption>个人信息表</caption>
            <tr>
                <td colspan="3" rowspan="3"></td>
                
                <td></td>
                <td></td>
            </tr>
            <tr>
              
                <td></td>
                <td></td>
            </tr>
            <tr>
                
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
    </table>

在这里插入图片描述

表格划分结构

在这里插入图片描述

<body>
    <table border="1" cellspacing="0" cellpadding="0" width="600" height="200">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>尧子陌</td>
                <td>女</td>
                <td>26</td>
            </tr>
            <tr>
                <td>惊鸿</td>
                <td>男</td>
                <td>28</td>
            </tr>
        </tbody>


        <tfoot>
            <tr>
                <td>地址</td>
                <td colspan="2">地球村</td>

            </tr>

        </tfoot>

    </table>
</body>

在这里插入图片描述

列表

列表用来布局 让布局方式更加整齐统一 自由搭配更高

容器里面装载着结构 样式一致的文字或图片的一种形式 叫做列表

无序列表

无序列表指的是没有顺序的列表  由<ul></ul>  <li></li>组成

注意事项

  • ul标签中只能存放li标签
  • li标签就像一个容器 可以存放任意的标签
  • 列表拥有自己的样式 交给css来处理
  <ul>
        <li>香蕉</li>
        <li>凤梨</li>
        <li>苹果</li>
        <li>火龙果</li>
        <li>丑橘</li>
        <li>菠萝</li>
    </ul>

在这里插入图片描述

有序列表

有顺序的列表  简称有序列表  由<ol></ol>   <li></li>两组标签组成

   <h2>国家排行榜</h2>
    <ol>
        <li>美国</li>
        <li>中国</li>
        <li>俄罗斯</li>
        <li>英国</li>
        <li>法国</li>
        <li>意大利</li>
    </ol>

在这里插入图片描述

自定义列表

对术语或者名词进行解释的列表  简称自定义列表   由<dl></dl>    <dt></dt>   <dd></dd>组成

 <dl>
        <dt>名词</dt>
        <dd>名词解释1</dd>
        <dd>名词解释2</dd>
        <dd>名词解释3</dd>
  </dl>

在这里插入图片描述

表单

表单的作用：收集用户信息

表单三部分：表单控件 提示信息 表单域

input类型

注意事项

1. <input />标签为单标签
2. type属性设置不同的属性值表示不同的控件类型
3. 除了type属性外  input还有别的属性
4. value指表单打开要显示的文字

在这里插入图片描述

value

表单值 表单默认显示的文本

name

name:表单的名字 为了区别不同的表单

checked属性

checked属性表示默认选中状态

总结

在这里插入图片描述

<body>
    <p>账号：<input type="text" value="请输入账号"  name="username"></p>
    <p>密码：<input type="password" value="请输入密码" name="password"></p>
    <p>性别：<input type="radio" name="sex">男<input type="radio" name="sex">女<input type="radio" name="sex">人妖</p>
    <p>爱好：<input type="checkbox" name="hobby">篮球<input type="checkbox" name="hobby">足球<input type="checkbox" name="hobby">乒乓球</p>
    <p>搜索：<input type="button" value="搜索"></p>
    <p>文件：<input type="file"></p>
    <pre><input type="submit">     <input type="reset"> </pre>
</body>

在这里插入图片描述

lable标签

点击lable标签的文字时 光标会跳往被绑定的表单元素里面

第一种方法

直接用lable来包裹

 <label > 账号：<input type="text" value="请输入账号"> </label>

第二种方法

直接用for id来实现

<label for="password">账号：</label>    <input type="text" name="password" id="password">

文本域textarea

textarea:文本域 用来输入多行文字的 属于双标签 可以当留言板使用

 	    <h2>留言板</h2>
        <textarea name="" id="" cols="30" rows="10">

        </textarea>

在这里插入图片描述

下拉菜单

select:下拉菜单

注意事项

  • select标签至少包含一对option标签
  • option标签定义selected标签即为选中的默认值
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
   <select name="" id="">
        <option value="" >请选择当前的省</option>
        <option value="" selected>北京</option>
        <option value="">上海</option>
        <option value="">浙江</option>
        <option value="">广东</option>
        <option value="">河南</option>
    </select>



    <select name="" id="">
            <option value="">请选择当前的市</option>
            <option value="">南阳市</option>
            <option value="">商丘市</option>
            <option value="">驻马店市</option>
            <option value="">信阳市</option>
            <option value="">郑州市</option>
    </select>
</body>

</html>

在这里插入图片描述

form表单域

form：表单域 对用户信息进行收集和传递 form会将表单的所有内容提交到服务器

在这里插入图片描述

<form action="Yao.php" method="POST" name="sheet">
      <p>账号:<input type="text" name="username"/></p>
      <p>密码:<input type="password" name="password"/></p>
      <pre><input type="submit">    <input type="reset"></pre>
  </form>

在这里插入图片描述

综合案例

<body>
    <table  width="600" align="center">
         <caption>
            <h4>青春不常在 抓紧谈恋爱</h4>
        </caption>
        <!-- 第一行 -->
        <tr>
            <td>性别</td>
            <td>
                <img src="./images/man.jpg" />
                <input type="radio" name=sex />男
                <img src="./images/women.jpg" alt="">
                <input type="radio" name="sex">女
            </td>
        </tr>
        <!-- 第二行 -->
        <tr>
            <td>生日</td>
            <td>
                <select name="" id="">
                    <option value="">请选择年</option>
                    <option value="">1996</option>
                    <option value="">1997</option>
                    <option value="">1998</option>
                </select>

                <select name="" id="">
                    <option value="">请选择月</option>
                    <option value="">12</option>
                    <option value="">11</option>
                    <option value="">10</option>
                </select>

                <select name="" id="">
                    <option value="">请选择日</option>
                    <option value="">1</option>
                    <option value="">2</option>
                    <option value="">3</option>
                </select>
            </td>
        </tr>
        <!-- 第三行 -->
        <tr>
            <td>所在地区</td>
            <td>
                <lable> <input type="text"></lable>
            </td>
        </tr>
        <!-- 第四行 -->
        <tr>
            <td>婚姻状况</td>
            <td>
                <input type="radio" name="matrimony">未婚
                <input type="radio" name="matrimony">已婚
                <input type="radio" name="matrimony">离异
            </td>
        </tr>

        <!-- 第五行 -->
        <tr>
            <td>学历</td>
            <td><input type="text" value="高中"></td>
        </tr>

        <!-- 第六行 -->
        <tr>
            <td>月薪</td>
            <td><input type="text" value="5000~10000"></td>
        </tr>
        <!-- 第七行 -->
        <tr>
            <td>手机号</td>
            <td><input type="text" value=""></td>
        </tr>

        <!-- 第八行 -->
        <tr>
            <td>呢称</td>
            <td><input type="text" value=""></td>
        </tr>
        <!-- 第九行 -->
        <tr>
            <td>喜欢的类型</td>
            <td>
                <input type="checkbox" name="genre"> 御姐
                <input type="checkbox" name="genre"> 萝莉
                <input type="checkbox" name="genre"> 宅女
                <input type="checkbox" name="genre"> 傻白甜
            </td>
        </tr>

        <!-- 第十行 -->
        <tr>
            <td>自我介绍</td>
            <td><textarea name="" id="" cols="30" rows="10"></textarea></td>
        </tr>

        <!-- 第十一行 -->
        <tr>
            <td></td>
            <td><img src="./images/btn(1).png" alt=""></td>
        </tr>

        <!-- 第十二行 -->
        <tr>
            <td></td>
            <td><input type="checkbox" name="agree">我同意注册条款和会员加入标准</td>
        </tr>

        <!-- 第十三行 -->
        <tr>
            <td></td>
            <td><a href="#">我是会员  立即登录</a></td>
        </tr>

        <!-- 第十四行 -->
        <tr>
            <td></td>
            <td>
                <h5>我承诺</h5>
                <ul>
                    <li>未满18岁</li>
                    <li>抱着恋爱的态度</li>
                    <li>真诚为了另一半</li>
                </ul>
            </td>
        </tr>
    </table>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wAQ2KmSX-1606049808118)(/img/bVbKCTo)]

查阅资料

「已注销」
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML的名词解释是什么,html是什么意思
weixin_42407741的博客
06-05 4346
HTML是超文本标记语言，是标准通用标记语言下的一个应用；而超文本标记语言的结构包括“头”部分和“主体”部分，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。本文操作环境：Windows7系统、HTML5版，DELL G3电脑HTML是超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。HTML 不是一种编程语言，而是一种标记语言 ...
HTML基础
itzhuzhu的博客
05-07 1158
什么是网页 网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页， 常见以.htm或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。 什么是 HTML HTML 指的是超文本标记语言 (Hyper Text Markup Language) ，是用来描述网页的一种语言。 HTML
html中名词解释,HTML相关名词解释
weixin_31463457的博客
06-05 1896
一、HTML相关名词解释1、HTMLHTML是超级文本标记语言的简称，是一种规范和标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容(如：文字如何处理，画面如何安排，图片如何显示等)。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者...
前端专业名词解释——HTML相关
Jason Cao的博客
08-02 1137
前端专业名词解释HTMLXMLXHTMLHTML和XML的区别HTML和XHTML的区别标签嵌套方式更严格元素必须被关闭标签名必须小写所有的XHTML元素必须包括在和之间HTML5的改进之处结语 HTML HTML（Hyper Text Markup Language）称为超文本标记语言，是一种标识性的语言。 它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。 HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表
HTML语言的名词解释,术语html指的是什么
weixin_39790168的博客
05-31 1958
术语html指的是超文本标记语言的意思，html是构成Web世界的一砖一瓦；html定义了网页内容的含义和结构；除HTML以外的其它技术则通常用来描述一个网页的表现与展示效果，如CSS，或者功能与行为，如JavaScript语言。本文操作环境：Windows7系统、DELL G3电脑、HTML5。HTML是超文本标记语言(HyperText Markup Language)的意思，它是构成 Web...
Html基础知识点.docx
07-23
Html 基础知识点 Html 是一种标记语言，用于创建网页的结构和内容。以下是 Html 基础知识点： 一、Html5 文档类型和字符集 * Html5 文档类型：<!doctype html> * Html5 字符集： 二、Html5 Canvas 元素 * ...
HTML基础知识讲解！
03-26
HTML 基础知识讲解 HTML 基础知识是网页开发的基础，了解 HTML 基础知识是学习网页开发的必备条件。本文将详细讲解 HTML 基础知识，包括 HTML 标题、HTML 段落、HTML 链接和 HTML 图像等。 HTML 标题 -------- ...
2023年HTML基础知识点总结.doc
11-05
HTML基础知识点总结 HTML文档结构是HTML文档的基本结构，包括`<!DOCTYPE html>`、`<html>`、`<head>`、`<body>`等标签，其中`<!DOCTYPE html>`用来声明文档类型，`<html>`是根元素，`<head>`用于定义文档的头部信息...
HTML:HTML 基础知识
05-13
1990 年，由于对 未来发展的远见，Tim Berners-Lee 提出了 的概念，并在第二年在 的基础上将其正式定义为一个标记语言。 于 1993 年正式开始制定 HTML 规范，并在经历了几个版本的草案后于 1995 年发布了 HTML 2.0 ...
CSS基础知识.docx
07-23
CSS 基础知识总结 一、CSS 盒子模型 CSS 盒子模型是指浏览器对 HTML 元素进行渲染和布局的方式。主要有两种盒子模型，即 W3C 盒子模型和 IE 盒子模型。 1. W3C 盒子模型（标准盒子模型）：盒子实际内容（content...
html大全(html名词解释及用法大全)
07-05
html大全(html名词解释及用法大全)
前端——HTML（二）
weixin_41545646的博客
11-13 156
1.表格标签 表格是实际开发中非常常用的标签。 1）表格主要作用：表格主要用于显示、展示数据。因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显示很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。 2）表格的基本语法 <table> <tr> <td>单元格内文字</td> ... </tr> ... </table> <table></table&gt
什么是HTML？
热门推荐
戴向天的博客
03-25 3万+
什么是 HTML？ HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页 HTML 标签 HTML 标记标签通常被称为 HTML 标签 (HTML tag)...
html 名词解释 综合解释,html综合练习
weixin_42374535的博客
06-10 144
综合练习前面三天所学的一丢丢内容img、href、table、frameset，加以巩固。框架html：顶部按钮栏html：《img src="三课优icon.png" height="50px" />《a href="Index.html" target="MidFrame" title="这里只是加载一张图片"> 学校首页 《a href="School.html" target=...
前端名词解释（持续更新）
前端向朔
04-26 4687
前端名词解释 前端名词解释 名词：HTML 解释： HTML 是用来描述网页的一种语言。 HTML拥有很多标签入等。 HTML文档 = 网页，HTML文档包含“标签”和“纯文本”。 HTML的结构决定这个页面稳不稳定，规不规范，性能好不好。 名词：HTML5 解释： HTML5 是 HTML的新标准，它更加语义化，并新增了许多语义化标签。 由于HTML5在PC上只
HTML的table表格元素及用法
qq_52016943的博客
05-26 2141
1.<table>标签 表格通过七个标签创建，分别是 <table>表格标签 <tr>行标签 <th>表头标 <td>表格数据标签 <thead>定义表头 <tbody> 元素用于对 HTML 表格中的主体内容进行分组 <tfoot> 元素用于对 HTML 表格中的表注（页脚）内容进行分组。 ...
Html名词解释：行内元素、块状元素、行内块状元素的区别（了解即可）
virgil
09-10 1670
HTML可以将元素分类（display）方式分为行内元素（display:inline）、块状元素（display:block）和行内块状元素（display:inline-block）三种。 1、行业元素 行内元素最常使用的就是span，其他的只在特定功能下使用，修饰字体&lt;b&gt;和&lt;i&gt;标签， 还有&lt;sub&gt;和&lt;sup&gt;这两个标签可以直接做出...
css工作中常用的效果总结
newbie_ling的博客
12-01 861
1、每逢大的灾难的时候，很多网站变成了灰色，如何让网站快速变灰？css代码是很简单的，用的是css的filter功能。 html { filter: grayscale(100%);//IE浏览器 -webkit-filter: grayscale(100%);//谷歌浏览器 -moz-filter: grayscale(100%);//火狐 -ms-filter: grayscal
html是什么意思 它是一种什么样的语言,HTML 是什么？
weixin_33068783的博客
05-31 6482
既然题主言简意赅的问了，那我就这样来言简意赅地回答：HTML就是一门语言。那么问题来了，HTML是一门什么样的语言呢？HTML中文全名叫做：**“超文本标记语言”**。超文本的意思就是不止是文本，还可以包含图片，链接，音乐，甚至程序等非文字元素。本质上来看，HTML其实和我们日常交流使用的语言没什么两样，不同在于自然语言是用于人与人之间的交流而HTML则是用于人与浏览器之间的交流。要想让浏览器按照...
html基础知识汇总
最新发布
11-19
以下是HTML基础知识的汇总： 1. HTML标签是由尖括号包围的关键词，通常成对出现，第一个标签是开始标签，第二个标签是结束标签，也被称为开放标签和闭合标签。 2. HTML文档包含HTML标题和纯文本，也被称为网页。 3. ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值