web前端入门知识——标签（二）

最新推荐文章于 2023-03-12 23:09:25 发布
最新推荐文章于 2023-03-12 23:09:25 发布
阅读量152 收藏 2
点赞数 2
分类专栏： 前端知识 菜鸟入门 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaotangyu7dong/article/details/116945022
版权

常用标签

转义字符

空格的转义字符

<!deoctype.html>
<html>
     <head>
          <meta  charset="utf-8" />  
          <title>Hello World</title>   
     </head>
     <body>
         <p>很好很好 很好很好很好很好      很好很好很好</p>
     </body>
</html>

在这里插入图片描述
多个空格在编译过程中也变成了一个空格，所以需要转义字符来代替空格

空格的转义字符就是

&nbsp;

<p>很好很好 很好很好很好很好&nbsp;&nbsp;&nbsp;&nbsp;很好很好很好</p>

在这里插入图片描述
常见的转义字符：

&nhsp;	空格
&lt;	小于、左尖括号
&gt;	大于、右尖括号
&copy;	版权符号
&amp;	&

表格标签

table 表格
属性： border 边框属性 border=“数字”
            width 宽度 width=“数字”
            cellpadding 单元格内容到单元格边的距离 往往是0
            cellspacing 单元格和单元格之间的距离 往往是0
            align 规定表格水平如何摆放 值只有left/center/right
tr 行
属性： height 高度 height=“数字”
            align 这个一行文本内容水平摆放 值只有left/center/right
            valign 这个一行文本垂直如何摆放 值只有top/middle/bottom
td单元格
属性： height 高度 height=“数字” 会影响这一行的高度
            width 宽度 会影响这一列的宽度 width=“数字”
            align 这一个单元格内容水平摆放 值只有left/center/right
            valign 这一个单元格垂直如何摆放 值只有top/middle/bottom
            colspan 指明这个单元格横向占据几个单元格的宽度（从左到右进行合并）默认为1
            rowspan 指明这个单元格纵向占据几个单元格的宽度（从上到下进行合并）默认为1

快捷输入表格：tr*n>td* n

<!deoctype.html>
<html>
     <head>
          <meta  charset="utf-8" />  
          <title>Hello World</title>       
     </head>
     <body>
         <table border="1" width="500" height="400">
            <tr>
               <td>1</td>
               <td>1</td>
               <td>1</td>
               <td>1</td>
            </tr>
         </table>
     </body>
</html>

在这里插入图片描述

<table border="1" width="500" height="400" cellspacing="0" cellpadding="0">
            <tr>
               <td>1</td>
               <td>1</td>
               <td>1</td>
               <td>1</td>
            </tr>
            <tr>
               <td>2</td>
               <td>2</td>
               <td>2</td>
               <td>2</td>
            </tr>
         </table>

在这里插入图片描述
合并表格的应用
例子：
在这里插入图片描述

<!deoctype.html>
<html>
     <head>
          <meta  charset="utf-8" >  
          <title>Hello World</title>
     </head>
     <body>
        
         <table border="1" cellspacing="0" width="900" height="1050" align="center" >
            <tr>
               <td width="100" align="center">学 院</td>
               <td colspan="5"></td>
               <td colspan="3"rowspan="5">照片</td>
            </tr>
            <tr>
               <td width="100" align="center">专业</td>
               <td colspan="5"></td>
              
            </tr>
            <tr>
               <td width="100"  align="center">姓名</td>
               <td></td>
               <td width="100"  align="center">性别</td>
               <td></td>
               <td width="100" align="center">民族</td>
               <td></td>
              
            </tr>
            <tr>
               <td width="100"  align="center">出生年月</td>
               <td></td>
               <td width="100"  align="center">籍贯</td>
               <td></td>
               <td width="100" align="center">身高</td>
               <td></td>
               
            </tr>
            <tr>
               <td width="100"  align="center">学历</td>
               <td></td>
               <td width="100"  align="center">政治面貌</td>
               <td colspan="3"></td>
            </tr>
            <tr>
               <td width="100"  align="center">就业意向</td>
               <td colspan="8"></td>
            </tr>
            <tr>
               <td width="100"  align="center">兴趣爱好</td>
               <td colspan="8"></td>
            </tr>
            <tr>
               <td width="100"  align="center">个人说明</td>
               <td colspan="8"></td>
            </tr>
            <tr>
               <td width="100"  align="center">家庭住址</td>
               <td colspan="8"></td>
            </tr>
            <tr>
               <td width="100"  align="center">住宿地址</td>
               <td colspan="4"></td>
               <td width="100"  align="center">联系电话</td>
               <td></td>
               <td width="100"  align="center">手机</td>
               <td></td>
            </tr>
            <tr>
               <td width="100"  align="center">任职情况</td>
               <td colspan="8"></td>
            </tr>
             <tr>
               <td rowspan="4" width="100"  align="center">本人简历</td>
               <td colspan="2" >时间</td>
               <td colspan="2" >学校</td>
               <td colspan="2" >任职</td>
               <td colspan="2" >任职年份</td>
            </tr> 
            <tr>
               <td colspan="2" ></td>
               <td colspan="2" ></td>
               <td colspan="2" ></td>
               <td colspan="2" ></td>
            </tr>
            <tr>
               <td colspan="2" ></td>
               <td colspan="2" ></td>
               <td colspan="2" ></td>
               <td colspan="2" ></td>
            </tr>
            <tr>
               <td colspan="2" ></td>
               <td colspan="2" ></td>
               <td colspan="2" ></td>
               <td colspan="2" ></td>
            </tr>
            <tr>
               <td rowspan="6" width="100"  align="center">奖惩情况</td>
               <td colspan="8" ></td>
            </tr>
            <tr>
               <td colspan="8" ></td>
            </tr>
            <tr>
               <td colspan="8" ></td>
            </tr>
            <tr>
               <td colspan="8" ></td>
            </tr>
            <tr>
               <td colspan="8" ></td>
            </tr>
            <tr>
               <td colspan="8" ></td>
            </tr>
         </table>
     </body>
