银财中国网
Web前端开发基础教程二
创始人
2024-01-20 05:16:40
0次

注释和特殊字符：

如果需要在html文档添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。

html中的注释以“”结束或者快捷键：Ctrl+/。

举例：

添加注释是为了更好的解释代码的功能，便于相关开发人员解释和阅读代码，程序是不会执行注释内容的。

特殊字符：

在这里插入图片描述

举例：

虽然我们在编写代码的时候，文本之间添加了多个空格，但是在网页显示依然只有一个空格。

   我想              放假

因此这种方法显然是不行的，所以我们需要使用特殊字符。

显示效果：

在这里插入图片描述
使用特殊字符：

我想    放假

显示效果：

在这里插入图片描述再比如：

我们想告诉用户，p是一个段落标签：

是一个段落标签

但是在页面中

并没有被显示出来，因为编译器会直接将其解析。

显示如下：
在这里插入图片描述

那么此时也需要使用特殊字符：

<p>是一个段落标签

显示如下：

在这里插入图片描述

表格标签：

表格的主要作用：

表格主要用于显示，展示数据，因为它可以让数据显示的非常的规整，可读性非常好，特别是后台展示数据的时候，能够熟练运用表格就显得很重要，一个清爽简约的表格能够把繁杂的数据表现得很有条理。

表格不是用来布局页面的，而是用来展示数据的。

表格的基本用法：

.........

单元格内的文字

是用来定义表格的标签

标签用于定义表格中的行，必须嵌套在

标签中

用于定义表格中的单元格，必须嵌套在标签中

字母td指表格数据(table data),即数据单元的内容

举例：

   

Document


姓名性别年龄
王俊凯男23
王源男22
易烊千玺男22

显示效果如下：

在这里插入图片描述
注意html中是没有列的概念的，每一行由若干个单元格组成。

表头单元格标签：

一般表头单元格位于表格第一行或者第一列，表头单元格里面的文本内容加粗居中显示。

标签表示html表格的表头部分（table head的缩写）

举例：

姓名性别年龄

显示如下：

在这里插入图片描述

表格属性：

在这里插入图片描述这些属性要写到表格标签中去

举例：

将表格显示在页面中央：

显示如下：
在这里插入图片描述
表格结构标签：
使用场景可能很长，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分，在表格标签中，分别用：
标签表格的头部区域，内部标签拥有标签，一般是位于第一行，标签表格的主体区域，主要用于存放数据本体，这样可以更好的分清表。
举例：
在这里插入图片描述
 注意不要和网页的头部尾部搞混了，这两个标签都是使用在

 
 
 
 

 
 

标签中
 

合并单元格：
 

合并单元格的步骤：
 

<1>先确定是跨行还是跨列合并。
 

<2>找到目标单元格，写上合并发方式=合并的单元格数量，比如:.
 

<3>删除多余的单元格。
 

合并单元格的方式：
 

跨行合并：rowspan=“合并单元格的个数”
 

跨行：最上侧单元格为目标单元格，写合并代码
 

跨列合并：colspan=“合并单元格的个数”
 

跨列：最左侧单元格为目标单元格，写合并代码
 

目标单元格：（写合并代码）
 

举例：
 

将第一行的第二列和第三列单元格进行合并：
 










 

显示如下：
 

在这里插入图片描述
 

无序列表：
 

表格是用来显示数据的，那么列表就是用来布局的。
 

列表最大的特点就是整洁，有序，它作为布局会更加自由和方便。
 

根据使用情境不同，列表可以分为三大类：无序列表，有序列表和自定义列表。
 

无序列表：
 



  • 标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表，而列表项使用
  • 标签定义。



 

在这里插入图片描述举例：
 






  • 列表项1
  • 列表项2
  • 列表项3




 

显示如下：
 

在这里插入图片描述<1>无序列表的各个列表项之间没有顺序级别之分，是并列的。
 

<2>
    和