</html>

语义化标签

thead  表头部
tbody  表身体
tfoot  表底部
th	   单元格，第一行，内容水平居中，文字加粗

 <thead>
            <tr>
               <th>序号</th>
               <th>姓名</th>
               <th>年龄</th>
               <th>手机号</th>
               <th>操作</th>
         </thead>

在这里插入图片描述

表单标签

表单：用于获取网站用户数据，提交给网站管理者的一种渠道

form
属性：action 提交地址
           metmod 提交方式 get/post
           enctype 提交数据类型
input 表单控件
属性：type

  • text 文本输入框
 <form action="" method="" enctype="">
           用户名: <input type="text">
         </form>

在这里插入图片描述

  • password
        <form action="" method="" enctype="">

            用户名: <input type="text">
            <br><br>
            密码：<input type="password">
         </form>

在这里插入图片描述

  • radio 单选内容
 <form action="" method="" enctype="">

            用户名: <input type="text">
            <br><br>
            密码：<input type="password">
            <br><br>
            性别：<input type="radio" name="sex">男
                 <input type="radio" name="sex">女
         </form>

同一个内容一定要分到用一组，才可以进行单选
在这里插入图片描述

  • checkbox 多选
<form action="" method="" enctype="">
            用户名: <input type="text">
            <br><br>
            密码：<input type="password">
            <br><br>
            性别：<input type="radio" name="sex">男
                 <input type="radio" name="sex">女
                 <br><br>
            爱好: <input type="checkbox">篮球
                  <input type="checkbox">足球
                  <input type="checkbox">羽毛球
         </form>

在这里插入图片描述

  • range 拖动条
 编号:
                  <input type="range">

在这里插入图片描述

  • color 取色器
喜欢的颜色:
            <input type="color">

在这里插入图片描述

  • file 选择文件
 <input type="file">

在这里插入图片描述

  • submit 提交按钮
  • reset 重置按钮
  • button 设置一个按钮
<input type="submit">
<input type="reset">
<button>你好</button>

在这里插入图片描述

  • select 下拉菜单
  • 同时运用的标签 option
<select >
               <option value="">---请选择---</option>
               <option value="">广东</option>
               <option value="">深圳</option>
               <option value="">花都</option>
            </select>

在这里插入图片描述

  • textarea 多文本输入
<textarea name="" id="" cols="70" rows="20"></textarea>

在这里插入图片描述
input总结:

  • text 文本输入框
  • password 密码输入框
  • radio 单选框 一组需要一个相同的name属性 label 可以将文字与选项合并，点击文字就可以选择
  • checkbox 多选框
  • range 拖动条
  • color 取色器
  • file 文件上传控件 使用multiple属性可以多选文件
  • submit 提交按钮
  • reset 重置按钮
  • button 设置一个按钮

select 下拉菜单

  • option 下拉选项
  • 第一行输入 disabled 禁止选择
  • size属性 指定下拉菜单的高度
  • mutiple 指定可以多选

textarea: 文本输入框

  • rows属性 控制高度
  • cols属性 控制宽度