中只能嵌套
  • ，直接在
    

      标签中输入其他标签或者文字的做法是不被允许的。

       

      例如：
       

      下述这种是不被允许的：
       

      




        123
      • 列表项1
      • 列表项2
      • 列表项3
      



       

      在这里插入图片描述
       

      <3>
    • 与
    • 之间相当于一个容器，可以容纳所有元素。
       

      




      • 列表项1
        123
      • 列表项2
      • 列表项3
      



       

      显示如下：
       

      在这里插入图片描述
       

      <4>无序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置。
       

      有序列表：
       

      在这里插入图片描述
       

      有序列表即为有排列顺序的列表，其各个列表项会按照一定顺序排列定义。
       

      在HTML标签中，
        标签用于定义有序列表，列表排序以数字来显示，并且使用
      1. 标签定义列表项。
         

        有序列表的基本语法格式如下：
         

        3. .....
        

         

        举例：
         

        




        1. 列表1
        2. 列表2
        3. 列表3
        



         

        显示如下：
         

        在这里插入图片描述
         

        自定义列表：
         

        自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
         

        在这里插入图片描述
         

        在HTML标签中，
        标签用于定义描述列表（或定义列表），该标签会与
        (定义项目/名字)和
        (描述每一个项目/名字）一起使用。
         

        基本语法如下：
         

        


         

        举例：
         

        




        名词1
        名词1解释1
        名词1解释2
        



         

        显示如下：
         

        在这里插入图片描述<1>
        里面只能包含
        和
         

        <2>
        和
        个数没有限制，经常是一个
        对应多个
         

        表单标签：
         

        现实中的表单：
         

        在这里插入图片描述
         网页中的表单：
         

        在这里插入图片描述
         

        使用表单的目的是为了手机用户信息。
         

        在网页中，我们需要跟用户进行交互，收集用户资料，此时就需要表单。
         

        表单的组成：
         

        在HTML中，一个完整的表单通常由表单域，表单控件（也称为表单元素）和提示信息3个部分组成。
         

        在这里插入图片描述
         

        表单域：
         

        表单域是一个包含表单元素的区域。
         

        在HTML标签中，标签用于定义表单域，以实现用户信息的收集和传递。
         

        会把它范围内的表单元素信息提交给服务器。
         

        语法格式：
         

        各种表单元素控件


         

        input表单元素标签：
         

        type属性的属性值及其描述如下：
         

        type属性主要用于使表单元素呈现不同的状态
         

        在这里插入图片描述
         

        表单元素：
         

        在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。
         

        表单元素：
         

        在英文单词中，input是输入的意思，而在表单元素中标签用于收集用户信息。
         

        举例：
         

        用户名：
        密码:
        性别：男：女：
        爱好：吃饭：睡觉：打豆豆：
        

         

        显示效果：
         在这里插入图片描述在上文我们提到"radio"是单选框，那么为什么现在性别的两个选项都可以被选择呢？
         

        解决方法为：给单选按钮命名相同的名字。
         

        修改如下：
         

        用户名：
        密码:
        性别：男：女：
        

         

        那么复选框是不是就不需要起相同的名字啦？
         

        那当然不是，复选框也要给每个选项起相同的名字，但它的作用是为了将我们输入的数据提交给后台时分类能够明确。
         

        除了type属性之外，标签还有其他很多属性，其常用的属性如下：
         在这里插入图片描述
         举例：
         

        用户名：
        密码:
        性别：男：女：
        爱好：吃饭：睡觉：打豆豆：
        我已阅读用户协议
        

         

        显示如下：
         

        在这里插入图片描述注：
         

        name和value是每个表单元素都有的属性值，主要给后台人员使用，
         

        name表单元素的名字，要求单选按钮和复选框要有相同的name值，name通常用于区分不同的表单元素。
         

        checked主要针对于单选和复选按钮，主要作用是一打开页面就可以默认选中某个表单元素。
         

        举例：
         

        

        
//将已经填写的表单恢复到最初状态

         

        显示如下：
         在这里插入图片描述
         注意button按钮和submit/reset/file按钮的区别，button按钮并不会提交顺序！
         

        举例：
         

        上传头像：
        //弹出资源管理器

        //网页不会发生任何变化

         

        显示如下：
         

        在这里插入图片描述
         

        label标签：
         

        标签为input元素定义标注标签，用于绑定一个表单元素，当点击标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上来增加用户体验。
         

        举例：
         

        


         

        注：标签的for属性应当与相关元素的id属性相同。
         

        select表单元素：
         

        使用场景：在页面中，如果有多个选项让用户进行选择，并且想要节约页面空间时，我们可以选择

      • 显示效果：

      在这里插入图片描述注意：

      1：

      显示效果：

      在这里插入图片描述
      通过rows[每行中的字符数]和cols[显示的行数]属性，我们可以设置文本框的大小,但是在实际开发中我们并不会使用该属性来设置，都是使用CSS来改变大小

      上一篇：Tkinter保姆级教程（上）

      下一篇：单调区间能写成并吗？【基于间断区间的讨论】

      相关内容

      热门资讯

      喜欢穿一身黑的男生性格（喜欢穿... 今天百科达人给各位分享喜欢穿一身黑的男生性格的知识，其中也会对喜欢穿一身黑衣服的男人人好相处吗进行解...
      发春是什么意思（思春和发春是什... 本篇文章极速百科给大家谈谈发春是什么意思，以及思春和发春是什么意思对应的知识点，希望对各位有所帮助，...
      网络用语zl是什么意思（zl是... 今天给各位分享网络用语zl是什么意思的知识，其中也会对zl是啥意思是什么网络用语进行解释，如果能碰巧...
      为什么酷狗音乐自己唱的歌不能下... 本篇文章极速百科小编给大家谈谈为什么酷狗音乐自己唱的歌不能下载到本地?，以及为什么酷狗下载的歌曲不是...
      华为下载未安装的文件去哪找（华... 今天百科达人给各位分享华为下载未安装的文件去哪找的知识，其中也会对华为下载未安装的文件去哪找到进行解...
      怎么往应用助手里添加应用（应用... 今天百科达人给各位分享怎么往应用助手里添加应用的知识，其中也会对应用助手怎么添加微信进行解释，如果能...
      家里可以做假山养金鱼吗（假山能... 今天百科达人给各位分享家里可以做假山养金鱼吗的知识，其中也会对假山能放鱼缸里吗进行解释，如果能碰巧解...
      一帆风顺二龙腾飞三阳开泰祝福语... 本篇文章极速百科给大家谈谈一帆风顺二龙腾飞三阳开泰祝福语，以及一帆风顺二龙腾飞三阳开泰祝福语结婚对应...
      美团联名卡审核成功待激活（美团... 今天百科达人给各位分享美团联名卡审核成功待激活的知识，其中也会对美团联名卡审核未通过进行解释，如果能...
      四分五裂是什么生肖什么动物（四... 本篇文章极速百科小编给大家谈谈四分五裂是什么生肖什么动物，以及四分五裂打一生肖是什么对应的知识点，希...