七冬与小糖
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端入门知识——相对路径和绝对路径
qianduanshuo的博客
05-28 1万+
去一个地方，首先要明确到达此地的路径。 编程也是如此，要加载图片或者引入其他代码文件，也需要设置正确的路径。 路径分为绝对路径与相对路径： （1）.青岛李沧区重庆中路967号xxx小区17号楼2单元502，这是一个绝对路径。 （2）.15号楼左手边那栋楼2单元502，这是一个相对路径。 由此得出，绝对路径是对一个位置路径完整描述，相对路径则是以某一个事物为参考描述位置。 程序中的相对路径与绝对路径...
web前端基础——CSS入门
01-20
本文将详细介绍CSS入门的基础知识，包括CSS的引入方式、选择器、字体样式、外观属性以及标签显示模式。 1. CSS的引入方式： - 内部样式：直接在HTML的`<head>`标签内的`<style>`标签中编写CSS代码，这样样式只应用...
WEB前端入门——基础标签
m0_55446673的博客
11-30 618
web学习笔记
web前端入门知识解析
xzljj的博客
04-02 8865
一、WEB前端是什么？ 使用HTML/CSS/JS以及更多的框架技术，编写网站页面、App应用、小程序、2D&3D游戏、Web VR&AR等应用，通过内容设计、交互动画、数据操作构建项目与用户的交互界面。前端开发工程师在项目中可以与UI设计师和后台程序员合作，实现设计意图并调用后台接口；也可以独立工作，完成强用户交互的各类应用。 二、WEB前端可以做什么？ 最经典的是各种类型的网站：电子商务、企业门户、管理系统、社区平台等；目前也是移动领域首选技术：WebApp、混编App、手机游戏、
web前端开发基础——在网页中使用表格
热门推荐
陈沫尘的博客
10-19 1万+
系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录系列文章目录前言一、如何插入表格1.关于表格1.二、使用步骤1.引入库2.读入数据总结 前言 本篇主要解释了如何在web中建立表格设置表格的大小，单元格宽高、背景色以及表格内字体的大小 提示：以下是本篇文章正文内容，下面案例可供参考 一、如何插入表格 由于关于web网页制作的软件多种多样
WEB前端入门知识及要点大全
weixin_65996806的博客
03-17 3689
一、WEB前端是什么？ 使用HTML/CSS/JS以及更多的框架技术，编写网站页面、App应用、小程序、2D&3D游戏、Web VR&AR等应用，通过内容设计、交互动画、数据操作构建项目与用户的交互界面。前端开发工程师在项目中可以与UI设计师和后台程序员合作，实现设计意图并调用后台接口；也可以独立工作，完成强用户交互的各类应用。 二、WEB前端可以做什么？ 最经典的是各种类型的网站：电子商务、企业门户、管理系统、社区平台等；目前也是移动领域首选技术：WebApp、混编App、手机游戏、微信公
web前端入门知识：1-3
最新发布
qq_50147784的博客
03-12 1385
一.基本选择器标签选择器:是指用html标签名称作为选择器，按照标签名称分类，为页面中某一标签指定统一的css样式优点：能快速为页面中同类型的标签统一样式缺点：不能设计差异化样式类选择器:使用“.”进行标识，后面紧跟类名，标签调用的时候用class="类名"即可可以为元素对象定义单独或相同的样式，可以选择一个或多个标签ID选择器：使用“#”进行标识，后面紧跟ID名，标签调用的时候用id="id名"即可元素的id值是唯一的，只能应对于文档中某一个具体的元素通配符选择器。
web前端入门知识：1-2
qq_50147784的博客
03-05 354
img src="./1.gif" alt="正在加载中..." width="400px" height="400px">10px 20px 30px 40px：【上:10px , 右:20px , 下:30px , 左:40px】10px 20px 30px 40px：【上:10px , 右:20px , 下:30px , 左:40px】跨行合并：rowspan="合并单元格个的个数" ，rowspan表格的跨行属性，在n-1行删除对应的单元格。属性值使用''/""）
学习随笔——前端入门知识——2020.11.5
weixin_43402353的博客
11-05 760
学习随笔——前端入门知识——2020.11.5 Web标准可以分为3个方面：结构标准语言（HTML,XHTML,XML），表现标准语言（主要包括CSS）和行为标准（主要包括文档对象模型，浏览器对象模型，ECMAScript） HTML超文本标记语言，用于描述超文本中内容的显示方式 XML是一种扩展性标识语言，设计的目的是对HTML的扩充，现在一般用于描述，注释 XHTML是基于XML的标识语言，在HTML4.0的基础上，用XML规则对其进行扩展建立起来的，他是HTML向XML的过渡，但HTML5之后被淘汰
web前端基础——第一章
ZiminLi的博客
10-19 2119
web前端基础
web前端知识汇总——持续更新
disi2163的博客
02-27 146
一、基础入门 目录： 前端基础——HTML+CSS基础入门 ·引入CSS文件的方式，以及link（外链样式）与@import（导入样式）的区别 前端基础——CSS基本样式及盒模型 前端基础——超链接、常用标签及文件路径及便签语义化 前端基础——常见选择符及优先级、块和内嵌、标签默认样式初始 前端基础——内联块（inlineBlock） [小练习-分页效果] ...
《Web前端设计基础——HTML5、CSS3、JavaScript》课后答案整理.pdf
06-10
《Web前端设计基础——HTML5、CSS3、JavaScript》张树明版前十章课后习题答案
Web编程入门——字节跳动.pptx
08-24
Web 编程入门——字节跳动.pptx 本资源为 Web 编程入门指南，涵盖 Web 开发演变、浏览器、Web 编程三大语言、开发工具选择、调试技术、前端技术栈等多个方面的知识点。 Web 开发演变 Web 开发演变经历了从早期的 ...
Delphi+Web前端开发教程基于TMS+WEB+Core框架.pdf
04-18
**Delphi Web前端开发教程——基于TMS WEB Core框架** Delphi Web前端开发教程是针对想要使用TMS WEB Core框架创建Web应用程序的开发者，无论你是初学者还是高级开发者，本教程都提供了丰富的学习资源。TMS WEB ...
Web编程入门——字节跳动.zip
10-25
Web编程入门是初学者踏入互联网...综上所述，"Web编程入门——字节跳动"的课程内容可能覆盖了从基础到进阶的Web开发知识，适合对Web开发感兴趣的新手入门。通过深入学习和实践，你将能够独立创建功能完备的Web应用。
Python知识——异常处理
xiaotangyu7dong的博客
08-02 6295
Pyhton知识异常处理 异常处理 异常是程序发生错误的信号，程序一旦出错就会抛出异常，程序的运行随即终止 #异常的追踪信息 Traceback (most recent call last): File "D:\python\py", line 1, in <module> x NameError: name 'x' is not defined #异常的类型 #异常的内容 为何要处理异常？ 为了增强程序的健壮性，即便是程序运行过程中出错了，也不要终止程序，而是捕捉异常并处理：
Python知识——形参与实参
xiaotangyu7dong的博客
06-11 4691
形参与实参 形参：在定义函数阶段定义的参数称之为形式参数，简称形参，相当于变量名 def func(x,y) #形参 实参：在调用函数阶段传入的值称之为实际参数，简称实参，相当于变量值 func(1,2) #实参 形参与实参的关系： 在调用阶段，实参（变量值）会绑定给形参（变量名） ，这种绑定关系只能在函数体内使用 实参与形参的绑定关系在函数调用时生效，函数调用结束后解除绑定关系 实参传入的值，可以有以下几种形式： 形式一： func(1,2) 形式二： a=1 b=2 func(a,b) 形式
写一个猜数字的游戏
xiaotangyu7dong的博客
04-07 4463
写一个猜数字的游戏 猜数字游戏： 1、电脑会生成一个随机数 2、猜数字 首先明白游戏的玩法：在一定数值范围内，游戏随机生成一个数字，玩家输入比随机数大的数字时，程序会提醒，数值大于目标数，反之亦然。通过不断试错，最终找出目标数字。此游戏可以重复玩。 第一步：设立菜单（输出1进行游戏，0退出游戏） 设立一个menu()，菜单函数 void menu() { printf("*******************************************\n"); printf("*******
循环语句练习、c语言练习
xiaotangyu7dong的博客
04-03 3115
循环语句练习： 1）计算n的阶乘： #include <stdio.h> int main() { int i = 0; int ret = 1; printf("计算阶乘：>"); int n = 0; scanf("%d", &n); for(i = 1; i<=n; i++) { ret = ret * i; } printf("结果是：%d",ret); return 0; } 2）计算1!+2!+3!+…
WEB前端入门与职业前景
"WEB前端简介2018-求索网技术部前端是网站的前台部分，包括PC端和移动端的浏览器上展示给用户浏览的网页。前端开发涉及使用HTML、CSS、JavaScript等技术，以及各类开发和设计工具。前端开发者的工作是构建交互性强、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值